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.*

* = 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.

edenspiekermann_

Douchebag scoreReferencing yourself in your presentation.

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.

CSS Architecture11

117CSS Objects in the project

CSS Architecture12

edenspiekermann_

The form - functionality paradox

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

CSS Architecture14

CSS Architecture15

CSS Architecture16

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

Douchebag scoreSorry, 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

gem install kss

CSS Architecture

Setting up KSS. – Install gem.

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

CSS Architecture

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

CSS Architecture

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

- @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.

edenspiekermann_

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

edenspiekermann_

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.

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

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

//= 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.

Javascript50

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

Engineering

Transcript of Lessons learnt from the FontShop site relaunch

Relaunch VGZ (UVIT)

FontShop - Meet Your Type

HUL Relaunch

Candia Relaunch Final

A Rasana Relaunch

Relaunch Of Frooti

wien.at Relaunch 2010

TMD Brand Relaunch

Neutral relaunch

Onida relaunch strategies

Dental fit Relaunch

FontShop 100 Bestenshriften

DC Relaunch Guide

Avon Jewelry Relaunch

Relaunch The Product

FontShop - Typography

tata nano relaunch

Relaunch MBA-Vergleich.de

Continuous Relaunch - Impulsvortrag auf der relaunch Konferenz 2014

Barchart.com Relaunch