Bridging the gap between designers and developers at the Guardian
•
5 j'aime•10,810 vues
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/
Recommandé
Contenu connexe
Tendances
Tendances (18)
En vedette
En vedette (20)
Similaire à Bridging the gap between designers and developers at the Guardian
Similaire à Bridging the gap between designers and developers at the Guardian (20)
Plus de Kaelig Deloumeau-Prigent
Plus de Kaelig Deloumeau-Prigent (11)
Dernier
Dernier (20)
Bridging the gap between designers and developers at the Guardian
- 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
- 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
- 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
- 32. The colour for the article’s headline is “light grey” @kaelig
- 35. @kaelig
- 37. $c-brandBlue: #005689; .nav { background: $c-brandBlue; } @kaelig
- 38. $c-brandBlue: #005689; .nav { background: $c-brandBlue; } @kaelig .nav { background: #005689; }
- 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
- 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
- 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
- 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
- 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?
- 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