Faire le pont entre designers et développeurs avec Sass au Guardian
73
Faire le pont entre les développeurs et les designers au Guardian @kaelig
-
Upload
kaelig-deloumeau-prigent -
Category
Technology
-
view
2.491 -
download
0
description
**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.
Transcript of Faire le pont entre designers et développeurs avec Sass au Guardian
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 codeCeux qui n’en écrivent pas
@kaelig
À 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
À 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
Mars Climate Orbiter23 septembre 1999
@kaelig
theguardian.comhttp://next.theguardian.com
@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 CSS100 millions de visiteurs
uniques par mois
@kaelig
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
@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!
GruntSass
RequireJS
Bower
AWS
Node.jsSelenium
WebdriverRuby
TeamCity
GitHub
PhantomJS
@kaelig
Outils de développement
Scala
Play!
Grunt SassRequireJS
Bower
AWS
Node.jsSelenium
WebdriverRuby
TeamCity
GitHub
PhantomJS
@kaelig
La couleur du titre de l’article est “gris clair”.
@kaelig
@kaelig
$beccaPurple: #663399;@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 les copier-coller
@kaelig
Les breakpoints
@kaelig
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
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;!! }!}
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;!! }!}
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 outils fait gagner en temps de conception, de maintenabilité, et en clarté
@kaelig
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
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-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
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 design (ici la grille et les breakpoints)
@kaelig
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
? ? ?
@kaelig
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);!}
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);!}
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
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
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 place des valeurs par défaut dans le code peut améliorer la cohérence du design
@kaelig
3 colonnes par défaut et 7 colonnes sur écrans d’ordinateurs
.element { width: 220px; } @media (min-width: 56.25em) { .element { width: 540px; } }
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); } }
Prototype
Idée Test
@kaelig
Prototype
Idée Test
Systèmede 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 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
