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/

1. Bridging the gap between
developers and designers at
the Guardian

2. Who is this conference for?

3. Who is this conference for?
The ones who write code

4. Who is this conference for?
The ones who write code
The ones who don’t

5. Who is this conference for?
The ones who write code
The ones who don’t
The ones who use CSS pre-processors

6. Who is this conference for?
The ones who write code
The ones who don’t
The ones who use CSS pre-processors
The ones who never heard of them

7. Mars Climate Orbiter
23 September 1999

8. theguardian.com

9. github.com/guardian/frontend

10. github.com/guardian/frontend
66 contributors

11. github.com/guardian/frontend
~30 engi6n6e ecrosn ttoriubcuht oHrTsML/CSS

12. github.com/guardian/frontend
~30 en~g2i56n 60e e0cro0sn lttionriuebcsuh ot oHf rCTsSMSL/CSS

13. github.com/guardian/frontend
~30 en~g2i56n R60e ee0clro0esna ltstionreiue bccsuyh oct olHfe rCT sSMSL/CSS
~4 times per day

15. 


Designers

 Product Manager
Engineers

Editorial

UX Designer


17. Idea

18. Idea

19. Idea
Prototype

20. Idea
Prototype

21. Idea
Prototype
Test

22. Prototype
Idea Test

23. @kaelig
Our context

24. @kaelig
Our context
Lots of contributors

25. @kaelig
Our context
Lots of contributors
Different skill sets

26. @kaelig
Our context
Lots of contributors
Different skill sets
People speaking different languages

27. @kaelig
Our context
Lots of contributors
Different skill sets
People speaking different languages
We release early and often

28. @kaelig
Our context
Lots of contributors
Different skill sets
People speaking different languages
We release early and often
We want to keep it that way

29. Scala
Developer tools
Play!
Grunt
Sass
Bower
RequireJS
AWS
Node.js
Selenium
Webdriver
Ruby
TeamCity
GitHub
PhantomJS
Angular
Beer

30. Scala
AWS
Developer tools
Play!
Bower
Grunt Sass RequireJS
Node.js
Selenium
Webdriver
Ruby
TeamCity
GitHub
PhantomJS
Angular
Beer

31. sass-lang.com
@kaelig

32. The colour for the article’s headline is “light grey”
@kaelig

35. @kaelig

36. $c-brandBlue: #005689;
@kaelig

37. $c-brandBlue: #005689;
.nav { background: $c-brandBlue; }
@kaelig

38. $c-brandBlue: #005689;
.nav { background: $c-brandBlue; }
@kaelig
.nav { background: #005689; }

39. Takeaways
@kaelig

40. Takeaways
• Code is a communication tool (here,
thanks to variables)
@kaelig

41. Takeaways
• Code is a communication tool (here,
thanks to variables)
• A pre-processor avoids constant copy
and pasting of specific values
@kaelig

42. Breakpoints
@kaelig

43. @kaelig

44. @media (min-width: 37.5em) {}
@kaelig

45. @media (min-width: 37.5em) {}
@media (min-width: $tablet) {}
@kaelig

46. @media (min-width: 37.5em) {}
@media (min-width: $tablet) {}
@include mq(tablet) {}
@kaelig

47. @media (min-width: 37.5em) {}
@media (min-width: $tablet) {}
@include mq(tablet) {}
@include mq(tablet, desktop) {}
@kaelig

48. @media (min-width: 37.5em) {}
@media (min-width: $tablet) {}
@include mq(tablet) {}
@include mq(tablet, desktop) {}
@include mq($to: tablet) {}
@kaelig

49. sass-mq
git.io/sass-mq
• Reusable @media query abstraction
• A breakpoint has a name, instead of
being called by its width
• Simplifies cross-browser support (IE8)
@kaelig

50. sass-mq: example
CSS
.nav {
background: #005689;
}
@media all and (min-width: 37.5em) {
.nav {
background: transparent;
}
}
Sass
.nav {
background: $c-brandBlue;
!
@include mq($from: tablet) {
background: transparent;
}
}

51. 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;
}
}

52. Naming breakpoints
$mq-breakpoints: (
mobile: 320px,
tablet: 740px,
desktop: 980px,
wide: 1300px
);
@kaelig

53. Naming breakpoints
mobile vs S
tablet vs M
desktop vs L
wide vs XL
@kaelig

54. Takeaways
@kaelig

55. Takeaways
• Technically complex things can be
made much simpler looking
@kaelig

56. Takeaways
• Technically complex things can be
made much simpler looking
• Taking time to code small tools can
actually be super productive
@kaelig

57. The grid
@kaelig

60. 4 to 16 60px columns
Gutter: 20px
Outer margins:
< 480px: 10px
>= 480px: 20px

61. A column, a gutter…
How much is that in pixels?
@kaelig

62. .element {
width: 220px;
}
@media (min-width: 56.25em) {
.element {
width: 540px;
}
}
3 columns by default,
then 7 columns on
desktops

63. https://github.com/guardian/guss-grid-system @kaelig

64. .element {
width: gs-span(3);
}
@include mq(desktop) {
.element {
width: gs-span(7);
}
}
3 columns by default,
then 7 columns on
desktops

65. Basing breakpoints on the grid
@kaelig

66. $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

67. Takeaways
@kaelig

68. Takeaways
• Machines can (must) do maths, so you
don’t have to
@kaelig

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

71. 20px/28px bolder
16px/20px normal
32px/36px normal
14px/18px normal
14px/18px normal
32px/36px normal
14px/18px normal
14px/18px normal
16px/20px normal
text sans 12px/16px
text sans 12px/16px
20px/24px normal

72. ?
?
?
@kaelig

75. CSS
Type scale example
Sass
.element {
.element font-size: {
16px;
@line-include height: fs-header(20px;
1);
}
font-family: "Guardian Egyptian Headline", Georgia, serif;
font-weight: 900;
}

76. CSS
Type scale example
Sass
.element {
@include fs-header(1);
}
.element {
font-size: 16px;
line-height: 20px;
font-family: "Guardian Egyptian Headline", Georgia, serif;
font-weight: 900;
}

77. 20px/28px bolder
16px/20px normal
32px/36px normal
14px/18px normal
14px/18px normal
32px/36px normal
14px/18px normal
14px/18px normal
16px/20px normal
text sans 12px/16px
text sans 12px/16px
20px/24px normal

78. Header 3
Headline 2
Headline 1
Headline 6
Headline 1
Headline 1
Headline 2
Headline 6
Text Sans 1
Text Sans 1
Headline 3
Headline 1

79. Isn’t this putting a cap on creativity?

80. Takeaways
@kaelig

81. Takeaways
• When no naming convention is in
place, you can get together and set a
new one
@kaelig

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

83. Prototype
Idea Test
@kaelig
Design
system
Design
system
Design
system

84. Design
system
@kaelig
Prototype
Idea Test

85. Bridge the gap between
developers and designers
@kaelig
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