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!

Lessons from the FontShop site relaunch 08.07.2014edenspiekermann_ Javascript Modules 37 AMD FTW!Module Structure

Lessons from the FontShop site relaunch 08.07.2014edenspiekermann_ Javascript Modules 38 AMD FTW!Module Structure r.js wrapper -> .min.js

Lessons from the FontShop site relaunch 08.07.2014edenspiekermann_ Javascript Modules 39 AMD FTW!Module Structure r.js wrapper -> .min.js

Lessons from the FontShop site relaunch 08.07.2014edenspiekermann_ Javascript Modules 40 AMD FTW!Module Structure r.js wrapper -> .min.js

Lessons from the FontShop site relaunch 08.07.2014edenspiekermann_ Javascript Modules 41 AMD FTW!Module Structure r.js wrapper -> .min.js?

Lessons from the FontShop site relaunch 08.07.2014edenspiekermann_ Javascript Modules 42 AMD FTW!Module Structure r.js wrapper -> .min.js?

Lessons from the FontShop site relaunch 08.07.2014edenspiekermann_ Javascript Modules 43 AMD FTW!Module Structure r.js wrapper -> .min.js?

Lessons from the FontShop site relaunch 08.07.2014edenspiekermann_ Javascript Modules 44 AMD FTW!Module Structure r.js wrapper -> .min.js HAHAHAHA!

Lessons from the FontShop site relaunch 08.07.2014edenspiekermann_ Javascript Modules 45 AMD FTW!Module Structure r.js wrapper -> .min.js

Lessons from the FontShop site relaunch 08.07.2014edenspiekermann_ Javascript Modules 46 Module Structure r.js wrapper -> .min.js

Lessons from the FontShop site relaunch 08.07.2014edenspiekermann_ Javascript Modules 47 Module Structure

Lessons from the FontShop site relaunch 08.07.2014edenspiekermann_ Javascript Modules 48 //= require xxx.js //= require_tree /js/JS Modules Tryout Site Buy

Lessons from the FontShop site relaunch 08.07.2014edenspiekermann_ //= require jquery! ! (function (win) {! ! var GlobalLikes = {};! ! GlobalLikes = Backbone.View.extend({! ! initialize: function () {! this.options = _.extend({}, ! this.defaults, this.$el.data());! this.getLikes();! },! ! ! ! ! ! ! ! ! ! ! });! ! win.fs.Modules.GlobalLikes = GlobalLikes;! ! })(window);! ! Javascript Working well with Sprockets. Eventually. Declare dependencies with //=require xxx. Scope everything to window.fs (and pray we dont ever need Nodes FS module). Expose modules to global window.fs.Modules object. Using bower-rails gem for dependencies. 49

Lessons from the FontShop site relaunch 08.07.2014edenspiekermann_ Javascript 50 JS Mike = Finally Happy

Lessons from the FontShop site relaunch 08.07.2014edenspiekermann_ 51 FontShop is always looking for new dev talent! Contact Ivo Gabrowitsch: ivo@fontshop.com. Mention this awesome presentation.

berlin amsterdam san francisco stuttgart edenspiekermann_ Thank you. Spiros Martzoukos, Web Developer tw @martzoukos T +49 157 84340808 ! s.martzoukos@de.edenspiekermann.com www.edenspiekermann.com