8. Lessons from the FontShop site relaunch 08.07.2014edenspiekermann_
CSS Architecture
8
9. Lessons from the FontShop site relaunch 08.07.2014edenspiekermann_
CSS Architecture
9
.m-styles__families__slider__family__rail__node
10. Lessons from the FontShop site relaunch 08.07.2014edenspiekermann_
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
11. Lessons from the FontShop site relaunch 08.07.2014edenspiekermann_
CSS Architecture
11
117CSS Objects in the project
12. Lessons from the FontShop site relaunch 08.07.2014edenspiekermann_
CSS Architecture
12
14. Lessons from the FontShop site relaunch 08.07.2014edenspiekermann_
CSS Architecture
14
1
15. Lessons from the FontShop site relaunch 08.07.2014edenspiekermann_
CSS Architecture
15
2
16. Lessons from the FontShop site relaunch 08.07.2014edenspiekermann_
CSS Architecture
16
3
17. Lessons from the FontShop site relaunch 08.07.2014edenspiekermann_
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
19. 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
20. Hardboiled Front End Development 10.06.2014edenspiekermann_
gem install kss
CSS Architecture
Setting up KSS.
– Install gem.
20
21. 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
22. 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|!
- [...]!
23. 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
26. Lessons from the FontShop site relaunch 08.07.2014edenspiekermann_
CSS Architecture
26
27. Lessons from the FontShop site relaunch 08.07.2014edenspiekermann_ 27
28. Lessons from the FontShop site relaunch 08.07.2014edenspiekermann_ 28
29. 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;!
}!
30. Lessons from the FontShop site relaunch 08.07.2014edenspiekermann_
CSS Architecture
30
31. Lessons from the FontShop site relaunch 08.07.2014edenspiekermann_
CSS Architecture
31
~12secCSS loading time during development
32. 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.
33. 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 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
35. Lessons from the FontShop site relaunch 08.07.2014edenspiekermann_
Javascript Modules
35
36. Lessons from the FontShop site relaunch 08.07.2014edenspiekermann_
Javascript Modules
36
AMD FTW!
37. Lessons from the FontShop site relaunch 08.07.2014edenspiekermann_
Javascript Modules
37
AMD FTW!Module Structure
38. Lessons from the FontShop site relaunch 08.07.2014edenspiekermann_
Javascript Modules
38
AMD FTW!Module Structure r.js wrapper -> .min.js
39. Lessons from the FontShop site relaunch 08.07.2014edenspiekermann_
Javascript Modules
39
AMD FTW!Module Structure r.js wrapper -> .min.js
40. Lessons from the FontShop site relaunch 08.07.2014edenspiekermann_
Javascript Modules
40
AMD FTW!Module Structure r.js wrapper -> .min.js
41. Lessons from the FontShop site relaunch 08.07.2014edenspiekermann_
Javascript Modules
41
AMD FTW!Module Structure r.js wrapper -> .min.js?
42. Lessons from the FontShop site relaunch 08.07.2014edenspiekermann_
Javascript Modules
42
AMD FTW!Module Structure r.js wrapper -> .min.js?
43. Lessons from the FontShop site relaunch 08.07.2014edenspiekermann_
Javascript Modules
43
AMD FTW!Module Structure r.js wrapper -> .min.js?
44. Lessons from the FontShop site relaunch 08.07.2014edenspiekermann_
Javascript Modules
44
AMD FTW!Module Structure r.js wrapper -> .min.js
HAHAHAHA!
45. Lessons from the FontShop site relaunch 08.07.2014edenspiekermann_
Javascript Modules
45
AMD FTW!Module Structure r.js wrapper -> .min.js
46. Lessons from the FontShop site relaunch 08.07.2014edenspiekermann_
Javascript Modules
46
Module Structure r.js wrapper -> .min.js
47. Lessons from the FontShop site relaunch 08.07.2014edenspiekermann_
Javascript Modules
47
Module Structure
48. Lessons from the FontShop site relaunch 08.07.2014edenspiekermann_
Javascript Modules
48
//= require xxx.js
//= require_tree /js/JS Modules
Tryout
Site
Buy
49. 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 don’t ever
need Node’s FS module).
– Expose modules to global window.fs.Modules object.
– Using bower-rails gem for dependencies.
49
50. Lessons from the FontShop site relaunch 08.07.2014edenspiekermann_
Javascript
50
JS Mike = Finally Happy
51. 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.
52. 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