Lessons learnt from the FontShop site relaunch
5 likes1,313 views
The document presents lessons learned from the FontShop site relaunch, emphasizing best practices in CSS architecture, module structuring, and JavaScript implementation. Key takeaways include the importance of consistency, avoiding selector nesting, and the benefits of living style guides for enhanced collaboration and maintainability. Additional tips highlight the utility of class prefixes and careful management of z-index values.
![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|!
- [...]!](https://image.slidesharecdn.com/upfront-140709025447-phpapp01/85/Lessons-learnt-from-the-FontShop-site-relaunch-22-320.jpg)
Lessons learnt from the FontShop site relaunch
- 1. berlin amsterdam san francisco stuttgart edenspiekermann_ Lessons from the FontShop site relaunch UpFront talk 8th July 2014
- 3. 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
- 4. Lessons from the FontShop site relaunch 08.07.2014edenspiekermann_ CSS Architecture 4
- 5. Lessons from the FontShop site relaunch 08.07.2014edenspiekermann_ CSS Architecture 5
- 6. 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
- 7. edenspiekermann_ Douchebag score Referencing yourself in your presentation. +1
- 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