Les grilles macro typo pour le web ? facile !
-
Upload
marie-guillaumet -
Category
Technology
-
view
3.921 -
download
7
description
Transcript of Les grilles macro typo pour le web ? facile !
Marie GuillaumetVincent Valentin
Paris Web20 octobre 2012
Les grilles macro-typopour le web ? Facile !
1
Grilles macro-typo /184
Qui sommes-nous ?
2
Grilles macro-typo /184
Marie Guillaumet
Qui sommes-nous ?
3
Web designer etdéveloppeur web front-end
http://marieguillaumet.com/@kreestal
bit.ly/site-marie
Grilles macro-typo /184
Vincent Valentin
Qui sommes-nous ?
4
http://www.htmlzengarden.com/@htmlzg
Développeur web front-end
bit.ly/site-vincent
Grilles macro-typo /184
Retour d’expérience
Avant-propos
++pragmatisme−−démonstrations techniques avancées
5
Grilles macro-typo /184
Plan d’attaque !
1.La grille toute puissante2.Concevoir sa grille3.La grille dans la pratique
6
Grilles macro-typo /184
Objectifs
• Donner envie aux développeurs web front-end et aux web designers d’utiliser la grille
• Fournir une méthodologie de travail
7
Grilles macro-typo /184
N’oubliez pas !
N’hésitez pas à nous interrompre si vous avez des questions.
Toutes les ressources évoquées seront réunies sur une page web dédiée.
8
Grilles macro-typo /184
Quelques définitions
9
Grilles macro-typo /184
Colonnes
Grilles macro-typo /184
Grilles macro-typo /184
Gouttières
Grilles macro-typo /184
Grilles macro-typo /184
Grilles macro-typo /184
Grilles macro-typo /184
Ligne de base
Grilles macro-typo /184
Ligne de base
Grilles macro-typo /184
Grilles macro-typo /184
Grilles macro-typo /184
La grille toute puissantePremière partie
20
Grilles macro-typo /184
Print vs Web :
•une filiation évidente
•un fossé technique immense
21
Grilles macro-typo /184
La page web n'a pas de dimensions réelles.
Mais le besoin d'unité est le même, en print comme sur le web.
22
Grilles macro-typo /18423
Grilles macro-typo /184
Un outil commun : la grille.
Unité. Harmonie. Rythme.
24
Grilles macro-typo /184
++ Lisibilité++ Accessibilité++ Capitaliser sur l'apprentissage
Offrir au regard des contenus clairs, agréables à lire, dans lesquels on se repère aisément.
25
Grilles macro-typo /184
La grille dans l’histoire
26
Grilles macro-typo /184
3400 avant J.C. : écritures cunéiformes
Écriture et architecture
27
Grilles macro-typo /18428
Grilles macro-typo /184
2670 à 2450 avant J.C. : pyramides de Guizeh, construites avec le nombre d'or
Écriture et architecture
29
Grilles macro-typo /18430
Grilles macro-typo /184
449 à 438 avant J.C. : le Parthénon
Optique, proportions, nombre d'or
Écriture et architecture
31
Grilles macro-typo /18432
Grilles macro-typo /184
Les repères linéaires sont des outils précieux dans l'histoire de l'art.
L'art moderne a fait de la grille, outil invisible, une œuvre à part entière.
33
Grilles macro-typo /184
MondrianComposition avec jaune, bleu et rouge(1939-1942)
34
Grilles macro-typo /184
MorelletReflets dans l’eau déformés par le spectateur(1964)
35
Grilles macro-typo /184
BurenLes deux plateaux(1996)
36
Grilles macro-typo /18437
Grilles macro-typo /184
Style suisse : prise de pouvoir de l’utilitaire sur l’expression personnelle.
Utilisation systématique de la grille.
Graphisme contemporain
38
Grilles macro-typo /184
Emil Ruder(1914–1970)
39
Grilles macro-typo /184
Emil Ruder(1914–1970)
40
Grilles macro-typo /184
Josef Müller-Brockmann(1914–1996)
41
Grilles macro-typo /184
Josef Müller-Brockmann(1914–1996)
42
Grilles macro-typo /184
Le métier de web designer est un métier de conception.
Le rôle du design est de répondre à des besoins et de résoudre des problèmes avec des solutions innovantes.
43
Grilles macro-typo /184
Appuyons-nous sur ces principes plastiques fiables.
Affinons notre regard à la lumière de cet héritage pluridisciplinaire.
44
Grilles macro-typo /184
Forte densité de contenus+ Minification des périphériques+ Interfaces tactiles
45
= Intimité accrue de notre rapport au média web.
Grilles macro-typo /184
Les web designers et la grille :une histoire passionnelle !
46
Grilles macro-typo /184
La grille, un frein à la créativité ?
47
Grilles macro-typo /184
La grille est un squelette
50
une charpente
un guide
Grilles macro-typo /184
1. Combattre l’angoisse de la page blanche2. Assurer harmonie, unité et cohérence3. Gagner du temps4. Casser le rythme5. Faciliter le travail en équipe
Les avantages de la grille :
51
Grilles macro-typo /184
Concevoir sa grilleDeuxième partie
52
Grilles macro-typo /184
Il n'existe pas une grille.
Il existe une infinité de grilles.
53
Grilles macro-typo /184
À chaque web designer de concevoir sa grille en fonction du contenu du site et de ses choix esthétiques.
54
Grilles macro-typo /184
C’est l’usage du site qui doit prévaloir dans le choix de la grille.
55
Grilles macro-typo /184
Quelle grille choisir ?
Deux approches :1. Grille fluide ou élastique
2. Grille à largeur fixe
56
Grilles macro-typo /18457
Définir sa grille
Grilles macro-typo /18458
Grille verticale
•largeur de page•largeur de gouttière•largeur de colonne•nombre de colonnes
Définir sa grille
Grilles macro-typo /18459
Définir sa grille
Grille verticale
•largeur de page•largeur de gouttière•largeur de colonne•nombre de colonnes
Grilles macro-typo /18460
Grille verticale Grille horizontale
•largeur de page•largeur de gouttière•largeur de colonne•nombre de colonnes
•corps de texte•hauteur de ligne
Définir sa grille
Grilles macro-typo /184
Grille verticale Grille horizontale
•largeur de page•largeur de gouttière•largeur de colonne•nombre de colonnes
•corps de texte•hauteur de ligne
61
Définir sa grille
Grilles macro-typo /184
Grille verticale Grille horizontale
•largeur de page•largeur de gouttière•largeur de colonne•nombre de colonnes
62
Définir sa grille
•corps de texte•hauteur de ligne
Grilles macro-typo /184
Définir sa grille
•S’aider de formules•S’aider d’outils visuels
63
Grilles macro-typo /184
Démonstration
64
bit.ly/grid-calcbit.ly/scale-rhythm
Grilles macro-typo /184
Définir sa grille : choisir
•Grille verticale en unités absolues•Grille horizontale en unités relatives
65
Grilles macro-typo /184
Démonstration
66
bit.ly/marges-px-em
Grilles macro-typo /184
Et pour le RWD ?
•Écrans larges : tailles maîtrisées
•Écrans mobiles : pas d’espace à perdre
67
Grilles macro-typo /184
Configurer sa grille :
http://www.guideguide.me/
68
Photoshop + GuideGuide
bit.ly/guide-guide
Grilles macro-typo /18469
Démonstration
bit.ly/guide-guide
Grilles macro-typo /184
Attention !
1.Choisir un interlignage égal à la largeurdes gouttières
2.Placer le texte entre les lignes de base
70
Grilles macro-typo /184
La grille sur le web : exemples
71
Grilles macro-typo /184
Grille à colonnes égales
++Grille adaptable à toutes les situations−−La plus courante
72
Grilles macro-typo /18473
http://www.lyon.archi.fr/
bit.ly/lyon-archi
Grilles macro-typo /18476
http://www.enssib.fr/
bit.ly/école-enssib
Grilles macro-typo /18479
http://www.foncia-location-vacances.fr/
bit.ly/foncia-vacances
Grilles macro-typo /184
Grille modulaire
++Qualités graphiques et organisationnelles−−Suppose des blocs de hauteur fixe
82
Grilles macro-typo /18483
http://www.hattienewman.co.uk/
bit.ly/hattie-newman
Grilles macro-typo /18486
http://promisetangeman.com/
bit.ly/promise-tangeman
Grilles macro-typo /18489
http://volumique.com/v2/
bit.ly/volumique-v2
Grilles macro-typo /18492
http://manchesterwire.co.uk/
bit.ly/manchester-wire
Grilles macro-typo /184
Grille modulaire « éclatée »
Le meilleur des deux mondes ?
93
Grilles macro-typo /18494
http://pinterest.com/
bit.ly/grid-pinterest
Grilles macro-typo /18497
http://www.flowfestival.com/
bit.ly/flow-festival
Grilles macro-typo /184
D’autres expérimentations sont possibles :
• Grilles basées sur le nombre d’or• Doubles grilles• Grilles à colonnes inégales• Etc.
100
Grilles macro-typo /184
Fonctionnement CSS
101
Grilles macro-typo /184
Grille verticale
102
Grilles macro-typo /184
Grille verticale.col{width: 60px;float: left; /* + hack si nécessaire */margin-right: 20px;
}
103
Grilles macro-typo /184
Grille verticale#aside{width: 300px; /* (60 * 4) + (20 * 3) */float: left;margin-right: 20px;
}
104
Grilles macro-typo /184
Grille verticale.col{width: 60px;float: left;margin-left: 20px;
}
105
Grilles macro-typo /184
Grille verticale.col{width: 60px;float: left;margin-left: 10px;margin-right: 10px;
}
106
Grilles macro-typo /184
Grille verticale.first-child /* ou :first-child */{margin-left: 0;}
.last-child{margin-right: 0;}
107
Grilles macro-typo /184
Grille horizontale
108
Grilles macro-typo /184
Grille horizontale – Rythme initial
html{font-size: 100,01%;}
body{font-size: 0.875em; /* soit 14 pixels */line-height: 1.42867em; /* soit 20 pixels */
}
109
Grilles macro-typo /184
Grille horizontalep /* le body est fixé à 14 pixels */{font-size: 1em; /* soit 14 pixels */line-height: 1.42867em; /* soit 20 pixels */margin-bottom: 1.42867em;
}
110
Grilles macro-typo /184
Grille horizontale
111
p{font-size: 1em;line-height: 1.42867em; /* soit 20 pixels */margin-top: 1.42867em;
}
Grilles macro-typo /184
Grille horizontale
112
p{font-size: 1em;line-height: 1.42867em; /* soit 20 pixels */margin-top: 1.42867em; /* fusion */margin-bottom: 1.42867em;
}
Grilles macro-typo /184
Techniques un peu plus avancées
113
Grilles macro-typo /184
Grille verticale
114
Grilles macro-typo /184115
Grille verticale.gutter-border{margin-right: 10px; /* 10 + (60 / 2) */padding-right: 9px; /* 9 + (60 / 2) */border-right: 1px solid pink;
}
Grilles macro-typo /184
.col-border{margin-right: 40px; /* 10 + (60 / 2) */padding-right: 39px; /* 9 + (60 / 2) */border-right: 1px solid pink;
}
116
Grille verticale
Grilles macro-typo /184117
Grille horizontale
Grilles macro-typo /184
p{font-size: 1em; /* soit 14 pixels */line-height: 1.42867em; /* soit 20 px */margin-bottom: 1.42867em;
}
118
Grille horizontale
Grilles macro-typo /184
p{font-size: 2em; /* soit 28 pixels */line-height: 0.71428em; /* 1.42em / 2 */margin-bottom: 0.71428em;
}
119
Grille horizontale
Grilles macro-typo /184
p strong /* p est à 28 pixels */{font-size: ?em; /* on veut 32 pixels */line-height: ?em; /* on veut 20 pixels */margin-bottom: ?em;
}
120
Grille horizontale
Grilles macro-typo /184
Démonstration
121
bit.ly/em-calculator
Grilles macro-typo /184
p strong /* p est à 28 pixels */{font-size: 1em; /* on obtient 28 pixels */font-size: ?em; /* on veut 32 pixels */line-height: ?em; /* on veut 20 pixels */margin-bottom: ?em;
}
122
Grille horizontale
Grilles macro-typo /184
p strong /* p est à 32 pixels */{font-size: 1em; /* on obtient 28 pixels */font-size: ?em; /* on veut 32 pixels */line-height: ?em; /* on veut 20 pixels */margin-bottom: ?em;
}
123
Grille horizontale
Grilles macro-typo /184
p strong /* p est à 32 pixels */{font-size: 1em; /* on obtient 28 pixels */font-size: ?em; /* on veut 32 pixels */line-height: ?em; /* on veut 20 pixels */margin-bottom: ?em;
}
124
Grille horizontale
Grilles macro-typo /184
p strong /* p est à 32 pixels */{font-size: 1em; /* on obtient 28 pixels */font-size: ?em; /* on veut 32 pixels */line-height: ?em; /* on veut 20 pixels */margin-bottom: ?em;
}
32/28
125
Grille horizontale
Grilles macro-typo /184
p strong /* p est à 28 pixels */{font-size: 32/28em; /* soit 32 pixels */line-height: ?em; /* on veut 20 pixels */margin-bottom: ?em;
}
126
Grille horizontale
Grilles macro-typo /184
p strong /* p est à 28 pixels */{font-size: 32/28em; /* soit 32 pixels */line-height: 1em; /* on obtient 32 pixels */line-height: ?em; /* on veut 20 pixels */margin-bottom: ?em;
}
127
Grille horizontale
Grilles macro-typo /184
p strong /* p est à 32 pixels */{font-size: 36/32em; /* soit 36 pixels */line-height: 1em; /* on obtient 32 pixels */line-height: ?em; /* on veut 20 pixels */margin-bottom: ?em;
}
128
Grille horizontale
Grilles macro-typo /184
p strong /* p est à 32 pixels */{font-size: 36/32em; /* soit 36 pixels */line-height: 1em; /* on obtient 32 pixels */line-height: ?em; /* on veut 20 pixels */margin-bottom: ?em;
}
20/32
129
Grille horizontale
Grilles macro-typo /184
p strong /* p est à 28 pixels */{font-size: 32/28em; /* soit 32 pixels */line-height: 20/32em; /* soit 20 pixels */margin-bottom: 20/32em;
}
130
Grille horizontale
Grilles macro-typo /184
De bons outils
131
Grilles macro-typo /184
Normalize.css
132
• Définir une base de travail• Disponible en deux versions
bit.ly/normalize-demo
Grilles macro-typo /184133
Préprocesseurs CSS
Grilles macro-typo /184
•Calculs simples•Tâches répétitives
134
Préprocesseurs CSS
Grilles macro-typo /184
•Variables•Calculs•Fonctions•Héritage•Imbrications
135
Préprocesseurs CSS
Grilles macro-typo /184
•Less•Sass (Sass et SassyCSS)•Compass
•Stylus
136
Préprocesseurs CSS
Grilles macro-typo /184137
• adjust-font-size-to• padding-leader / margin-leader• padding-trailer / margin-trailer• establish-baseline• Etc.
Préprocesseurs CSS – Mixins
bit.ly/compass-rhythm
Grilles macro-typo /184138
Préprocesseurs CSS – Mixins réécrits
• font-size• padding-top / margin-top• padding-bottom / margin-bottom• line-height• Etc.
Grilles macro-typo /184139
Préprocesseurs CSS – Mixins ajoutés
• position-top / position-bottom• height / line-height• border-top / border-bottom• bloc• Etc.
Grilles macro-typo /184140
p {$fs1: 28px;.font-size($fs1);.line-height($fs1); .margin-bottom($fs1);
strong {$fs2: 32px;.font-size($fs2, $fs1);.line-height($fs2, $fs1); .margin-bottom($fs2, $fs1);
}}
Préprocesseurs CSS – Texte
Grilles macro-typo /184141
p {$fs1: 28px;
.bloc($fs1);
strong {
$fs2: 32px;
.bloc($fs2, $fs1);}
}
Préprocesseurs CSS – Texte
Grilles macro-typo /184142
#content {#sidebar {.span(4);.first;
}#article {.span(6);
}}
<div id="content"><div id="sidebar">
<p>…</p><p>…</p>
</div><div id="article">
<p>…</p></div>
</div>
Préprocesseurs CSS – Colonnes
Grilles macro-typo /184143
#article {.span(8);@media tablet {.span(4);
}@media smartphone {float: none; width: auto; .first;
}}
Préprocesseurs CSS – RWD
Grilles macro-typo /184
Préprocesseurs CSS – Configuration
144
$base-font-size: 14px;$base-line-height: 20px;
$grid-width: 60px;$grid-margin: 20px;
$grid-columns-desktop: 12;$grid-columns-tablet: 10;$grid-columns-mobile: 1;
Grilles macro-typo /184
#grid
145
• Contrôle de la grille• Aucune image, tout en CSS• À supprimer en production
bit.ly/hash-grid
Grilles macro-typo /184
Démonstration
146
bit.ly/hash-grid-demo
Grilles macro-typo /184
• Tout-terrain• Divisible• Modulaire• Souple
147
La grille que nous vous proposons
Colonnes de60 pixels
Gouttières de 20 pixels
Page :980 pixels
Interlignage20 pixels
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Corps de texte14 pixels
Grilles macro-typo /184
Grilles macro-typo /184
Grilles macro-typo /184
Dans la pratiqueTroisième partie
164
Grilles macro-typo /184
Tout doit-il être aligné sur la grille ?
165
Non !
•Ce n’est pas toujours possible•Ce n’est pas toujours souhaité
Grilles macro-typo /184
Mon rythme vertical est cassé
166
Grilles macro-typo /184
Mon rythme vertical est cassé
167
Grilles macro-typo /184
Mon rythme vertical est cassé
168
Grilles macro-typo /184
Mon rythme vertical est casséLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
169
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Grilles macro-typo /184
Mon rythme vertical est cassé
170
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur
Grilles macro-typo /184
Mon rythme vertical est cassé
171
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Grilles macro-typo /184
Mon rythme vertical est cassé
172
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Grilles macro-typo /184
Mon rythme vertical est cassé
173
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum
Dolor sit amet
Grilles macro-typo /184
Mon rythme vertical est cassé
174
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Grilles macro-typo /184
•Compenser les pixels ajoutés•Fixer des hauteurs•Faire les calculs automatiquement
Réparer le rythme vertical
175
Grilles macro-typo /184
#foo{! border-bottom: 10px solid pink;
}
Compenser les pixels ajoutés
176
Grilles macro-typo /184
#foo{! border-bottom: 10px solid pink;! margin-top: -10px;
}
Compenser les pixels ajoutés
177
Grilles macro-typo /184
#foo{! border-bottom: 10px solid pink;! margin-top: -10px;! position: relative;! top: 10px;}
Compenser les pixels ajoutés
178
Grilles macro-typo /184
@mixin border-bottom($width: 1px, $style: solid, $color: black){! border-bottom: $width $style $color;! margin-top: $width * -1;! position: relative;! top: $width;}
Compenser les pixels ajoutés
179
Grilles macro-typo /184
#foo{! .border-bottom! (10px, solid, pink);}
Compenser les pixels ajoutés
180
Grilles macro-typo /184
•Toujours travailler avec des unités relatives
•Préférer les hauteurs minimales aux hauteurs fixes
Fixer des hauteurs
181
Grilles macro-typo /184
jquery.baseline.js
Faire les calculs automatiquement
• Aucune configuration nécessaire• Des conteneurs parents pour rétablir le
rythme• Résultats avec des unités relatives
• Exemple : $('img, table').baseline();
182
bit.ly/jquery-baseline
Grilles macro-typo /184
Conclusion
183
Grilles macro-typo /184
Merci ! :-) bit.ly/grilles-faciles
184
@kreestal@htmlzg