Les grilles macro typo pour le web ? facile !
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Les grilles macro typo pour le web ? facile !

on

  • 3,879 views

Atelier présenté à Paris Web le 20 octobre 2012 par Marie Guillaumet et Vincent Valentin. Outils, bibliographie, citations et plus sur http://bit.ly/grilles-faciles

Atelier présenté à Paris Web le 20 octobre 2012 par Marie Guillaumet et Vincent Valentin. Outils, bibliographie, citations et plus sur http://bit.ly/grilles-faciles

Statistics

Views

Total Views
3,879
Views on SlideShare
1,480
Embed Views
2,399

Actions

Likes
6
Downloads
74
Comments
0

9 Embeds 2,399

http://grilles-faciles.alwaysdata.net 2059
http://oldschoolblogging.tumblr.com 223
http://lanyrd.com 62
http://www.stonepower.fr 21
http://www.conseilsmarketing.com 16
http://plus.url.google.com 12
http://www.paperblog.fr 4
http://graphism.fr 1
http://pigeindexer 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution-NonCommercial-NoDerivs LicenseCC Attribution-NonCommercial-NoDerivs LicenseCC Attribution-NonCommercial-NoDerivs License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Les grilles macro typo pour le web ? facile ! Presentation Transcript

  • 1. Les grilles macro-typopour le web ? Facile !Marie GuillaumetVincent Valentin Paris Web 20 octobre 2012 1
  • 2. Grilles macro-typo 2 /184Qui sommes-nous ?
  • 3. Grilles macro-typo 3 /184Qui sommes-nous ?Marie GuillaumetWeb designer etdéveloppeur web front-endhttp://marieguillaumet.com/@kreestal bit.ly/site-marie
  • 4. Grilles macro-typo 4 /184Qui sommes-nous ?Vincent ValentinDéveloppeur web front-endhttp://www.htmlzengarden.com/@htmlzg bit.ly/site-vincent
  • 5. Grilles macro-typo 5 /184Avant-proposRetour d’expérience++pragmatisme−−démonstrations techniques avancées
  • 6. Grilles macro-typo 6 /184Plan d’attaque ! 1.La grille toute puissante 2.Concevoir sa grille 3.La grille dans la pratique
  • 7. Grilles macro-typo 7 /184Objectifs • Donner envie aux développeurs web front-end et aux web designers d’utiliser la grille • Fournir une méthodologie de travail
  • 8. Grilles macro-typo 8 /184N’oubliez pas !N’hésitez pas à nous interrompre si vousavez des questions.Toutes les ressources évoquées serontréunies sur une page web dédiée.
  • 9. Grilles macro-typo 9 /184Quelques définitions
  • 10. Grilles macro-typo /184Colonnes
  • 11. Grilles macro-typo /184
  • 12. Grilles macro-typo /184Gouttières
  • 13. Grilles macro-typo /184
  • 14. Grilles macro-typo /184
  • 15. Grilles macro-typo /184
  • 16. Grilles macro-typo /184Ligne de base
  • 17. Grilles macro-typo /184Ligne de base
  • 18. Grilles macro-typo /184
  • 19. Grilles macro-typo /184
  • 20. Grilles macro-typo 20 /184Première partieLa grille toute puissante
  • 21. Grilles macro-typo 21 /184Print vs Web : •une filiation évidente •un fossé technique immense
  • 22. Grilles macro-typo 22 /184La page web na pas dedimensions réelles.Mais le besoin dunité est lemême, en print comme sur le web.
  • 23. Grilles macro-typo 23 /184
  • 24. Grilles macro-typo 24 /184Un outil commun : la grille.Unité. Harmonie. Rythme.
  • 25. Grilles macro-typo 25 /184Offrir au regard des contenusclairs, agréables à lire, danslesquels on se repère aisément. ++ Lisibilité ++ Accessibilité ++ Capitaliser sur lapprentissage
  • 26. Grilles macro-typo 26 /184La grille dans l’histoire
  • 27. Grilles macro-typo 27 /184Écriture et architecture3400 avant J.C. : écritures cunéiformes
  • 28. Grilles macro-typo 28 /184
  • 29. Grilles macro-typo 29 /184Écriture et architecture2670 à 2450 avant J.C. : pyramides deGuizeh, construites avec le nombre dor
  • 30. Grilles macro-typo 30 /184
  • 31. Grilles macro-typo 31 /184Écriture et architecture449 à 438 avant J.C. : le ParthénonOptique, proportions, nombre dor
  • 32. Grilles macro-typo 32 /184
  • 33. Grilles macro-typo 33 /184Les repères linéaires sont desoutils précieux dans lhistoire delart.Lart moderne a fait de la grille,outil invisible, une œuvre à partentière.
  • 34. Grilles macro-typo 34 /184MondrianComposition avecjaune, bleu et rouge(1939-1942)
  • 35. Grilles macro-typo 35 /184MorelletReflets dans l’eaudéformés parle spectateur(1964)
  • 36. Grilles macro-typo 36 /184BurenLes deux plateaux(1996)
  • 37. Grilles macro-typo 37 /184
  • 38. Grilles macro-typo 38 /184Graphisme contemporainStyle suisse : prise de pouvoir del’utilitaire sur l’expression personnelle.Utilisation systématique de la grille.
  • 39. Grilles macro-typo 39 /184Emil Ruder(1914–1970)
  • 40. Grilles macro-typo 40 /184Emil Ruder(1914–1970)
  • 41. Grilles macro-typo 41 /184Josef Müller-Brockmann(1914–1996)
  • 42. Grilles macro-typo 42 /184Josef Müller-Brockmann(1914–1996)
  • 43. Grilles macro-typo 43 /184Le métier de web designer est unmétier de conception.Le rôle du design est de répondreà des besoins et de résoudre desproblèmes avec des solutionsinnovantes.
  • 44. Grilles macro-typo 44 /184Appuyons-nous sur ces principesplastiques fiables.Affinons notre regard à la lumièrede cet héritage pluridisciplinaire.
  • 45. Grilles macro-typo 45 /184 Forte densité de contenus+ Minification des périphériques+ Interfaces tactiles= Intimité accrue de notre rapport au média web.
  • 46. Grilles macro-typo 46 /184Les web designers et la grille :une histoire passionnelle !
  • 47. Grilles macro-typo 47 /184La grille, un frein à la créativité ?
  • 48. Grilles macro-typo 50 /184La grille est un squelette une charpente un guide
  • 49. Grilles macro-typo 51 /184Les avantages de la grille : 1. Combattre l’angoisse de la page blanche 2. Assurer harmonie, unité et cohérence 3. Gagner du temps 4. Casser le rythme 5. Faciliter le travail en équipe
  • 50. Grilles macro-typo 52 /184Deuxième partieConcevoir sa grille
  • 51. Grilles macro-typo 53 /184Il nexiste pas une grille.Il existe une infinité de grilles.
  • 52. Grilles macro-typo 54 /184À chaque web designer deconcevoir sa grille en fonction ducontenu du site et de ses choixesthétiques.
  • 53. Grilles macro-typo 55 /184C’est l’usage du site qui doitprévaloir dans le choix de la grille.
  • 54. Grilles macro-typo 56 /184Quelle grille choisir ?Deux approches : 1. Grille fluide ou élastique 2. Grille à largeur fixe
  • 55. Grilles macro-typo 57 /184Définir sa grille
  • 56. Grilles macro-typo 58 /184Définir sa grilleGrille verticale •largeur de page •largeur de gouttière •largeur de colonne •nombre de colonnes
  • 57. Grilles macro-typo 59 /184Définir sa grilleGrille verticale •largeur de page •largeur de gouttière •largeur de colonne •nombre de colonnes
  • 58. Grilles macro-typo 60 /184Définir sa grilleGrille verticale Grille horizontale •largeur de page •corps de texte •largeur de gouttière •hauteur de ligne •largeur de colonne •nombre de colonnes
  • 59. Grilles macro-typo 61 /184Définir sa grilleGrille verticale Grille horizontale •largeur de page •corps de texte •largeur de gouttière •hauteur de ligne •largeur de colonne •nombre de colonnes
  • 60. Grilles macro-typo 62 /184Définir sa grilleGrille verticale Grille horizontale •largeur de page •corps de texte •largeur de gouttière •hauteur de ligne •largeur de colonne •nombre de colonnes
  • 61. Grilles macro-typo 63 /184Définir sa grille •S’aider de formules •S’aider d’outils visuels
  • 62. Grilles macro-typo 64 /184Démonstration bit.ly/grid-calc bit.ly/scale-rhythm
  • 63. Grilles macro-typo 65 /184Définir sa grille : choisir •Grille verticale en unités absolues •Grille horizontale en unités relatives
  • 64. Grilles macro-typo 66 /184Démonstration bit.ly/marges-px-em
  • 65. Grilles macro-typo 67 /184Et pour le RWD ? •Écrans larges : tailles maîtrisées •Écrans mobiles : pas d’espace à perdre
  • 66. Grilles macro-typo 68 /184Configurer sa grille : Photoshop+ GuideGuide http://www.guideguide.me/ bit.ly/guide-guide
  • 67. Grilles macro-typo 69 /184Démonstration bit.ly/guide-guide
  • 68. Grilles macro-typo 70 /184Attention ! 1. Choisir un interlignage égal à la largeur des gouttières 2. Placer le texte entre les lignes de base
  • 69. Grilles macro-typo 71 /184La grille sur le web : exemples
  • 70. Grilles macro-typo 72 /184Grille à colonnes égales++Grille adaptable à toutes les situations−−La plus courante
  • 71. Grilles macro-typo 73 /184http://www.lyon.archi.fr/ bit.ly/lyon-archi
  • 72. Grilles macro-typo 76 /184http://www.enssib.fr/ bit.ly/école-enssib
  • 73. Grilles macro-typo 79 /184http://www.foncia-location-vacances.fr/ bit.ly/foncia-vacances
  • 74. Grilles macro-typo 82 /184Grille modulaire++Qualités graphiques et organisationnelles−−Suppose des blocs de hauteur fixe
  • 75. Grilles macro-typo 83 /184http://www.hattienewman.co.uk/ bit.ly/hattie-newman
  • 76. Grilles macro-typo 86 /184http://promisetangeman.com/ bit.ly/promise-tangeman
  • 77. Grilles macro-typo 89 /184http://volumique.com/v2/ bit.ly/volumique-v2
  • 78. Grilles macro-typo 92 /184http://manchesterwire.co.uk/ bit.ly/manchester-wire
  • 79. Grilles macro-typo 93 /184Grille modulaire « éclatée »Le meilleur des deux mondes ?
  • 80. Grilles macro-typo 94 /184http://pinterest.com/ bit.ly/grid-pinterest
  • 81. Grilles macro-typo 97 /184http://www.flowfestival.com/ bit.ly/flow-festival
  • 82. Grilles macro-typo 100 /184D’autres expérimentations sontpossibles : • Grilles basées sur le nombre d’or • Doubles grilles • Grilles à colonnes inégales • Etc.
  • 83. Grilles macro-typo 101 /184Fonctionnement CSS
  • 84. Grilles macro-typo 102 /184Grille verticale
  • 85. Grilles macro-typo 103 /184Grille verticale .col { width: 60px; float: left; /* + hack si nécessaire */ margin-right: 20px; }
  • 86. Grilles macro-typo 104 /184Grille verticale #aside { width: 300px; /* (60 * 4) + (20 * 3) */ float: left; margin-right: 20px; }
  • 87. Grilles macro-typo 105 /184Grille verticale .col { width: 60px; float: left; margin-left: 20px; }
  • 88. Grilles macro-typo 106 /184Grille verticale .col { width: 60px; float: left; margin-left: 10px; margin-right: 10px; }
  • 89. Grilles macro-typo 107 /184Grille verticale .first-child /* ou :first-child */ {margin-left: 0;} .last-child {margin-right: 0;}
  • 90. Grilles macro-typo 108 /184Grille horizontale
  • 91. Grilles macro-typo 109 /184Grille horizontale – Rythme initial html{font-size: 100,01%;} body { font-size: 0.875em; /* soit 14 pixels */ line-height: 1.42867em; /* soit 20 pixels */ }
  • 92. Grilles macro-typo 110 /184Grille horizontale p /* le body est fixé à 14 pixels */ { font-size: 1em; /* soit 14 pixels */ line-height: 1.42867em; /* soit 20 pixels */ margin-bottom: 1.42867em; }
  • 93. Grilles macro-typo 111 /184Grille horizontale p { font-size: 1em; line-height: 1.42867em; /* soit 20 pixels */ margin-top: 1.42867em; }
  • 94. Grilles macro-typo 112 /184Grille horizontale p { font-size: 1em; line-height: 1.42867em; /* soit 20 pixels */ margin-top: 1.42867em; /* fusion */ margin-bottom: 1.42867em; }
  • 95. Grilles macro-typo 113 /184Techniques un peu plus avancées
  • 96. Grilles macro-typo 114 /184Grille verticale
  • 97. Grilles macro-typo 115 /184Grille verticale .gutter-border { margin-right: 10px; /* 10 + (60 / 2) */ padding-right: 9px; /* 9 + (60 / 2) */ border-right: 1px solid pink; }
  • 98. Grilles macro-typo 116 /184Grille verticale .col-border { margin-right: 40px; /* 10 + (60 / 2) */ padding-right: 39px; /* 9 + (60 / 2) */ border-right: 1px solid pink; }
  • 99. Grilles macro-typo 117 /184Grille horizontale
  • 100. Grilles macro-typo 118 /184Grille horizontale p { font-size: 1em; /* soit 14 pixels */ line-height: 1.42867em; /* soit 20 px */ margin-bottom: 1.42867em; }
  • 101. Grilles macro-typo 119 /184Grille horizontale p { font-size: 2em; /* soit 28 pixels */ line-height: 0.71428em; /* 1.42em / 2 */ margin-bottom: 0.71428em; }
  • 102. Grilles macro-typo 120 /184Grille horizontale p strong /* p est à 28 pixels */ { font-size: ?em; /* on veut 32 pixels */ line-height: ?em; /* on veut 20 pixels */ margin-bottom: ?em; }
  • 103. Grilles macro-typo 121 /184Démonstration bit.ly/em-calculator
  • 104. Grilles macro-typo 122 /184Grille horizontale 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; }
  • 105. Grilles macro-typo 123 /184Grille horizontale 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; }
  • 106. Grilles macro-typo 124 /184Grille horizontale 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; }
  • 107. Grilles macro-typo 125 /184Grille horizontale p strong /* p est à 32 pixels */ { font-size: 1em; /* on obtient 28 pixels */ 32/28 font-size: ?em; /* on veut 32 pixels */ line-height: ?em; /* on veut 20 pixels */ margin-bottom: ?em; }
  • 108. Grilles macro-typo 126 /184Grille horizontale p strong /* p est à 28 pixels */ { font-size: 32/28em; /* soit 32 pixels */ line-height: ?em; /* on veut 20 pixels */ margin-bottom: ?em; }
  • 109. Grilles macro-typo 127 /184Grille horizontale 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; }
  • 110. Grilles macro-typo 128 /184Grille horizontale 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; }
  • 111. Grilles macro-typo 129 /184Grille horizontale p strong /* p est à 32 pixels */ { font-size: 36/32em; /* soit 36 pixels */ line-height: 1em; /* on obtient 32 pixels */ 20/32 line-height: ?em; /* on veut 20 pixels */ margin-bottom: ?em; }
  • 112. Grilles macro-typo 130 /184Grille horizontale p strong /* p est à 28 pixels */ { font-size: 32/28em; /* soit 32 pixels */ line-height: 20/32em; /* soit 20 pixels */ margin-bottom: 20/32em; }
  • 113. Grilles macro-typo 131 /184De bons outils
  • 114. Grilles macro-typo 132 /184Normalize.css • Définir une base de travail • Disponible en deux versions bit.ly/normalize-demo
  • 115. Grilles macro-typo 133 /184Préprocesseurs CSS
  • 116. Grilles macro-typo 134 /184Préprocesseurs CSS •Calculs simples •Tâches répétitives
  • 117. Grilles macro-typo 135 /184Préprocesseurs CSS •Variables •Calculs •Fonctions •Héritage •Imbrications
  • 118. Grilles macro-typo 136 /184Préprocesseurs CSS •Less •Sass (Sass et SassyCSS) •Compass •Stylus
  • 119. Grilles macro-typo 137 /184Préprocesseurs CSS – Mixins • adjust-font-size-to • padding-leader / margin-leader • padding-trailer / margin-trailer • establish-baseline • Etc. bit.ly/compass-rhythm
  • 120. Grilles macro-typo 138 /184Préprocesseurs CSS – Mixins réécrits • font-size • padding-top / margin-top • padding-bottom / margin-bottom • line-height • Etc.
  • 121. Grilles macro-typo 139 /184Préprocesseurs CSS – Mixins ajoutés • position-top / position-bottom • height / line-height • border-top / border-bottom • bloc • Etc.
  • 122. Grilles macro-typo 140 /184Préprocesseurs CSS – Texte 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); } }
  • 123. Grilles macro-typo 141 /184Préprocesseurs CSS – Texte p { $fs1: 28px; .bloc($fs1); strong { $fs2: 32px; .bloc($fs2, $fs1); } }
  • 124. Grilles macro-typo 142 /184Préprocesseurs CSS – Colonnes #content { <div id="content"> #sidebar { <div id="sidebar"> .span(4); <p>…</p> .first; <p>…</p> } </div> #article { <div id="article"> .span(6); <p>…</p> } </div> } </div>
  • 125. Grilles macro-typo 143 /184Préprocesseurs CSS – RWD #article { .span(8); @media tablet { .span(4); } @media smartphone { float: none; width: auto; .first; } }
  • 126. Grilles macro-typo 144 /184Préprocesseurs CSS – Configuration $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;
  • 127. Grilles macro-typo 145 /184#grid • Contrôle de la grille • Aucune image, tout en CSS • À supprimer en production bit.ly/hash-grid
  • 128. Grilles macro-typo 146 /184Démonstration bit.ly/hash-grid-demo
  • 129. Grilles macro-typo 147 /184La grille que nous vous proposons • Tout-terrain • Divisible • Modulaire • Souple
  • 130. Colonnes de 60 pixels
  • 131. Gouttières de 20 pixels
  • 132. Page :980 pixels
  • 133. Interlignage 20 pixels
  • 134. Corps de texte 14 pixelsLorem ipsum dolor sit amet, consectetur adipisicing elit, sed doeiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enimad minim veniam, quis nostrud exercitation ullamco laboris nisi utaliquip ex ea commodo consequat. Duis aute irure dolor inreprehenderit in voluptate velit esse cillum dolore eu fugiat nullapariatur. Excepteur sint occaecat cupidatat non proident, sunt inculpa qui officia deserunt mollit anim id est laborum.
  • 135. Grilles macro-typo /184
  • 136. Grilles macro-typo /184
  • 137. Grilles macro-typo 164 /184Troisième partieDans la pratique
  • 138. Grilles macro-typo 165 /184Tout doit-il être aligné surla grille ?Non ! •Ce n’est pas toujours possible •Ce n’est pas toujours souhaité
  • 139. Grilles macro-typo 166 /184Mon rythme vertical est cassé
  • 140. Grilles macro-typo 167 /184Mon rythme vertical est cassé
  • 141. Grilles macro-typo 168 /184Mon rythme vertical est cassé
  • 142. Grilles macro-typo 169 /184Mon rythme vertical est casséLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor Lorem ipsum dolor sitincididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis amet, consecteturnostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. adipisicing elit, sed doDuis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu eiusmod tempor incididuntfugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in ut labore et dolore magnaculpa qui officia deserunt mollit anim id est laborum. aliqua. Ut enim ad minim veniam, quis nostrudLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor exercitation ullamcoincididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis laboris nisi ut aliquip ex eanostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. commodo consequat. DuisDuis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu aute irure dolor infugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in reprehenderit in voluptateculpa qui officia deserunt mollit anim id est laborum. velit esse cillum dolore eu fugiat nulla pariatur.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor Excepteur sint occaecatincididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis cupidatat non proident,nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. sunt in culpa qui officiaDuis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu deserunt mollit anim id estfugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in laborum.culpa qui officia deserunt mollit anim id est laborum.
  • 143. Grilles macro-typo 170 /184Mon rythme vertical est cassé Lorem ipsum dolor sitLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididuntamet, consectetur ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamcoLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor laboris nisi ut aliquip ex eaincididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis commodo consequat. Duisnostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. aute irure dolor inDuis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu reprehenderit in voluptatefugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in velit esse cillum dolore euculpa qui officia deserunt mollit anim id est laborum. fugiat nulla pariatur. Excepteur sint occaecatLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor cupidatat non proident,incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis sunt in culpa qui officianostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. deserunt mollit anim id estDuis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu laborum.fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt inculpa qui officia deserunt mollit anim id est laborum.
  • 144. Grilles macro-typo 171 /184Mon rythme vertical est casséLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor Lorem ipsum dolor sitincididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis amet, consecteturnostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. adipisicing elit, sed doDuis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu eiusmod tempor incididuntfugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in ut labore et dolore magnaculpa qui officia deserunt mollit anim id est laborum. aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamcoLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor laboris nisi ut aliquip ex eaincididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis commodo consequat. Duisnostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. aute irure dolor inDuis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu reprehenderit in voluptatefugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in velit esse cillum dolore euculpa qui officia deserunt mollit anim id est laborum. fugiat nulla pariatur. Excepteur sint occaecatLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor cupidatat non proident,incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis sunt in culpa qui officianostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. deserunt mollit anim id estDuis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu laborum.fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt inculpa qui officia deserunt mollit anim id est laborum.
  • 145. Grilles macro-typo 172 /184Mon rythme vertical est casséLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor Lorem ipsum dolor sitincididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis amet, consecteturnostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. adipisicing elit, sed doDuis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu eiusmod tempor incididuntfugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in ut labore et dolore magnaculpa qui officia deserunt mollit anim id est laborum. 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 occaecatLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor cupidatat non proident,incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis sunt in culpa qui officianostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. deserunt mollit anim id estDuis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu laborum.fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt inculpa qui officia deserunt mollit anim id est laborum.
  • 146. Grilles macro-typo 173 /184Mon rythme vertical est casséLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor Lorem ipsum dolor sitincididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis amet, consecteturnostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. adipisicing elit, sed doDuis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu eiusmod tempor incididuntfugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in ut labore et dolore magnaculpa qui officia deserunt mollit anim id est laborum. aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamcoLorem ipsum laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor inDolor sit amet reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecatLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor cupidatat non proident,incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis sunt in culpa qui officianostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. deserunt mollit anim id estDuis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu laborum.fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt inculpa qui officia deserunt mollit anim id est laborum.
  • 147. Grilles macro-typo 174 /184Mon rythme vertical est casséLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor Lorem ipsum dolor sitincididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis amet, consecteturnostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. adipisicing elit, sed doDuis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu eiusmod tempor incididuntfugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in ut labore et dolore magnaculpa qui officia deserunt mollit anim id est laborum. 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 occaecatLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor cupidatat non proident,incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis sunt in culpa qui officianostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. deserunt mollit anim id estDuis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu laborum.fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt inculpa qui officia deserunt mollit anim id est laborum.
  • 148. Grilles macro-typo 175 /184Réparer le rythme vertical •Compenser les pixels ajoutés •Fixer des hauteurs •Faire les calculs automatiquement
  • 149. Grilles macro-typo 176 /184Compenser les pixels ajoutés#foo{! border-bottom: 10px solid pink;}
  • 150. Grilles macro-typo 177 /184Compenser les pixels ajoutés#foo{! border-bottom: 10px solid pink;! margin-top: -10px;}
  • 151. Grilles macro-typo 178 /184Compenser les pixels ajoutés#foo{! border-bottom: 10px solid pink;! margin-top: -10px;! position: relative;! top: 10px;}
  • 152. Grilles macro-typo 179 /184Compenser les pixels ajoutés@mixin border-bottom($width: 1px,$style: solid, $color: black){! border-bottom: $width $style $color;! margin-top: $width * -1;! position: relative;! top: $width;}
  • 153. Grilles macro-typo 180 /184Compenser les pixels ajoutés#foo{! .border-bottom! (10px, solid, pink);}
  • 154. Grilles macro-typo 181 /184Fixer des hauteurs•Toujours travailler avec des unités relatives•Préférer les hauteurs minimales aux hauteurs fixes
  • 155. Grilles macro-typo 182 /184Faire les calculs automatiquementjquery.baseline.js • Aucune configuration nécessaire • Des conteneurs parents pour rétablir le rythme • Résultats avec des unités relatives • Exemple : $(img, table).baseline(); bit.ly/jquery-baseline
  • 156. Grilles macro-typo 183 /184Conclusion
  • 157. Grilles macro-typo 184 /184Merci ! :-) bit.ly/grilles-faciles@kreestal@htmlzg