lessons learnt from the fontshop site relaunch

Download Lessons learnt from the FontShop site relaunch

Post on 19-Aug-2014

538 views

Category:

Engineering

8 download

Embed Size (px)

DESCRIPTION

A presentation I gave at up.front.ug, on July 8th, about our Front End process and learnings while developing the next.fontshop.com.

TRANSCRIPT

  • berlin amsterdam san francisco stuttgart edenspiekermann_ Lessons from the FontShop site relaunch UpFront talk 8th July 2014
  • edenspiekermann_ CSS ARCHITECTURE
  • Lessons from the FontShop site relaunch 08.07.2014edenspiekermann_ body {! font-size: 100%;! font-family: Georgia, serif;! }! ! .o-chosen-select-box.chosen- container,.m-font- autocomplete{display:inline- block;position:relative;vertical- align:middle}.o-chosen-select- box .chosen-single,.m-font- autocomplete__input{background- color:#f9f8f3;color:#262626;-webkit-box- sizing:border-box;-moz-box-sizing:border-box;box- sizing:border-box;border:4px solid #fff;display:block;cursor:pointer;height:2.5em;line- height:1.25em;padding:0 2.125em;-webkit-transition:background- color 150ms,border-color 150ms;-moz-transition:background-color 150ms,border-color 150ms;! .l-modal__tooltip__pane{z-index:30}.o-error{z-index:10}.o- pulldown-panel__list{z-index:10}.l-tryout-page__canvas{z-index: 1}.l-tryout-page__header{z-index:30}.m-tryout- textblock__action{z-index:20}.m-tryout- textblock__editable{z-index:20}.m-tryout- textblock__placeholder{z-index:10}.m-font- autocomplete__dropdown,.o-chosen-select- box{z-index:40}.l-tryout-page__template- links,.l-tryout-page__bgimage-info{z- index:50}.l-tryout-page__meta-links{z- index:10000}.m-tryout-template-links centered{z-index:10}! ! #footer .left-column .article ul.links > li a img {! border-color: #0A0;! }! CSS Architecture Scientifically proven fact: a developers attention span gets diluted after 34.23 continuous lines of CSS code.* 3 * = Bullshit Researching Institute GmbH, 1999
  • Lessons from the FontShop site relaunch 08.07.2014edenspiekermann_ CSS Architecture 4
  • Lessons from the FontShop site relaunch 08.07.2014edenspiekermann_ CSS Architecture 5
  • Lessons from the FontShop site relaunch 08.07.2014edenspiekermann_ _config/! ! extends/! ! mixins/! ! ! _colors.sass! ! ! ! ! var/! ! ! _animations.sass! ! ! ! ! _z-index.sass! ! globals/! ! _typography.sass! ! ! ! objects/! ! _o-button.sass! ! ! ! modules/! ! _m-waterfalls.sass! ! ! ! layouts/! ! _l-homepage.sass! ! ! ! vendor/! ! _noone.reads.me.lol.sass! ! ! ! application.sass CSS Architecture Structure. Vars, mixins under _config ensure consistency. Globals folder contains non-modular global styles. Objects folder has the smallest modular units. Modules are combined Objects. Sometimes not exactly modular but mapped to content entities. Layouts contain only layout (duh) information such as width, height, margin, padding. 6
  • edenspiekermann_ Douchebag score Referencing yourself in your presentation. +1
  • Lessons from the FontShop site relaunch 08.07.2014edenspiekermann_ CSS Architecture 8
  • Lessons from the FontShop site relaunch 08.07.2014edenspiekermann_ CSS Architecture 9 .m-styles__families__slider__family__rail__node
  • Lessons from the FontShop site relaunch 08.07.2014edenspiekermann_ CSS Architecture Good things: Self explanatory in both HTML & CSS. Shields objects scope. ! Bad things: Can easily get carried away with underlines. Verbal classes (but you get used to it). ! Things to remember: Never nest selectors (to ensure specificity == 1). Always & only, use classes. 10
  • Lessons from the FontShop site relaunch 08.07.2014edenspiekermann_ CSS Architecture 11 117CSS Objects in the project
  • Lessons from the FontShop site relaunch 08.07.2014edenspiekermann_ CSS Architecture 12
  • edenspiekermann_ The form - functionality paradox https://www.flickr.com/photos/astrid/2583356797
  • Lessons from the FontShop site relaunch 08.07.2014edenspiekermann_ CSS Architecture 14 1
  • Lessons from the FontShop site relaunch 08.07.2014edenspiekermann_ CSS Architecture 15 2
  • Lessons from the FontShop site relaunch 08.07.2014edenspiekermann_ CSS Architecture 16 3
  • Lessons from the FontShop site relaunch 08.07.2014edenspiekermann_ CSS Architecture 17 Same Functionality Modularity Elements that serve the same functionality dont have to be the same CSS objects. Otherwise its a game of show, hide, absolute position elements. More info: http://www.edenspiekermann.com/blog/ oocss-and-the-pagification-of-modules 1 2 3 Douchebag score Sorry, did it again!+1
  • edenspiekermann_ Living Styleguides
  • Hardboiled Front End Development 10.06.2014edenspiekermann_ CSS Architecture Requirements-Challenges: Auto-maintained. No duplicate views in production & styleguide. CSS Refactoring at the same time, to normalise objects. ! Advantages: Nice overview of all your objects. Enforces good practices. Enhances developer designer collaboration. Helps you scale your project. ! Tool: https://github.com/kneath/kss 19
  • Hardboiled Front End Development 10.06.2014edenspiekermann_ gem install kss CSS Architecture Setting up KSS. Install gem. 20
  • Hardboiled Front End Development 10.06.2014edenspiekermann_ @styleguides = Kss::Parser.new(/ public/css)! CSS Architecture Setting up KSS. Install gem. Parse CSS folder into an object. 21
  • Hardboiled Front End Development 10.06.2014edenspiekermann_ CSS Architecture Setting up KSS. Install gem. Parse CSS folder into an object. Iterate object in view. 22 - @styleguides.each do |styleguide|! - [...]!
  • Hardboiled Front End Development 10.06.2014edenspiekermann_ /*! The global button object.! ! .button - Primary button.! .button--green - Green variation.! ! Styleguide 1.0 Button! */! ! .button {! height: 20px;! text-align: center;! width: 100px;! }! ! .button--green {! background-color: green;! }! CSS Architecture Setting up KSS. Install gem. Parse CSS folder into an object. Iterate object in view. Use the magic KSS syntax. 23
  • edenspiekermann_ http://next.fontshop.com/styleguide/objects
  • edenspiekermann_ Sass
  • Lessons from the FontShop site relaunch 08.07.2014edenspiekermann_ CSS Architecture 26
  • Lessons from the FontShop site relaunch 08.07.2014edenspiekermann_ 27
  • Lessons from the FontShop site relaunch 08.07.2014edenspiekermann_ 28
  • Lessons from the FontShop site relaunch 08.07.2014edenspiekermann_ .o-logo__block--left! +fs-color(secondary, background-color)! CSS Architecture Using Sass to create themes: Too much labor to create theme variations for each selector. Created Sass function to do that automatically. ! Problems: Specificity issues in overriding styles (trying to convince myself that using !important is ok). Slow compilation times. 29 body.theme--white .o-logo__block--left {! background-color: yellow;! }! body.theme--yellow .o-logo__block--left {! background-color: white;! }! body.theme--black .o-logo__block--left{! background-color: yellow;! }!
  • Lessons from the FontShop site relaunch 08.07.2014edenspiekermann_ CSS Architecture 30
  • Lessons from the FontShop site relaunch 08.07.2014edenspiekermann_ CSS Architecture 31 ~12secCSS loading time during development
  • Lessons from the FontShop site relaunch 08.07.2014edenspiekermann_ CSS Architecture 32 ~12secCSS loading time during development On a frickin 2.8Ghz, 16GB Ram, SSD Machine.
  • Lessons from the FontShop site relaunch 08.07.2014edenspiekermann_ CSS Architecture Tips: Helpful to prefix classes (o-, l-, m-), that way you recognize their type in markup. Prefix JS hooks with js-. That way HTML/CSS restructuring doesnt affect javascript functionality. Put all rushed code in shame.css. Always write reason of inclusion in comments. Keep all z-index values in z-index.css and always use increments of 10 or more. 33
  • edenspiekermann_ JAVASCRIPT
  • Lessons from the FontShop site relaunch 08.07.2014edenspiekermann_ Javascript Modules 35
  • Lessons from the FontShop site relaunch 08.07.2014edenspiekermann_ Javascript Modules 36 AMD FTW!

Recommended

View more >