bridging the gap between designers and developers at the guardian
DESCRIPTION
There is often a vocabulary gap between designers an developers, who should aim towards a ubiquitous way of conversing about colours, typography, viewport sizes, or the responsive grid system of a digital product… To bridge this gap at the Guardian, we use a CSS pre-processor as a communication enabler through the abstractions it allows us to put in place. Talk given at re:revelop 2014 in Bournemouth on 22/08/2014: http://redevelop.io/TRANSCRIPT
Bridging the gap between developers and designers at
the Guardian
Who is this conference for?
Who is this conference for?
The ones who write code
Who is this conference for?
The ones who write codeThe ones who don’t
Who is this conference for?
The ones who write codeThe ones who don’t
The ones who use CSS pre-processors
Who is this conference for?
The ones who write codeThe ones who don’t
The ones who use CSS pre-processorsThe ones who never heard of them
Mars Climate Orbiter23 September 1999
theguardian.com
github.com/guardian/frontend
66 contributors~30 engineers touch HTML/CSS
github.com/guardian/frontend
66 contributors~30 engineers touch HTML/CSS~25 000 lines of CSS
github.com/guardian/frontend
66 contributors~30 engineers touch HTML/CSS~25 000 lines of CSSRelease cycle ~4 times per day
Product Manager
Designers
Engineers
Editorial
UX Designer
Idea
Idea
Prototype
Idea
Prototype
Idea
Prototype
Idea
Test
Prototype
Idea Test
@kaelig
Our context
@kaelig
Lots of contributors
Our context
@kaelig
Lots of contributorsDifferent skill sets
Our context
@kaelig
Lots of contributorsDifferent skill sets
People speaking different languages
Our context
@kaelig
Lots of contributorsDifferent skill sets
People speaking different languages
We release early and often
Our context
@kaelig
Lots of contributorsDifferent skill sets
People speaking different languages
We release early and oftenWe want to keep it that way
Our context
Developer tools
Scala
Play!
GruntSass
RequireJS
Bower
AWS
Node.jsSelenium
WebdriverRuby
TeamCity
GitHub
PhantomJSAngular
Beer
Developer tools
Scala
Play!
GruntSass
RequireJS
Bower
AWS
Node.jsSelenium
WebdriverRuby
TeamCity
GitHub
PhantomJSAngular
Beer
The colour for the article’s headline is “light grey”
@kaelig
@kaelig
$c-brandBlue: #005689;
@kaelig
$c-brandBlue: #005689;.nav { background: $c-brandBlue; }
@kaelig
$c-brandBlue: #005689;.nav { background: $c-brandBlue; }
@kaelig
.nav { background: #005689; }
Takeaways
@kaelig
Takeaways
• Code is a communication tool (here, thanks to variables)
@kaelig
Takeaways
• Code is a communication tool (here, thanks to variables)
• A pre-processor avoids constant copy and pasting of specific values
@kaelig
Breakpoints
@kaelig
@kaelig
@media (min-width: 37.5em) {}
@kaelig
@media (min-width: 37.5em) {}
@media (min-width: $tablet) {}
@kaelig
@media (min-width: 37.5em) {}
@media (min-width: $tablet) {}
@include mq(tablet) {}
@kaelig
@media (min-width: 37.5em) {}
@media (min-width: $tablet) {}
@include mq(tablet) {}@include mq(tablet, desktop) {}
@kaelig
@media (min-width: 37.5em) {}
@media (min-width: $tablet) {}
@include mq(tablet) {}@include mq(tablet, desktop) {}
@include mq($to: tablet) {}
@kaelig
sass-mq
• Reusable @media query abstraction • A breakpoint has a name, instead of
being called by its width • Simplifies cross-browser support (IE8)
git.io/sass-mq
@kaelig
CSS
.nav { background: #005689; } @media all and (min-width: 37.5em) { .nav { background: transparent; } }
sass-mq: example
Sass.nav { background: $c-brandBlue; ! @include mq($from: tablet) { background: transparent; } }
sass-mq: example
Sass
CSS
.nav { background: $c-brandBlue; ! @include mq($from: tablet) { background: transparent; } }
.nav { background: #005689; } @media all and (min-width: 37.5em) { .nav { background: transparent; } }
Naming breakpoints
$mq-breakpoints: ( mobile: 320px, tablet: 740px, desktop: 980px, wide: 1300px );
@kaelig
Naming breakpoints
mobile vs S tablet vs M
desktop vs L wide vs XL
@kaelig
Takeaways
@kaelig
Takeaways
• Technically complex things can be made much simpler looking
@kaelig
Takeaways
• Technically complex things can be made much simpler looking
• Taking time to code small tools can actually be super productive
@kaelig
The grid
@kaelig
4 to 16 60px columns
Gutter: 20px
Outer margins:
< 480px: 10px
>= 480px: 20px
A column, a gutter… How much is that in pixels?
@kaelig
.element { width: 220px; } @media (min-width: 56.25em) { .element { width: 540px; } }
3 columns by default, then 7 columns on desktops
.element { width: gs-span(3); } @include mq(desktop) { .element { width: gs-span(7); } }
3 columns by default, then 7 columns on desktops
Basing breakpoints on the grid
@kaelig
$right-column: gs-span(4); $left-column: gs-span(2); // Grows to 3 columns on wide viewports $left-column-wide: gs-span(3); !$mq-breakpoints: ( mobile: gs-span(4) + $gs-gutter, // 320px tablet: gs-span(9) + $gs-gutter*2, // 740px desktop: gs-span(12) + $gs-gutter*2, // 980px wide: gs-span(16) + $gs-gutter*2, // 1300px ! // Tweakpoints mobileLandscape: gs-span(6) + $gs-gutter, // 480px ! // Content rightCol: gs-span(11) + $gs-gutter*2, // 900px leftCol: gs-span(13) + $gs-gutter*2, // 1060px ! // Facia faciaLeftCol: gs-span(14) + $gs-gutter*2 // 1140px );
@kaelig
Takeaways
@kaelig
Takeaways
• Machines can (must) do maths, so you don’t have to
@kaelig
Takeaways
• Machines can (must) do maths, so you don’t have to
• The sum of the parts does not equal the whole (grid system + breakpoints)
@kaelig
16px/20px normal14px/18px normal
14px/18px normal
14px/18px normal
14px/18px normal
16px/20px normal
32px/36px normal
32px/36px normal
text sans 12px/16px
text sans 12px/16px
20px/24px normal
20px/28px bolder
? ? ?
@kaelig
CSS
Type scale example
Sass.element { font-size: 16px; line-height: 20px; font-family: "Guardian Egyptian Headline", Georgia, serif; font-weight: 900; }
.element { @include fs-header(1); }
CSS
Type scale example
Sass
.element { font-size: 16px; line-height: 20px; font-family: "Guardian Egyptian Headline", Georgia, serif; font-weight: 900; }
.element { @include fs-header(1); }
16px/20px normal14px/18px normal
14px/18px normal
14px/18px normal
14px/18px normal
16px/20px normal
32px/36px normal
32px/36px normal
text sans 12px/16px
text sans 12px/16px
20px/24px normal
20px/28px bolder
Headline 2Headline 1
Headline 1
Headline 1
Headline 2
Headline 6
Headline 6
Text Sans 1
Text Sans 1
Headline 3
Header 3
Headline 1
Isn’t this putting a cap on creativity?
Takeaways
@kaelig
Takeaways
• When no naming convention is in place, you can get together and set a new one
@kaelig
Takeaways
• When no naming convention is in place, you can get together and set a new one
• Putting design principles into in code can improve UI consistency
@kaelig
Prototype
Idea Test
@kaelig
Designsystem
Designsystem
Designsystem
Designsystem
@kaelig
Prototype
Idea Test
Bridge the gap between developers and designers
Credits: Mars Climate Orbiter 2 — By NASA/JPL/Corby Waste [Public domain], via Wikimedia Commons — http://commons.wikimedia.org/wiki/File
%3AMars_Climate_Orbiter_2.jpg Hipster — Cámara espía — https://flic.kr/p/cXMuEd
Mug — slavik_V — https://flic.kr/p/9WgM9D swiss style grid sample — Filipe Varela — https://flic.kr/p/4xLDb1
Gene Wilburn — A Splash of Colour — https://flic.kr/p/5VK8kv Glasses designed by Okan Benn from the Noun Project
Document designed by Jamison Wieser from the Noun Project
@kaelig