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 Architecture
4

CSS Architecture
5

_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

CSS Architecture
8

CSS Architecture
9
.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 Architecture
11
117CSS Objects in the project

CSS Architecture
12

edenspiekermann_
The
form - functionality
paradox
https://www.flickr.com/photos/astrid/2583356797

CSS Architecture
14
1

CSS Architecture
15
2

CSS Architecture
16
3

CSS Architecture
17
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 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

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.
– 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.
– Iterate object in view.
– Use the magic KSS syntax.
23

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

CSS Architecture
26

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 Architecture
30

CSS Architecture
31
~12secCSS loading time during development

CSS Architecture
32
~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

Javascript Modules
35

Javascript Modules
36
AMD FTW!

Javascript Modules
37
AMD FTW!Module Structure

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

Javascript Modules
39

Javascript Modules
40

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

Javascript Modules
42

Javascript Modules
43

Javascript Modules
44
HAHAHAHA!

Javascript Modules
45

Javascript Modules
46
Module Structure r.js wrapper -> .min.js

Javascript Modules
47
Module Structure

Javascript Modules
48
//= 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

Javascript
50
JS Mike = Finally Happy

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

Lessons learnt from the FontShop site relaunch

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (18)

Similar to Lessons learnt from the FontShop site relaunch

Similar to Lessons learnt from the FontShop site relaunch (20)

Recently uploaded

Recently uploaded (20)

Lessons learnt from the FontShop site relaunch