![Page 1: Faire le pont entre designers et développeurs avec Sass au Guardian](https://reader034.vdocuments.net/reader034/viewer/2022051323/547ea0aab4af9fbe158b57f7/html5/thumbnails/1.jpg)
Faire le pont entre les développeurs et les
designers au Guardian
@kaelig
![Page 2: Faire le pont entre designers et développeurs avec Sass au Guardian](https://reader034.vdocuments.net/reader034/viewer/2022051323/547ea0aab4af9fbe158b57f7/html5/thumbnails/2.jpg)
À qui s’adresse cette conférence ?
@kaelig
![Page 3: Faire le pont entre designers et développeurs avec Sass au Guardian](https://reader034.vdocuments.net/reader034/viewer/2022051323/547ea0aab4af9fbe158b57f7/html5/thumbnails/3.jpg)
À qui s’adresse cette conférence ?
Ceux qui écrivent du code
@kaelig
![Page 4: Faire le pont entre designers et développeurs avec Sass au Guardian](https://reader034.vdocuments.net/reader034/viewer/2022051323/547ea0aab4af9fbe158b57f7/html5/thumbnails/4.jpg)
À qui s’adresse cette conférence ?
Ceux qui écrivent du codeCeux qui n’en écrivent pas
@kaelig
![Page 5: Faire le pont entre designers et développeurs avec Sass au Guardian](https://reader034.vdocuments.net/reader034/viewer/2022051323/547ea0aab4af9fbe158b57f7/html5/thumbnails/5.jpg)
À qui s’adresse cette conférence ?
Ceux qui écrivent du codeCeux qui n’en écrivent pas
Ceux qui savent ce qu’est un préprocesseur CSS
@kaelig
![Page 6: Faire le pont entre designers et développeurs avec Sass au Guardian](https://reader034.vdocuments.net/reader034/viewer/2022051323/547ea0aab4af9fbe158b57f7/html5/thumbnails/6.jpg)
À qui s’adresse cette conférence ?
Ceux qui écrivent du codeCeux qui n’en écrivent pas
Ceux qui savent ce qu’est un préprocesseur CSSCeux qui n’en ont jamais entendu parler
@kaelig
![Page 7: Faire le pont entre designers et développeurs avec Sass au Guardian](https://reader034.vdocuments.net/reader034/viewer/2022051323/547ea0aab4af9fbe158b57f7/html5/thumbnails/7.jpg)
Mars Climate Orbiter23 septembre 1999
@kaelig
![Page 8: Faire le pont entre designers et développeurs avec Sass au Guardian](https://reader034.vdocuments.net/reader034/viewer/2022051323/547ea0aab4af9fbe158b57f7/html5/thumbnails/8.jpg)
theguardian.comhttp://next.theguardian.com
@kaelig
![Page 11: Faire le pont entre designers et développeurs avec Sass au Guardian](https://reader034.vdocuments.net/reader034/viewer/2022051323/547ea0aab4af9fbe158b57f7/html5/thumbnails/11.jpg)
57 contributeurs
github.com/guardian/frontend
~25 ingénieurs touchent à HTML/CSS
@kaelig
![Page 12: Faire le pont entre designers et développeurs avec Sass au Guardian](https://reader034.vdocuments.net/reader034/viewer/2022051323/547ea0aab4af9fbe158b57f7/html5/thumbnails/12.jpg)
57 contributeurs
github.com/guardian/frontend
~25 ingénieurs touchent à HTML/CSS~16 000 lignes de CSS
@kaelig
![Page 13: Faire le pont entre designers et développeurs avec Sass au Guardian](https://reader034.vdocuments.net/reader034/viewer/2022051323/547ea0aab4af9fbe158b57f7/html5/thumbnails/13.jpg)
57 contributeurs
github.com/guardian/frontend
~25 ingénieurs touchent à HTML/CSS~16 000 lignes de CSS100 millions de visiteurs
uniques par mois
@kaelig
![Page 14: Faire le pont entre designers et développeurs avec Sass au Guardian](https://reader034.vdocuments.net/reader034/viewer/2022051323/547ea0aab4af9fbe158b57f7/html5/thumbnails/14.jpg)
57 contributeurs
github.com/guardian/frontend
~25 ingénieurs touchent à HTML/CSS~16 000 lignes de CSS100 millions de visiteurs
uniques par moiscycle de déploiement :
~4 fois par jour
@kaelig
![Page 15: Faire le pont entre designers et développeurs avec Sass au Guardian](https://reader034.vdocuments.net/reader034/viewer/2022051323/547ea0aab4af9fbe158b57f7/html5/thumbnails/15.jpg)
@kaelig
![Page 16: Faire le pont entre designers et développeurs avec Sass au Guardian](https://reader034.vdocuments.net/reader034/viewer/2022051323/547ea0aab4af9fbe158b57f7/html5/thumbnails/16.jpg)
Idée
@kaelig
![Page 17: Faire le pont entre designers et développeurs avec Sass au Guardian](https://reader034.vdocuments.net/reader034/viewer/2022051323/547ea0aab4af9fbe158b57f7/html5/thumbnails/17.jpg)
Idée
@kaelig
![Page 18: Faire le pont entre designers et développeurs avec Sass au Guardian](https://reader034.vdocuments.net/reader034/viewer/2022051323/547ea0aab4af9fbe158b57f7/html5/thumbnails/18.jpg)
Prototype
Idée
@kaelig
![Page 19: Faire le pont entre designers et développeurs avec Sass au Guardian](https://reader034.vdocuments.net/reader034/viewer/2022051323/547ea0aab4af9fbe158b57f7/html5/thumbnails/19.jpg)
Prototype
Idée
@kaelig
![Page 20: Faire le pont entre designers et développeurs avec Sass au Guardian](https://reader034.vdocuments.net/reader034/viewer/2022051323/547ea0aab4af9fbe158b57f7/html5/thumbnails/20.jpg)
Prototype
Idée
Test
@kaelig
![Page 21: Faire le pont entre designers et développeurs avec Sass au Guardian](https://reader034.vdocuments.net/reader034/viewer/2022051323/547ea0aab4af9fbe158b57f7/html5/thumbnails/21.jpg)
Prototype
Idée Test
@kaelig
![Page 22: Faire le pont entre designers et développeurs avec Sass au Guardian](https://reader034.vdocuments.net/reader034/viewer/2022051323/547ea0aab4af9fbe158b57f7/html5/thumbnails/22.jpg)
Mesure en temps réel@kaelig
![Page 23: Faire le pont entre designers et développeurs avec Sass au Guardian](https://reader034.vdocuments.net/reader034/viewer/2022051323/547ea0aab4af9fbe158b57f7/html5/thumbnails/23.jpg)
A/B tests@kaelig
![Page 24: Faire le pont entre designers et développeurs avec Sass au Guardian](https://reader034.vdocuments.net/reader034/viewer/2022051323/547ea0aab4af9fbe158b57f7/html5/thumbnails/24.jpg)
Outils de développement
Scala
Play!
GruntSass
RequireJS
Bower
AWS
Node.jsSelenium
WebdriverRuby
TeamCity
GitHub
PhantomJS
@kaelig
![Page 25: Faire le pont entre designers et développeurs avec Sass au Guardian](https://reader034.vdocuments.net/reader034/viewer/2022051323/547ea0aab4af9fbe158b57f7/html5/thumbnails/25.jpg)
Outils de développement
Scala
Play!
Grunt SassRequireJS
Bower
AWS
Node.jsSelenium
WebdriverRuby
TeamCity
GitHub
PhantomJS
@kaelig
![Page 27: Faire le pont entre designers et développeurs avec Sass au Guardian](https://reader034.vdocuments.net/reader034/viewer/2022051323/547ea0aab4af9fbe158b57f7/html5/thumbnails/27.jpg)
La couleur du titre de l’article est “gris clair”.
@kaelig
![Page 28: Faire le pont entre designers et développeurs avec Sass au Guardian](https://reader034.vdocuments.net/reader034/viewer/2022051323/547ea0aab4af9fbe158b57f7/html5/thumbnails/28.jpg)
@kaelig
![Page 29: Faire le pont entre designers et développeurs avec Sass au Guardian](https://reader034.vdocuments.net/reader034/viewer/2022051323/547ea0aab4af9fbe158b57f7/html5/thumbnails/29.jpg)
$beccaPurple: #663399;@kaelig
![Page 31: Faire le pont entre designers et développeurs avec Sass au Guardian](https://reader034.vdocuments.net/reader034/viewer/2022051323/547ea0aab4af9fbe158b57f7/html5/thumbnails/31.jpg)
Ce que tu as appris
@kaelig
![Page 32: Faire le pont entre designers et développeurs avec Sass au Guardian](https://reader034.vdocuments.net/reader034/viewer/2022051323/547ea0aab4af9fbe158b57f7/html5/thumbnails/32.jpg)
Ce que tu as appris
• Le code est un outil de communication (ici : via les variables)
@kaelig
![Page 33: Faire le pont entre designers et développeurs avec Sass au Guardian](https://reader034.vdocuments.net/reader034/viewer/2022051323/547ea0aab4af9fbe158b57f7/html5/thumbnails/33.jpg)
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
![Page 34: Faire le pont entre designers et développeurs avec Sass au Guardian](https://reader034.vdocuments.net/reader034/viewer/2022051323/547ea0aab4af9fbe158b57f7/html5/thumbnails/34.jpg)
Les breakpoints
@kaelig
![Page 35: Faire le pont entre designers et développeurs avec Sass au Guardian](https://reader034.vdocuments.net/reader034/viewer/2022051323/547ea0aab4af9fbe158b57f7/html5/thumbnails/35.jpg)
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
![Page 36: Faire le pont entre designers et développeurs avec Sass au Guardian](https://reader034.vdocuments.net/reader034/viewer/2022051323/547ea0aab4af9fbe158b57f7/html5/thumbnails/36.jpg)
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;!! }!}
![Page 37: Faire le pont entre designers et développeurs avec Sass au Guardian](https://reader034.vdocuments.net/reader034/viewer/2022051323/547ea0aab4af9fbe158b57f7/html5/thumbnails/37.jpg)
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;!! }!}
![Page 38: Faire le pont entre designers et développeurs avec Sass au Guardian](https://reader034.vdocuments.net/reader034/viewer/2022051323/547ea0aab4af9fbe158b57f7/html5/thumbnails/38.jpg)
Nommer ses breakpoints
$mq-breakpoints: (! mobile: 320px,! tablet: 740px,! desktop: 980px,! wide: 1300px!);!
@kaelig
![Page 39: Faire le pont entre designers et développeurs avec Sass au Guardian](https://reader034.vdocuments.net/reader034/viewer/2022051323/547ea0aab4af9fbe158b57f7/html5/thumbnails/39.jpg)
Nommer ses breakpoints
mobile vs S tablet vs M
desktop vs L wide vs XL
@kaelig
![Page 40: Faire le pont entre designers et développeurs avec Sass au Guardian](https://reader034.vdocuments.net/reader034/viewer/2022051323/547ea0aab4af9fbe158b57f7/html5/thumbnails/40.jpg)
Ce que tu as appris
@kaelig
![Page 41: Faire le pont entre designers et développeurs avec Sass au Guardian](https://reader034.vdocuments.net/reader034/viewer/2022051323/547ea0aab4af9fbe158b57f7/html5/thumbnails/41.jpg)
Ce que tu as appris
• Les choses complexes techniquement peuvent être rendues simples dans le code
@kaelig
![Page 42: Faire le pont entre designers et développeurs avec Sass au Guardian](https://reader034.vdocuments.net/reader034/viewer/2022051323/547ea0aab4af9fbe158b57f7/html5/thumbnails/42.jpg)
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
![Page 43: Faire le pont entre designers et développeurs avec Sass au Guardian](https://reader034.vdocuments.net/reader034/viewer/2022051323/547ea0aab4af9fbe158b57f7/html5/thumbnails/43.jpg)
La grille
@kaelig
![Page 44: Faire le pont entre designers et développeurs avec Sass au Guardian](https://reader034.vdocuments.net/reader034/viewer/2022051323/547ea0aab4af9fbe158b57f7/html5/thumbnails/44.jpg)
![Page 45: Faire le pont entre designers et développeurs avec Sass au Guardian](https://reader034.vdocuments.net/reader034/viewer/2022051323/547ea0aab4af9fbe158b57f7/html5/thumbnails/45.jpg)
![Page 46: Faire le pont entre designers et développeurs avec Sass au Guardian](https://reader034.vdocuments.net/reader034/viewer/2022051323/547ea0aab4af9fbe158b57f7/html5/thumbnails/46.jpg)
4 à 16 colonnes de 60px
Gouttière : 20px
Marges externes :
< 480px: 10px
> 480px: 20px
![Page 47: Faire le pont entre designers et développeurs avec Sass au Guardian](https://reader034.vdocuments.net/reader034/viewer/2022051323/547ea0aab4af9fbe158b57f7/html5/thumbnails/47.jpg)
Une colonne, une gouttière… Ça fait combien en pixels ?
@kaelig
![Page 49: Faire le pont entre designers et développeurs avec Sass au Guardian](https://reader034.vdocuments.net/reader034/viewer/2022051323/547ea0aab4af9fbe158b57f7/html5/thumbnails/49.jpg)
Baser ses breakpoints sur la grille
@kaelig
![Page 50: Faire le pont entre designers et développeurs avec Sass au Guardian](https://reader034.vdocuments.net/reader034/viewer/2022051323/547ea0aab4af9fbe158b57f7/html5/thumbnails/50.jpg)
// 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
![Page 51: Faire le pont entre designers et développeurs avec Sass au Guardian](https://reader034.vdocuments.net/reader034/viewer/2022051323/547ea0aab4af9fbe158b57f7/html5/thumbnails/51.jpg)
Ce que tu as appris
@kaelig
![Page 52: Faire le pont entre designers et développeurs avec Sass au Guardian](https://reader034.vdocuments.net/reader034/viewer/2022051323/547ea0aab4af9fbe158b57f7/html5/thumbnails/52.jpg)
Ce que tu as appris
• Le code peut (doit) faire des maths à ta place
@kaelig
![Page 53: Faire le pont entre designers et développeurs avec Sass au Guardian](https://reader034.vdocuments.net/reader034/viewer/2022051323/547ea0aab4af9fbe158b57f7/html5/thumbnails/53.jpg)
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
![Page 54: Faire le pont entre designers et développeurs avec Sass au Guardian](https://reader034.vdocuments.net/reader034/viewer/2022051323/547ea0aab4af9fbe158b57f7/html5/thumbnails/54.jpg)
![Page 55: Faire le pont entre designers et développeurs avec Sass au Guardian](https://reader034.vdocuments.net/reader034/viewer/2022051323/547ea0aab4af9fbe158b57f7/html5/thumbnails/55.jpg)
14px/18px normal14px/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
![Page 56: Faire le pont entre designers et développeurs avec Sass au Guardian](https://reader034.vdocuments.net/reader034/viewer/2022051323/547ea0aab4af9fbe158b57f7/html5/thumbnails/56.jpg)
? ? ?
@kaelig
![Page 57: Faire le pont entre designers et développeurs avec Sass au Guardian](https://reader034.vdocuments.net/reader034/viewer/2022051323/547ea0aab4af9fbe158b57f7/html5/thumbnails/57.jpg)
![Page 58: Faire le pont entre designers et développeurs avec Sass au Guardian](https://reader034.vdocuments.net/reader034/viewer/2022051323/547ea0aab4af9fbe158b57f7/html5/thumbnails/58.jpg)
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);!}
![Page 59: Faire le pont entre designers et développeurs avec Sass au Guardian](https://reader034.vdocuments.net/reader034/viewer/2022051323/547ea0aab4af9fbe158b57f7/html5/thumbnails/59.jpg)
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);!}
![Page 60: Faire le pont entre designers et développeurs avec Sass au Guardian](https://reader034.vdocuments.net/reader034/viewer/2022051323/547ea0aab4af9fbe158b57f7/html5/thumbnails/60.jpg)
14px/18px normal14px/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
![Page 61: Faire le pont entre designers et développeurs avec Sass au Guardian](https://reader034.vdocuments.net/reader034/viewer/2022051323/547ea0aab4af9fbe158b57f7/html5/thumbnails/61.jpg)
Headline 4
Headline 4
Headline 1Headline 1
Headline 2 Headline 2
Headline 1 Headline 1Data 1 Data 1
Data 1
Data 1
Headline 1
Headline 1
Page Header 3
Headline 1
Headline 2
![Page 62: Faire le pont entre designers et développeurs avec Sass au Guardian](https://reader034.vdocuments.net/reader034/viewer/2022051323/547ea0aab4af9fbe158b57f7/html5/thumbnails/62.jpg)
Ce que tu as appris
@kaelig
![Page 63: Faire le pont entre designers et développeurs avec Sass au Guardian](https://reader034.vdocuments.net/reader034/viewer/2022051323/547ea0aab4af9fbe158b57f7/html5/thumbnails/63.jpg)
Ce que tu as appris
• Lorsqu’aucune convention de nommage est en place, on peut en inventer une tous ensemble
@kaelig
![Page 64: Faire le pont entre designers et développeurs avec Sass au Guardian](https://reader034.vdocuments.net/reader034/viewer/2022051323/547ea0aab4af9fbe158b57f7/html5/thumbnails/64.jpg)
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
![Page 65: Faire le pont entre designers et développeurs avec Sass au Guardian](https://reader034.vdocuments.net/reader034/viewer/2022051323/547ea0aab4af9fbe158b57f7/html5/thumbnails/65.jpg)
3 colonnes par défaut et 7 colonnes sur écrans d’ordinateurs
.element { width: 220px; } @media (min-width: 56.25em) { .element { width: 540px; } }
![Page 66: Faire le pont entre designers et développeurs avec Sass au Guardian](https://reader034.vdocuments.net/reader034/viewer/2022051323/547ea0aab4af9fbe158b57f7/html5/thumbnails/66.jpg)
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); } }
![Page 67: Faire le pont entre designers et développeurs avec Sass au Guardian](https://reader034.vdocuments.net/reader034/viewer/2022051323/547ea0aab4af9fbe158b57f7/html5/thumbnails/67.jpg)
Prototype
Idée Test
@kaelig
![Page 68: Faire le pont entre designers et développeurs avec Sass au Guardian](https://reader034.vdocuments.net/reader034/viewer/2022051323/547ea0aab4af9fbe158b57f7/html5/thumbnails/68.jpg)
Prototype
Idée Test
Systèmede design
@kaelig
![Page 69: Faire le pont entre designers et développeurs avec Sass au Guardian](https://reader034.vdocuments.net/reader034/viewer/2022051323/547ea0aab4af9fbe158b57f7/html5/thumbnails/69.jpg)
@kaelig
![Page 70: Faire le pont entre designers et développeurs avec Sass au Guardian](https://reader034.vdocuments.net/reader034/viewer/2022051323/547ea0aab4af9fbe158b57f7/html5/thumbnails/70.jpg)
Bénéfices :
@kaelig
![Page 71: Faire le pont entre designers et développeurs avec Sass au Guardian](https://reader034.vdocuments.net/reader034/viewer/2022051323/547ea0aab4af9fbe158b57f7/html5/thumbnails/71.jpg)
Bénéfices :
Code + communicatif
@kaelig
![Page 72: Faire le pont entre designers et développeurs avec Sass au Guardian](https://reader034.vdocuments.net/reader034/viewer/2022051323/547ea0aab4af9fbe158b57f7/html5/thumbnails/72.jpg)
Bénéfices :
Code + communicatif
Abstraire le code compliqué
@kaelig
![Page 73: Faire le pont entre designers et développeurs avec Sass au Guardian](https://reader034.vdocuments.net/reader034/viewer/2022051323/547ea0aab4af9fbe158b57f7/html5/thumbnails/73.jpg)
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