Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Faire le pont entre les
développeurs et les
designers au Guardian
@kaelig
À qui s’adresse cette
conférence ?
@kaelig
À qui s’adresse cette
conférence ?
Ceux qui écrivent du code
@kaelig
À qui s’adresse cette
conférence ?
Ceux qui écrivent du code
Ceux qui n’en écrivent pas
@kaelig
À qui s’adresse cette
conférence ?
Ceux qui écrivent du code
Ceux qui n’en écrivent pas
Ceux qui savent ce qu’est un prépr...
À qui s’adresse cette
conférence ?
Ceux qui écrivent du code
Ceux qui n’en écrivent pas
Ceux qui savent ce qu’est un prépr...
Mars Climate Orbiter
23 septembre 1999
@kaelig
theguardian.com
http://next.theguardian.com
@kaelig
github.com/guardian/frontend
@kaelig
57 contributeurs
github.com/guardian/frontend
@kaelig
57 contributeurs
github.com/guardian/frontend
~25 ingénieurs touchent à
HTML/CSS
@kaelig
57 contributeurs
github.com/guardian/frontend
~25 ingénieurs touchent à
HTML/CSS
~16 000 lignes de CSS
@kaelig
57 contributeurs
github.com/guardian/frontend
~25 ingénieurs touchent à
HTML/CSS
~16 000 lignes de CSS
100 millions de vis...
57 contributeurs
github.com/guardian/frontend
~25 ingénieurs touchent à
HTML/CSS
~16 000 lignes de CSS
100 millions de vis...
@kaelig
Idée
@kaelig
Idée
@kaelig
Prototype
Idée
@kaelig
Prototype
Idée
@kaelig
Prototype
Idée
Test
@kaelig
Prototype
Idée Test
@kaelig
Mesure en temps réel
@kaelig
A/B tests
@kaelig
Outils de
développement
Scala
Play!
Grunt
Sass
RequireJS
Bower
AWS
Node.js
Selenium
Webdriver
Ruby
TeamCity
GitHub
Phantom...
Outils de
développement
Scala
Play!
Grunt Sass
RequireJS
Bower
AWS
Node.js
Selenium
Webdriver
Ruby
TeamCity
GitHub
Phantom...
sass-lang.com
@kaelig
La couleur du titre de l’article est “gris clair”.
@kaelig
@kaelig
$beccaPurple: #663399;
@kaelig
http://guardian.github.io/guss-colours/ @kaelig
Ce que tu as appris
@kaelig
Ce que tu as appris
• Le code est un outil de
communication (ici : via les variables)
@kaelig
Ce que tu as appris
• Le code est un outil de
communication (ici : via les variables)
• Un pré-processeur aide à éviter le...
Les breakpoints
@kaelig
sass-mq
• Abstraction des @media queries
réutilisable
• Un breakpoint est appelé par son nom
au lieu d’une mesure
github.i...
CSS
.header {!
! background: blue;!
}!
@media all and (min-width: 37.5em) {!
! .header {!
! ! background: transparent;!
! ...
sass-mq : exemple
Sass
CSS
.header {!
! background: blue;!
!
! @include mq($from: tablet) {!
! ! background: transparent;!...
Nommer ses breakpoints
$mq-breakpoints: (!
mobile: 320px,!
tablet: 740px,!
desktop: 980px,!
wide: 1300px!
);!
@kaelig
Nommer ses breakpoints
mobile vs S
tablet vs M
desktop vs L
wide vs XL
@kaelig
Ce que tu as appris
@kaelig
Ce que tu as appris
• Les choses complexes techniquement
peuvent être rendues simples dans le
code
@kaelig
Ce que tu as appris
• Les choses complexes techniquement
peuvent être rendues simples dans le
code
• Coder des petits outi...
La grille
@kaelig
4 à 16 colonnes de 60px
Gouttière : 20px
Marges externes :
< 480px: 10px
> 480px: 20px
Une colonne, une gouttière…
Ça fait combien en pixels ?
@kaelig
https://github.com/guardian/guss-grid-system @kaelig
Baser ses breakpoints sur la grille
@kaelig
// Article breakpoints!
$a-rightCol-width: gs-span(4);!
$a-rightCol-trigger: gs-span(11) + $gs-gutter*2; // 900px!
$a-left...
Ce que tu as appris
@kaelig
Ce que tu as appris
• Le code peut (doit) faire des maths à
ta place
@kaelig
Ce que tu as appris
• Le code peut (doit) faire des maths à
ta place
• Tu peux mixer différents composants
du système de de...
14px/18px normal
14px/18px normal
14px/18px normal
14px/18px normal
14px/18px normal
14px/18px normal 14px/18px normal
20p...
?
?
?
@kaelig
CSS
.element {!
font-size: 16px;!
font-size: 1.6rem;!
line-height: 20px;!
line-height: 2rem;!
font-family: "EgyptianHeadli...
CSS
.element {!
font-size: 16px;!
font-size: 1.6rem;!
line-height: 20px;!
line-height: 2rem;!
font-family: "EgyptianHeadli...
14px/18px normal
14px/18px normal
14px/18px normal
14px/18px normal
14px/18px normal
14px/18px normal 14px/18px normal
20p...
Headline 4
Headline 4
Headline 1
Headline 1
Headline 2 Headline 2
Headline 1 Headline 1
Data 1 Data 1
Data 1
Data 1
Headli...
Ce que tu as appris
@kaelig
Ce que tu as appris
• Lorsqu’aucune convention de
nommage est en place, on peut en
inventer une tous ensemble
@kaelig
Ce que tu as appris
• Lorsqu’aucune convention de
nommage est en place, on peut en
inventer une tous ensemble
• Mettre en ...
3 colonnes par défaut
et 7 colonnes sur
écrans d’ordinateurs
.element {
width: 220px;
}
@media (min-width: 56.25em) {
.ele...
3 colonnes par défaut
et 7 colonnes sur
écrans d’ordinateurs
.element {
width: 220px;
}
@media (min-width: 56.25em) {
.ele...
Prototype
Idée Test
@kaelig
Prototype
Idée Test
Système

de design
@kaelig
@kaelig
Bénéfices :
@kaelig
Bénéfices :
Code + communicatif
@kaelig
Bénéfices :
Code + communicatif
Abstraire le code compliqué
@kaelig
Faites le pont entre les
designers et les
développeurs
Crédits:
Mars Climate Orbiter 2 — By NASA/JPL/Corby Waste [Public d...
Faire le pont entre designers et développeurs avec Sass au Guardian
Faire le pont entre designers et développeurs avec Sass au Guardian
Faire le pont entre designers et développeurs avec Sass au Guardian
Faire le pont entre designers et développeurs avec Sass au Guardian
Upcoming SlideShare
Loading in …5
×

Faire le pont entre designers et développeurs avec Sass au Guardian

5,395 views

Published on

**31 Octobre 2014** : Présentation mise à jour pour la conférence Blend Web Mix disponibles sur http://www.slideshare.net/kaelig/faire-le-pont-entre-designers-et-developpeurs-au-guardian

Les pré-processeurs CSS sont d’excellents outils pour les développeurs. Au Guardian nous sommes allés plus loin, procurant un réel bénéfice au niveau de la communication en utilisant les variables et mixins Sass comme socle pour un vocabulaire et des concepts communs partagés entre développeurs et designers.

Présentation donnée en tant qu'invité d'honneur à la KiwiParty (http://kiwiparty.fr/) le vendredi 13 juin 2014.

Published in: Technology
  • Be the first to comment

Faire le pont entre designers et développeurs avec Sass au Guardian

  1. 1. Faire le pont entre les développeurs et les designers au Guardian @kaelig
  2. 2. À qui s’adresse cette conférence ? @kaelig
  3. 3. À qui s’adresse cette conférence ? Ceux qui écrivent du code @kaelig
  4. 4. À qui s’adresse cette conférence ? Ceux qui écrivent du code Ceux qui n’en écrivent pas @kaelig
  5. 5. À qui s’adresse cette conférence ? Ceux qui écrivent du code Ceux qui n’en écrivent pas Ceux qui savent ce qu’est un préprocesseur CSS @kaelig
  6. 6. À qui s’adresse cette conférence ? Ceux qui écrivent du code Ceux qui n’en écrivent pas Ceux qui savent ce qu’est un préprocesseur CSS Ceux qui n’en ont jamais entendu parler @kaelig
  7. 7. Mars Climate Orbiter 23 septembre 1999 @kaelig
  8. 8. theguardian.com http://next.theguardian.com @kaelig
  9. 9. github.com/guardian/frontend @kaelig
  10. 10. 57 contributeurs github.com/guardian/frontend @kaelig
  11. 11. 57 contributeurs github.com/guardian/frontend ~25 ingénieurs touchent à HTML/CSS @kaelig
  12. 12. 57 contributeurs github.com/guardian/frontend ~25 ingénieurs touchent à HTML/CSS ~16 000 lignes de CSS @kaelig
  13. 13. 57 contributeurs github.com/guardian/frontend ~25 ingénieurs touchent à HTML/CSS ~16 000 lignes de CSS 100 millions de visiteurs uniques par mois @kaelig
  14. 14. 57 contributeurs github.com/guardian/frontend ~25 ingénieurs touchent à HTML/CSS ~16 000 lignes de CSS 100 millions de visiteurs uniques par mois cycle de déploiement : ~4 fois par jour @kaelig
  15. 15. @kaelig
  16. 16. Idée @kaelig
  17. 17. Idée @kaelig
  18. 18. Prototype Idée @kaelig
  19. 19. Prototype Idée @kaelig
  20. 20. Prototype Idée Test @kaelig
  21. 21. Prototype Idée Test @kaelig
  22. 22. Mesure en temps réel @kaelig
  23. 23. A/B tests @kaelig
  24. 24. Outils de développement Scala Play! Grunt Sass RequireJS Bower AWS Node.js Selenium Webdriver Ruby TeamCity GitHub PhantomJS @kaelig
  25. 25. Outils de développement Scala Play! Grunt Sass RequireJS Bower AWS Node.js Selenium Webdriver Ruby TeamCity GitHub PhantomJS @kaelig
  26. 26. sass-lang.com @kaelig
  27. 27. La couleur du titre de l’article est “gris clair”. @kaelig
  28. 28. @kaelig
  29. 29. $beccaPurple: #663399; @kaelig
  30. 30. http://guardian.github.io/guss-colours/ @kaelig
  31. 31. Ce que tu as appris @kaelig
  32. 32. Ce que tu as appris • Le code est un outil de communication (ici : via les variables) @kaelig
  33. 33. Ce que tu as appris • Le code est un outil de communication (ici : via les variables) • Un pré-processeur aide à éviter les copier-coller @kaelig
  34. 34. Les breakpoints @kaelig
  35. 35. sass-mq • Abstraction des @media queries réutilisable • Un breakpoint est appelé par son nom au lieu d’une mesure github.io/sass-mq @kaelig
  36. 36. CSS .header {! ! background: blue;! }! @media all and (min-width: 37.5em) {! ! .header {! ! ! background: transparent;! ! }! } sass-mq : exemple Sass .header {! ! background: blue;! ! ! @include mq($from: tablet) {! ! ! background: transparent;! ! }! }
  37. 37. sass-mq : exemple Sass CSS .header {! ! background: blue;! ! ! @include mq($from: tablet) {! ! ! background: transparent;! ! }! } .header {! ! background: blue;! }! @media all and (min-width: 37.5em) {! ! .header {! ! ! background: transparent;! ! }! }
  38. 38. Nommer ses breakpoints $mq-breakpoints: (! mobile: 320px,! tablet: 740px,! desktop: 980px,! wide: 1300px! );! @kaelig
  39. 39. Nommer ses breakpoints mobile vs S tablet vs M desktop vs L wide vs XL @kaelig
  40. 40. Ce que tu as appris @kaelig
  41. 41. Ce que tu as appris • Les choses complexes techniquement peuvent être rendues simples dans le code @kaelig
  42. 42. Ce que tu as appris • Les choses complexes techniquement peuvent être rendues simples dans le code • Coder des petits outils fait gagner en temps de conception, de maintenabilité, et en clarté @kaelig
  43. 43. La grille @kaelig
  44. 44. 4 à 16 colonnes de 60px Gouttière : 20px Marges externes : < 480px: 10px > 480px: 20px
  45. 45. Une colonne, une gouttière… Ça fait combien en pixels ? @kaelig
  46. 46. https://github.com/guardian/guss-grid-system @kaelig
  47. 47. Baser ses breakpoints sur la grille @kaelig
  48. 48. // Article breakpoints! $a-rightCol-width: gs-span(4);! $a-rightCol-trigger: gs-span(11) + $gs-gutter*2; // 900px! $a-leftCol-width: gs-span(2); // Grows to 3 columns on wide viewports! $a-leftCol-trigger: gs-span(13) + $gs-gutter*2; // 1060px! $a-leftColWide-width: gs-span(3);! ! // Facia breakpoints! $facia-leftCol-trigger: gs-span(14) + $gs-gutter*2; // 1140px! ! $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! desktopAd: 810px,! ! // Article layout! rightCol: $a-rightCol-trigger,! leftCol: $a-leftCol-trigger,! ! // Facia layout! faciaLeftCol: $facia-leftCol-trigger! );! @kaelig
  49. 49. Ce que tu as appris @kaelig
  50. 50. Ce que tu as appris • Le code peut (doit) faire des maths à ta place @kaelig
  51. 51. Ce que tu as appris • Le code peut (doit) faire des maths à ta place • Tu peux mixer différents composants du système de design (ici la grille et les breakpoints) @kaelig
  52. 52. 14px/18px normal 14px/18px normal 14px/18px normal 14px/18px normal 14px/18px normal 14px/18px normal 14px/18px normal 20px/24px normal20px/24px normal 32px/36px normal 32px/36px normal text sans 12px/16px text sans 12px/16px text sans 12px/16pxtext sans 12px/16px 20px/24px normal 20px/28px bolder
  53. 53. ? ? ? @kaelig
  54. 54. CSS .element {! font-size: 16px;! font-size: 1.6rem;! line-height: 20px;! line-height: 2rem;! font-family: "EgyptianHeadline", georgia, serif;! font-weight: 900;! } échelle typographique : exemple Sass .element {! @include fs-header(1);! }
  55. 55. CSS .element {! font-size: 16px;! font-size: 1.6rem;! line-height: 20px;! line-height: 2rem;! font-family: "EgyptianHeadline", georgia, serif;! font-weight: 900;! } échelle typographique : exemple Sass .element {! @include fs-header(1);! }
  56. 56. 14px/18px normal 14px/18px normal 14px/18px normal 14px/18px normal 14px/18px normal 14px/18px normal 14px/18px normal 20px/24px normal20px/24px normal 32px/36px normal 32px/36px normal text sans 12px/16px text sans 12px/16px text sans 12px/16pxtext sans 12px/16px 20px/24px normal 20px/28px bolder
  57. 57. Headline 4 Headline 4 Headline 1 Headline 1 Headline 2 Headline 2 Headline 1 Headline 1 Data 1 Data 1 Data 1 Data 1 Headline 1 Headline 1 Page Header 3 Headline 1 Headline 2
  58. 58. Ce que tu as appris @kaelig
  59. 59. Ce que tu as appris • Lorsqu’aucune convention de nommage est en place, on peut en inventer une tous ensemble @kaelig
  60. 60. Ce que tu as appris • Lorsqu’aucune convention de nommage est en place, on peut en inventer une tous ensemble • Mettre en place des valeurs par défaut dans le code peut améliorer la cohérence du design @kaelig
  61. 61. 3 colonnes par défaut et 7 colonnes sur écrans d’ordinateurs .element { width: 220px; } @media (min-width: 56.25em) { .element { width: 540px; } }
  62. 62. 3 colonnes par défaut et 7 colonnes sur écrans d’ordinateurs .element { width: 220px; } @media (min-width: 56.25em) { .element { width: 540px; } } .element { width: gs-span(3); ! @include mq(desktop) { width: gs-span(7); } }
  63. 63. Prototype Idée Test @kaelig
  64. 64. Prototype Idée Test Système
 de design @kaelig
  65. 65. @kaelig
  66. 66. Bénéfices : @kaelig
  67. 67. Bénéfices : Code + communicatif @kaelig
  68. 68. Bénéfices : Code + communicatif Abstraire le code compliqué @kaelig
  69. 69. Faites le pont entre les designers et les développeurs Crédits: 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

×