Lessons learnt from the FontShop site relaunch

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 developer’s attention span gets diluted after 34.23 continuous lines of CSS code.*

3

* = Bullshit Researching Institute GmbH, 1999


CSS Architecture4


CSS Architecture5


_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 scoreReferencing yourself in your presentation.

+1


CSS Architecture8


CSS Architecture9

.m-styles__families__slider__family__rail__node


CSS Architecture

Good things: – Self explanatory in both HTML & CSS. – Shields object’s 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


CSS Architecture11

117CSS Objects in the project


CSS Architecture12

edenspiekermann_

The form - functionality paradox

https://www.flickr.com/photos/astrid/2583356797

https://www.flickr.com/photos/astrid/2583356797


CSS Architecture14

1


CSS Architecture15

2


CSS Architecture16

3


CSS Architecture17

Same Functionality ≠ Modularity –Elements that serve the same functionality don’t have

to be the same CSS objects. –Otherwise it’s 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 scoreSorry, did it again!+1

http://www.edenspiekermann.com/blog/oocss-and-the-pagification-of-modules

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

https://github.com/kneath/kss


gem install kss

CSS Architecture

Setting up KSS. – Install gem.

20


@styleguides = Kss::Parser.new(“/public/css“)!

CSS Architecture

Setting up KSS. – Install gem. – Parse CSS folder into an object.

21


CSS Architecture

Setting up KSS. – Install gem. – Parse CSS folder into an object. – Iterate object in view.

22

- @styleguides.each do |styleguide|! - [...]!


/*!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

http://next.fontshop.com/styleguide/objects

edenspiekermann_

Sass


CSS Architecture26

Lessons from the FontShop site relaunch 08.07.2014edenspiekermann_ 27



.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;!}!


CSS Architecture30


CSS Architecture31

~12secCSS loading time during development


CSS Architecture32

~12secCSS loading time during development

On a frickin’ 2.8Ghz, 16GB Ram, SSD Machine.


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 doesn’t

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


Javascript Modules35



AMD FTW!



AMD FTW!Module Structure



AMD FTW!Module Structure r.js wrapper -> .min.js









AMD FTW!Module Structure r.js wrapper -> .min.js?









AMD FTW!Module Structure r.js wrapper -> .min.jsHAHAHAHA!






Module Structure r.js wrapper -> .min.js



Module Structure



//= require xxx.js //= require_tree /js/JS Modules

Tryout

Site

Buy


//= 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 don’t ever

need Node’s FS module). – Expose modules to global window.fs.Modules object. – Using bower-rails gem for dependencies.

49


Javascript50

JS Mike = Finally Happy


FontShop is always looking for new dev talent!

Contact Ivo Gabrowitsch: [email protected]. Mention this awesome presentation.

mailto:[email protected]?subject=

berlin amsterdam san francisco stuttgart

edenspiekermann_

Thank you.

Spiros Martzoukos, Web Developer

tw @martzoukos

T +49 157 84340808

!

[email protected]

www.edenspiekermann.com

mailto:[email protected]?subject=

http://www.edenspiekermann.com

Lessons learnt from the FontShop site relaunch

Engineering

css architecture

parse css

module structure

js wrapper

install gem

iterate object

js lessons

color 150ms