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

Transcript
Page 1: 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

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

À qui s’adresse cette conférence ?

@kaelig

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

À 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

À 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

À 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

À 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

Mars Climate Orbiter23 septembre 1999

@kaelig

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

theguardian.comhttp://next.theguardian.com

@kaelig

http://theguardian.com
http://next.theguardian.com
Page 9: Faire le pont entre designers et développeurs avec Sass au Guardian

github.com/guardian/frontend

@kaelig

http://github.com/guardian/frontend
Page 10: Faire le pont entre designers et développeurs avec Sass au Guardian

57 contributeurs

github.com/guardian/frontend

@kaelig

http://github.com/guardian/frontend
Page 11: Faire le pont entre designers et développeurs avec Sass au Guardian

57 contributeurs

github.com/guardian/frontend

~25 ingénieurs touchent à HTML/CSS

@kaelig

http://github.com/guardian/frontend
Page 12: Faire le pont entre designers et développeurs avec Sass au Guardian

57 contributeurs

github.com/guardian/frontend

~25 ingénieurs touchent à HTML/CSS~16 000 lignes de CSS

@kaelig

http://github.com/guardian/frontend
Page 13: Faire le pont entre designers et développeurs avec Sass au Guardian

57 contributeurs

github.com/guardian/frontend

~25 ingénieurs touchent à HTML/CSS~16 000 lignes de CSS100 millions de visiteurs

uniques par mois

@kaelig

http://github.com/guardian/frontend
Page 14: Faire le pont entre designers et développeurs avec Sass au Guardian

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

http://github.com/guardian/frontend
Page 15: Faire le pont entre designers et développeurs avec Sass au Guardian

@kaelig

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

Idée

@kaelig

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

Idée

@kaelig

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

Prototype

Idée

@kaelig

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

Prototype

Idée

@kaelig

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

Prototype

Idée

Test

@kaelig

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

Prototype

Idée Test

@kaelig

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

Mesure en temps réel@kaelig

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

A/B tests@kaelig

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

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

Outils de développement

Scala

Play!

Grunt SassRequireJS

Bower

AWS

Node.jsSelenium

WebdriverRuby

TeamCity

GitHub

PhantomJS

@kaelig

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

sass-lang.com

@kaelig

http://sass-lang.com
Page 27: Faire le pont entre designers et développeurs avec Sass au Guardian

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

@kaelig

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

$beccaPurple: #663399;@kaelig

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

http://guardian.github.io/guss-colours/ @kaelig

http://guardian.github.io/guss-colours/
Page 31: Faire le pont entre designers et développeurs avec Sass au Guardian

Ce que tu as appris

@kaelig

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

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

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

Les breakpoints

@kaelig

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

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

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

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

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

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

Ce que tu as appris

@kaelig

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

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

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

La grille

@kaelig

Page 44: Faire le pont entre designers et développeurs avec Sass au Guardian
Page 45: Faire le pont entre designers et développeurs avec Sass au Guardian
Page 46: Faire le pont entre designers et développeurs avec Sass au Guardian

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

Une colonne, une gouttière… Ça fait combien en pixels ?

@kaelig

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

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

https://github.com/guardian/guss-grid-system
Page 49: Faire le pont entre designers et développeurs avec Sass au Guardian

Baser ses breakpoints sur la grille

@kaelig

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

// 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

Ce que tu as appris

@kaelig

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

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

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
Page 55: Faire le pont entre designers et développeurs avec Sass au Guardian

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

? ? ?

@kaelig

Page 57: Faire le pont entre designers et développeurs avec Sass au Guardian
Page 58: Faire le pont entre designers et développeurs avec Sass au Guardian

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

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

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

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

Ce que tu as appris

@kaelig

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

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

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

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

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

Prototype

Idée Test

@kaelig

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

Prototype

Idée Test

Systèmede design

@kaelig

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

@kaelig

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

Bénéfices :

@kaelig

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

Bénéfices :

Code + communicatif

@kaelig

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

Bénéfices :

Code + communicatif

Abstraire le code compliqué

@kaelig

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

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

https://flic.kr/p/cXMuEd
https://flic.kr/p/9WgM9D
https://flic.kr/p/4xLDb1
https://flic.kr/p/5VK8kv

Top Related

2es rencontres nationales de designers AFD

2es rencontres nationales de designers AFD

Guardian Bindery

Guardian Bindery

Rapport d'activité de *designers interactifs*

Rapport d'activité de *designers interactifs*

Designers Store

Designers Store

Responsible Designers listing mannequin

Responsible Designers listing mannequin

Faire le pont entre designers et développeurs au Guardian

Faire le pont entre designers et développeurs au Guardian

IFM Designers 2012

IFM Designers 2012

Apprendre sass

Apprendre sass

Langages
Pages
Légal

Copyright © 2022 FDOCUMENTS