Les grilles macro-typopour le web ? Facile !Marie GuillaumetVincent Valentin                         Paris Web            ...
Grilles macro-typo   2 /184Qui sommes-nous ?
Grilles macro-typo   3 /184Qui sommes-nous ?Marie GuillaumetWeb designer etdéveloppeur web front-endhttp://marieguillaumet...
Grilles macro-typo   4 /184Qui sommes-nous ?Vincent ValentinDéveloppeur web front-endhttp://www.htmlzengarden.com/@htmlzg ...
Grilles macro-typo   5 /184Avant-proposRetour d’expérience++pragmatisme−−démonstrations techniques avancées
Grilles macro-typo   6 /184Plan d’attaque ! 1.La grille toute puissante 2.Concevoir sa grille 3.La grille dans la pratique
Grilles macro-typo   7 /184Objectifs • Donner envie aux développeurs web   front-end et aux web designers   d’utiliser la ...
Grilles macro-typo   8 /184N’oubliez pas !N’hésitez pas à nous interrompre si vousavez des questions.Toutes les ressources...
Grilles macro-typo   9 /184Quelques définitions
Grilles macro-typo   /184Colonnes
Grilles macro-typo   /184
Grilles macro-typo   /184Gouttières
Grilles macro-typo   /184
Grilles macro-typo   /184
Grilles macro-typo   /184
Grilles macro-typo   /184Ligne de base
Grilles macro-typo   /184Ligne de base
Grilles macro-typo   /184
Grilles macro-typo   /184
Grilles macro-typo   20 /184Première partieLa grille toute puissante
Grilles macro-typo   21 /184Print vs Web : •une filiation évidente •un fossé technique immense
Grilles macro-typo   22 /184La page web na pas dedimensions réelles.Mais le besoin dunité est lemême, en print comme sur l...
Grilles macro-typo   23 /184
Grilles macro-typo   24 /184Un outil commun : la grille.Unité. Harmonie. Rythme.
Grilles macro-typo   25 /184Offrir au regard des contenusclairs, agréables à lire, danslesquels on se repère aisément.  ++...
Grilles macro-typo   26 /184La grille dans l’histoire
Grilles macro-typo   27 /184Écriture et architecture3400 avant J.C. : écritures cunéiformes
Grilles macro-typo   28 /184
Grilles macro-typo   29 /184Écriture et architecture2670 à 2450 avant J.C. : pyramides deGuizeh, construites avec le nombr...
Grilles macro-typo   30 /184
Grilles macro-typo   31 /184Écriture et architecture449 à 438 avant J.C. : le ParthénonOptique, proportions, nombre dor
Grilles macro-typo   32 /184
Grilles macro-typo   33 /184Les repères linéaires sont desoutils précieux dans lhistoire delart.Lart moderne a fait de la ...
Grilles macro-typo   34 /184MondrianComposition avecjaune, bleu et rouge(1939-1942)
Grilles macro-typo   35 /184MorelletReflets dans l’eaudéformés parle spectateur(1964)
Grilles macro-typo   36 /184BurenLes deux plateaux(1996)
Grilles macro-typo   37 /184
Grilles macro-typo   38 /184Graphisme contemporainStyle suisse : prise de pouvoir del’utilitaire sur l’expression personne...
Grilles macro-typo   39 /184Emil Ruder(1914–1970)
Grilles macro-typo   40 /184Emil Ruder(1914–1970)
Grilles macro-typo   41 /184Josef Müller-Brockmann(1914–1996)
Grilles macro-typo   42 /184Josef Müller-Brockmann(1914–1996)
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 be...
Grilles macro-typo   44 /184Appuyons-nous sur ces principesplastiques fiables.Affinons notre regard à la lumièrede cet hér...
Grilles macro-typo   45 /184  Forte densité de contenus+ Minification des périphériques+ Interfaces tactiles= Intimité acc...
Grilles macro-typo   46 /184Les web designers et la grille :une histoire passionnelle !
Grilles macro-typo   47 /184La grille, un frein à la créativité ?
Grilles macro-typo   50 /184La grille est un squelette           une charpente            un guide
Grilles macro-typo    51 /184Les avantages de la grille :  1. Combattre l’angoisse de la page blanche  2. Assurer harmonie...
Grilles macro-typo   52 /184Deuxième partieConcevoir sa grille
Grilles macro-typo   53 /184Il nexiste pas une grille.Il existe une infinité de grilles.
Grilles macro-typo   54 /184À chaque web designer deconcevoir sa grille en fonction ducontenu du site et de ses choixesthé...
Grilles macro-typo   55 /184C’est l’usage du site qui doitprévaloir dans le choix de la grille.
Grilles macro-typo   56 /184Quelle grille choisir ?Deux approches : 1. Grille fluide ou élastique 2. Grille à largeur fixe
Grilles macro-typo   57 /184Définir sa grille
Grilles macro-typo   58 /184Définir sa grilleGrille verticale •largeur de page •largeur de gouttière •largeur de colonne •...
Grilles macro-typo   59 /184Définir sa grilleGrille verticale •largeur de page •largeur de gouttière •largeur de colonne •...
Grilles macro-typo   60 /184Définir sa grilleGrille verticale         Grille horizontale •largeur de page         •corps d...
Grilles macro-typo   61 /184Définir sa grilleGrille verticale         Grille horizontale •largeur de page         •corps d...
Grilles macro-typo   62 /184Définir sa grilleGrille verticale         Grille horizontale •largeur de page         •corps d...
Grilles macro-typo   63 /184Définir sa grille  •S’aider de formules  •S’aider d’outils visuels
Grilles macro-typo   64 /184Démonstration           bit.ly/grid-calc           bit.ly/scale-rhythm
Grilles macro-typo   65 /184Définir sa grille : choisir  •Grille verticale en unités absolues  •Grille horizontale en unit...
Grilles macro-typo   66 /184Démonstration           bit.ly/marges-px-em
Grilles macro-typo   67 /184Et pour le RWD ? •Écrans larges : tailles maîtrisées •Écrans mobiles : pas d’espace à perdre
Grilles macro-typo   68 /184Configurer sa grille :  Photoshop+ GuideGuide  http://www.guideguide.me/               bit.ly/...
Grilles macro-typo   69 /184Démonstration           bit.ly/guide-guide
Grilles macro-typo      70 /184Attention ! 1. Choisir un interlignage égal à la largeur    des gouttières 2. Placer le tex...
Grilles macro-typo   71 /184La grille sur le web : exemples
Grilles macro-typo   72 /184Grille à colonnes égales++Grille adaptable à toutes les situations−−La plus courante
Grilles macro-typo   73 /184http://www.lyon.archi.fr/             bit.ly/lyon-archi
Grilles macro-typo   76 /184http://www.enssib.fr/            bit.ly/école-enssib
Grilles macro-typo   79 /184http://www.foncia-location-vacances.fr/              bit.ly/foncia-vacances
Grilles macro-typo    82 /184Grille modulaire++Qualités graphiques et organisationnelles−−Suppose des blocs de hauteur fixe
Grilles macro-typo   83 /184http://www.hattienewman.co.uk/           bit.ly/hattie-newman
Grilles macro-typo   86 /184http://promisetangeman.com/           bit.ly/promise-tangeman
Grilles macro-typo   89 /184http://volumique.com/v2/            bit.ly/volumique-v2
Grilles macro-typo   92 /184http://manchesterwire.co.uk/            bit.ly/manchester-wire
Grilles macro-typo   93 /184Grille modulaire « éclatée »Le meilleur des deux mondes ?
Grilles macro-typo   94 /184http://pinterest.com/            bit.ly/grid-pinterest
Grilles macro-typo   97 /184http://www.flowfestival.com/            bit.ly/flow-festival
Grilles macro-typo   100 /184D’autres expérimentations sontpossibles : •   Grilles basées sur le nombre d’or •   Doubles g...
Grilles macro-typo   101 /184Fonctionnement CSS
Grilles macro-typo   102 /184Grille verticale
Grilles macro-typo   103 /184Grille verticale  .col  {    width: 60px;    float: left; /* + hack   si nécessaire */    mar...
Grilles macro-typo     104 /184Grille verticale  #aside  {    width: 300px; /* (60 *   4) + (20 * 3) */    float: left;   ...
Grilles macro-typo   105 /184Grille verticale  .col  {    width: 60px;    float: left;    margin-left: 20px;  }
Grilles macro-typo   106 /184Grille verticale  .col  {    width: 60px;    float: left;    margin-left: 10px;    margin-rig...
Grilles macro-typo   107 /184Grille verticale  .first-child /* ou   :first-child */  {margin-left: 0;}  .last-child  {marg...
Grilles macro-typo   108 /184Grille horizontale
Grilles macro-typo          109 /184Grille horizontale – Rythme initial  html{font-size: 100,01%;}  body  {    font-size: ...
Grilles macro-typo          110 /184Grille horizontale  p   /* le body est fixé à 14 pixels */  {      font-size: 1em; /* ...
Grilles macro-typo           111 /184Grille horizontale  p  {      font-size: 1em;      line-height: 1.42867em;   /* soit ...
Grilles macro-typo          112 /184Grille horizontale  p  {      font-size: 1em;      line-height: 1.42867em; /* soit    ...
Grilles macro-typo   113 /184Techniques un peu plus avancées
Grilles macro-typo   114 /184Grille verticale
Grilles macro-typo    115 /184Grille verticale  .gutter-border  {    margin-right: 10px; /* 10 + (60 / 2) */    padding-ri...
Grilles macro-typo           116 /184Grille verticale  .col-border  {    margin-right: 40px; /* 10 + (60 /       2) */    ...
Grilles macro-typo   117 /184Grille horizontale
Grilles macro-typo           118 /184Grille horizontale  p  {      font-size: 1em; /* soit 14 pixels */      line-height: ...
Grilles macro-typo        119 /184Grille horizontale  p  {      font-size: 2em; /* soit 28 pixels */      line-height: 0.7...
Grilles macro-typo       120 /184Grille horizontale  p strong /* p est à 28 pixels */  {    font-size: ?em; /* on veut 32 ...
Grilles macro-typo   121 /184Démonstration           bit.ly/em-calculator
Grilles macro-typo       122 /184Grille horizontale  p strong /* p est à 28 pixels */  {    font-size: 1em; /* on obtient ...
Grilles macro-typo       123 /184Grille horizontale  p strong /* p est à 32 pixels */  {    font-size: 1em; /* on obtient ...
Grilles macro-typo       124 /184Grille horizontale  p strong /* p est à 32 pixels */  {    font-size: 1em; /* on obtient ...
Grilles macro-typo       125 /184Grille horizontale  p strong /* p est à 32 pixels */  {    font-size: 1em; /* on obtient ...
Grilles macro-typo    126 /184Grille horizontale  p strong /* p est à 28 pixels */  {    font-size: 32/28em; /* soit      ...
Grilles macro-typo      127 /184Grille horizontale  p strong /* p est à 28 pixels */  {    font-size: 32/28em; /* soit 32 ...
Grilles macro-typo      128 /184Grille horizontale  p strong /* p est à 32 pixels */  {    font-size: 36/32em; /* soit 36 ...
Grilles macro-typo      129 /184Grille horizontale  p strong /* p est à 32 pixels */  {    font-size: 36/32em; /* soit 36 ...
Grilles macro-typo      130 /184Grille horizontale  p strong /* p est à 28 pixels */  {    font-size: 32/28em; /* soit 32 ...
Grilles macro-typo   131 /184De bons outils
Grilles macro-typo   132 /184Normalize.css • Définir une base de travail • Disponible en deux versions            bit.ly/n...
Grilles macro-typo   133 /184Préprocesseurs CSS
Grilles macro-typo   134 /184Préprocesseurs CSS •Calculs simples •Tâches répétitives
Grilles macro-typo   135 /184Préprocesseurs CSS •Variables •Calculs •Fonctions •Héritage •Imbrications
Grilles macro-typo   136 /184Préprocesseurs CSS •Less •Sass (Sass et SassyCSS)  •Compass •Stylus
Grilles macro-typo   137 /184Préprocesseurs CSS – Mixins • adjust-font-size-to • padding-leader / margin-leader • padding-...
Grilles macro-typo   138 /184Préprocesseurs CSS – Mixins réécrits • font-size • padding-top / margin-top • padding-bottom ...
Grilles macro-typo   139 /184Préprocesseurs CSS – Mixins ajoutés • position-top / position-bottom • height / line-height •...
Grilles macro-typo       140 /184Préprocesseurs CSS – Texte p {   $fs1: 28px;   .font-size($fs1);   .line-height($fs1); .m...
Grilles macro-typo   141 /184Préprocesseurs CSS – Texte p {   $fs1: 28px;     .bloc($fs1);     strong {         $fs2: 32px...
Grilles macro-typo     142 /184Préprocesseurs CSS – Colonnes #content {      <div id="content">   #sidebar {       <div id...
Grilles macro-typo   143 /184Préprocesseurs CSS – RWD #article {   .span(8);   @media tablet {     .span(4);   }   @media ...
Grilles macro-typo   144 /184Préprocesseurs CSS – Configuration  $base-font-size: 14px;  $base-line-height: 20px;  $grid-w...
Grilles macro-typo   145 /184#grid • Contrôle de la grille • Aucune image, tout en CSS • À supprimer en production        ...
Grilles macro-typo   146 /184Démonstration           bit.ly/hash-grid-demo
Grilles macro-typo   147 /184La grille que nous vous proposons   •   Tout-terrain   •   Divisible   •   Modulaire   •   So...
Colonnes de 60 pixels
Gouttières de  20 pixels
Page :980 pixels
Interlignage  20 pixels
Corps de texte           14 pixelsLorem ipsum dolor sit amet, consectetur adipisicing elit, sed doeiusmod tempor incididun...
Grilles macro-typo   /184
Grilles macro-typo   /184
Grilles macro-typo   164 /184Troisième partieDans la pratique
Grilles macro-typo   165 /184Tout doit-il être aligné surla grille ?Non !  •Ce n’est pas toujours possible  •Ce n’est pas ...
Grilles macro-typo   166 /184Mon rythme vertical est cassé
Grilles macro-typo   167 /184Mon rythme vertical est cassé
Grilles macro-typo   168 /184Mon rythme vertical est cassé
Grilles macro-typo                          169 /184Mon rythme vertical est casséLorem ipsum dolor sit amet, consectetur a...
Grilles macro-typo                          170 /184Mon rythme vertical est cassé                                         ...
Grilles macro-typo                          171 /184Mon rythme vertical est casséLorem ipsum dolor sit amet, consectetur a...
Grilles macro-typo                          172 /184Mon rythme vertical est casséLorem ipsum dolor sit amet, consectetur a...
Grilles macro-typo                          173 /184Mon rythme vertical est casséLorem ipsum dolor sit amet, consectetur a...
Grilles macro-typo                          174 /184Mon rythme vertical est casséLorem ipsum dolor sit amet, consectetur a...
Grilles macro-typo   175 /184Réparer le rythme vertical •Compenser les pixels ajoutés •Fixer des hauteurs •Faire les calcu...
Grilles macro-typo   176 /184Compenser les pixels ajoutés#foo{! border-bottom: 10px solid pink;}
Grilles macro-typo   177 /184Compenser les pixels ajoutés#foo{! border-bottom: 10px solid pink;! margin-top: -10px;}
Grilles macro-typo   178 /184Compenser les pixels ajoutés#foo{! border-bottom: 10px solid pink;! margin-top: -10px;! posit...
Grilles macro-typo   179 /184Compenser les pixels ajoutés@mixin border-bottom($width: 1px,$style: solid, $color: black){! ...
Grilles macro-typo   180 /184Compenser les pixels ajoutés#foo{! .border-bottom! (10px, solid, pink);}
Grilles macro-typo   181 /184Fixer des hauteurs•Toujours travailler avec des unités relatives•Préférer les hauteurs minima...
Grilles macro-typo   182 /184Faire les calculs automatiquementjquery.baseline.js • Aucune configuration nécessaire • Des c...
Grilles macro-typo   183 /184Conclusion
Grilles macro-typo   184 /184Merci ! :-)   bit.ly/grilles-faciles@kreestal@htmlzg
Les grilles macro typo pour le web ? facile !
Les grilles macro typo pour le web ? facile !
Les grilles macro typo pour le web ? facile !
Les grilles macro typo pour le web ? facile !
Les grilles macro typo pour le web ? facile !
Les grilles macro typo pour le web ? facile !
Les grilles macro typo pour le web ? facile !
Les grilles macro typo pour le web ? facile !
Les grilles macro typo pour le web ? facile !
Les grilles macro typo pour le web ? facile !
Les grilles macro typo pour le web ? facile !
Les grilles macro typo pour le web ? facile !
Les grilles macro typo pour le web ? facile !
Les grilles macro typo pour le web ? facile !
Les grilles macro typo pour le web ? facile !
Les grilles macro typo pour le web ? facile !
Les grilles macro typo pour le web ? facile !
Les grilles macro typo pour le web ? facile !
Les grilles macro typo pour le web ? facile !
Les grilles macro typo pour le web ? facile !
Les grilles macro typo pour le web ? facile !
Les grilles macro typo pour le web ? facile !
Les grilles macro typo pour le web ? facile !
Les grilles macro typo pour le web ? facile !
Les grilles macro typo pour le web ? facile !
Les grilles macro typo pour le web ? facile !
Les grilles macro typo pour le web ? facile !
Upcoming SlideShare
Loading in...5
×

Les grilles macro typo pour le web ? facile !

4,872

Published on

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

Published in: Technology
0 Comments
6 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
4,872
On Slideshare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
92
Comments
0
Likes
6
Embeds 0
No embeds

No notes for slide

Les grilles macro typo pour le web ? facile !

  1. 1. Les grilles macro-typopour le web ? Facile !Marie GuillaumetVincent Valentin Paris Web 20 octobre 2012 1
  2. 2. Grilles macro-typo 2 /184Qui sommes-nous ?
  3. 3. Grilles macro-typo 3 /184Qui sommes-nous ?Marie GuillaumetWeb designer etdéveloppeur web front-endhttp://marieguillaumet.com/@kreestal bit.ly/site-marie
  4. 4. Grilles macro-typo 4 /184Qui sommes-nous ?Vincent ValentinDéveloppeur web front-endhttp://www.htmlzengarden.com/@htmlzg bit.ly/site-vincent
  5. 5. Grilles macro-typo 5 /184Avant-proposRetour d’expérience++pragmatisme−−démonstrations techniques avancées
  6. 6. Grilles macro-typo 6 /184Plan d’attaque ! 1.La grille toute puissante 2.Concevoir sa grille 3.La grille dans la pratique
  7. 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. 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. 9. Grilles macro-typo 9 /184Quelques définitions
  10. 10. Grilles macro-typo /184Colonnes
  11. 11. Grilles macro-typo /184
  12. 12. Grilles macro-typo /184Gouttières
  13. 13. Grilles macro-typo /184
  14. 14. Grilles macro-typo /184
  15. 15. Grilles macro-typo /184
  16. 16. Grilles macro-typo /184Ligne de base
  17. 17. Grilles macro-typo /184Ligne de base
  18. 18. Grilles macro-typo /184
  19. 19. Grilles macro-typo /184
  20. 20. Grilles macro-typo 20 /184Première partieLa grille toute puissante
  21. 21. Grilles macro-typo 21 /184Print vs Web : •une filiation évidente •un fossé technique immense
  22. 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. 23. Grilles macro-typo 23 /184
  24. 24. Grilles macro-typo 24 /184Un outil commun : la grille.Unité. Harmonie. Rythme.
  25. 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. 26. Grilles macro-typo 26 /184La grille dans l’histoire
  27. 27. Grilles macro-typo 27 /184Écriture et architecture3400 avant J.C. : écritures cunéiformes
  28. 28. Grilles macro-typo 28 /184
  29. 29. Grilles macro-typo 29 /184Écriture et architecture2670 à 2450 avant J.C. : pyramides deGuizeh, construites avec le nombre dor
  30. 30. Grilles macro-typo 30 /184
  31. 31. Grilles macro-typo 31 /184Écriture et architecture449 à 438 avant J.C. : le ParthénonOptique, proportions, nombre dor
  32. 32. Grilles macro-typo 32 /184
  33. 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. 34. Grilles macro-typo 34 /184MondrianComposition avecjaune, bleu et rouge(1939-1942)
  35. 35. Grilles macro-typo 35 /184MorelletReflets dans l’eaudéformés parle spectateur(1964)
  36. 36. Grilles macro-typo 36 /184BurenLes deux plateaux(1996)
  37. 37. Grilles macro-typo 37 /184
  38. 38. Grilles macro-typo 38 /184Graphisme contemporainStyle suisse : prise de pouvoir del’utilitaire sur l’expression personnelle.Utilisation systématique de la grille.
  39. 39. Grilles macro-typo 39 /184Emil Ruder(1914–1970)
  40. 40. Grilles macro-typo 40 /184Emil Ruder(1914–1970)
  41. 41. Grilles macro-typo 41 /184Josef Müller-Brockmann(1914–1996)
  42. 42. Grilles macro-typo 42 /184Josef Müller-Brockmann(1914–1996)
  43. 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. 44. Grilles macro-typo 44 /184Appuyons-nous sur ces principesplastiques fiables.Affinons notre regard à la lumièrede cet héritage pluridisciplinaire.
  45. 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. 46. Grilles macro-typo 46 /184Les web designers et la grille :une histoire passionnelle !
  47. 47. Grilles macro-typo 47 /184La grille, un frein à la créativité ?
  48. 48. Grilles macro-typo 50 /184La grille est un squelette une charpente un guide
  49. 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. 50. Grilles macro-typo 52 /184Deuxième partieConcevoir sa grille
  51. 51. Grilles macro-typo 53 /184Il nexiste pas une grille.Il existe une infinité de grilles.
  52. 52. Grilles macro-typo 54 /184À chaque web designer deconcevoir sa grille en fonction ducontenu du site et de ses choixesthétiques.
  53. 53. Grilles macro-typo 55 /184C’est l’usage du site qui doitprévaloir dans le choix de la grille.
  54. 54. Grilles macro-typo 56 /184Quelle grille choisir ?Deux approches : 1. Grille fluide ou élastique 2. Grille à largeur fixe
  55. 55. Grilles macro-typo 57 /184Définir sa grille
  56. 56. Grilles macro-typo 58 /184Définir sa grilleGrille verticale •largeur de page •largeur de gouttière •largeur de colonne •nombre de colonnes
  57. 57. Grilles macro-typo 59 /184Définir sa grilleGrille verticale •largeur de page •largeur de gouttière •largeur de colonne •nombre de colonnes
  58. 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. 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. 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. 61. Grilles macro-typo 63 /184Définir sa grille •S’aider de formules •S’aider d’outils visuels
  62. 62. Grilles macro-typo 64 /184Démonstration bit.ly/grid-calc bit.ly/scale-rhythm
  63. 63. Grilles macro-typo 65 /184Définir sa grille : choisir •Grille verticale en unités absolues •Grille horizontale en unités relatives
  64. 64. Grilles macro-typo 66 /184Démonstration bit.ly/marges-px-em
  65. 65. Grilles macro-typo 67 /184Et pour le RWD ? •Écrans larges : tailles maîtrisées •Écrans mobiles : pas d’espace à perdre
  66. 66. Grilles macro-typo 68 /184Configurer sa grille : Photoshop+ GuideGuide http://www.guideguide.me/ bit.ly/guide-guide
  67. 67. Grilles macro-typo 69 /184Démonstration bit.ly/guide-guide
  68. 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. 69. Grilles macro-typo 71 /184La grille sur le web : exemples
  70. 70. Grilles macro-typo 72 /184Grille à colonnes égales++Grille adaptable à toutes les situations−−La plus courante
  71. 71. Grilles macro-typo 73 /184http://www.lyon.archi.fr/ bit.ly/lyon-archi
  72. 72. Grilles macro-typo 76 /184http://www.enssib.fr/ bit.ly/école-enssib
  73. 73. Grilles macro-typo 79 /184http://www.foncia-location-vacances.fr/ bit.ly/foncia-vacances
  74. 74. Grilles macro-typo 82 /184Grille modulaire++Qualités graphiques et organisationnelles−−Suppose des blocs de hauteur fixe
  75. 75. Grilles macro-typo 83 /184http://www.hattienewman.co.uk/ bit.ly/hattie-newman
  76. 76. Grilles macro-typo 86 /184http://promisetangeman.com/ bit.ly/promise-tangeman
  77. 77. Grilles macro-typo 89 /184http://volumique.com/v2/ bit.ly/volumique-v2
  78. 78. Grilles macro-typo 92 /184http://manchesterwire.co.uk/ bit.ly/manchester-wire
  79. 79. Grilles macro-typo 93 /184Grille modulaire « éclatée »Le meilleur des deux mondes ?
  80. 80. Grilles macro-typo 94 /184http://pinterest.com/ bit.ly/grid-pinterest
  81. 81. Grilles macro-typo 97 /184http://www.flowfestival.com/ bit.ly/flow-festival
  82. 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. 83. Grilles macro-typo 101 /184Fonctionnement CSS
  84. 84. Grilles macro-typo 102 /184Grille verticale
  85. 85. Grilles macro-typo 103 /184Grille verticale .col { width: 60px; float: left; /* + hack si nécessaire */ margin-right: 20px; }
  86. 86. Grilles macro-typo 104 /184Grille verticale #aside { width: 300px; /* (60 * 4) + (20 * 3) */ float: left; margin-right: 20px; }
  87. 87. Grilles macro-typo 105 /184Grille verticale .col { width: 60px; float: left; margin-left: 20px; }
  88. 88. Grilles macro-typo 106 /184Grille verticale .col { width: 60px; float: left; margin-left: 10px; margin-right: 10px; }
  89. 89. Grilles macro-typo 107 /184Grille verticale .first-child /* ou :first-child */ {margin-left: 0;} .last-child {margin-right: 0;}
  90. 90. Grilles macro-typo 108 /184Grille horizontale
  91. 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. 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. 93. Grilles macro-typo 111 /184Grille horizontale p { font-size: 1em; line-height: 1.42867em; /* soit 20 pixels */ margin-top: 1.42867em; }
  94. 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. 95. Grilles macro-typo 113 /184Techniques un peu plus avancées
  96. 96. Grilles macro-typo 114 /184Grille verticale
  97. 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. 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. 99. Grilles macro-typo 117 /184Grille horizontale
  100. 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. 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. 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. 103. Grilles macro-typo 121 /184Démonstration bit.ly/em-calculator
  104. 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. 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. 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. 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. 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. 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. 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. 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. 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. 113. Grilles macro-typo 131 /184De bons outils
  114. 114. Grilles macro-typo 132 /184Normalize.css • Définir une base de travail • Disponible en deux versions bit.ly/normalize-demo
  115. 115. Grilles macro-typo 133 /184Préprocesseurs CSS
  116. 116. Grilles macro-typo 134 /184Préprocesseurs CSS •Calculs simples •Tâches répétitives
  117. 117. Grilles macro-typo 135 /184Préprocesseurs CSS •Variables •Calculs •Fonctions •Héritage •Imbrications
  118. 118. Grilles macro-typo 136 /184Préprocesseurs CSS •Less •Sass (Sass et SassyCSS) •Compass •Stylus
  119. 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. 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. 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. 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. 123. Grilles macro-typo 141 /184Préprocesseurs CSS – Texte p { $fs1: 28px; .bloc($fs1); strong { $fs2: 32px; .bloc($fs2, $fs1); } }
  124. 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. 125. Grilles macro-typo 143 /184Préprocesseurs CSS – RWD #article { .span(8); @media tablet { .span(4); } @media smartphone { float: none; width: auto; .first; } }
  126. 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. 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. 128. Grilles macro-typo 146 /184Démonstration bit.ly/hash-grid-demo
  129. 129. Grilles macro-typo 147 /184La grille que nous vous proposons • Tout-terrain • Divisible • Modulaire • Souple
  130. 130. Colonnes de 60 pixels
  131. 131. Gouttières de 20 pixels
  132. 132. Page :980 pixels
  133. 133. Interlignage 20 pixels
  134. 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. 135. Grilles macro-typo /184
  136. 136. Grilles macro-typo /184
  137. 137. Grilles macro-typo 164 /184Troisième partieDans la pratique
  138. 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. 139. Grilles macro-typo 166 /184Mon rythme vertical est cassé
  140. 140. Grilles macro-typo 167 /184Mon rythme vertical est cassé
  141. 141. Grilles macro-typo 168 /184Mon rythme vertical est cassé
  142. 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. 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. 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. 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. 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. 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. 148. Grilles macro-typo 175 /184Réparer le rythme vertical •Compenser les pixels ajoutés •Fixer des hauteurs •Faire les calculs automatiquement
  149. 149. Grilles macro-typo 176 /184Compenser les pixels ajoutés#foo{! border-bottom: 10px solid pink;}
  150. 150. Grilles macro-typo 177 /184Compenser les pixels ajoutés#foo{! border-bottom: 10px solid pink;! margin-top: -10px;}
  151. 151. Grilles macro-typo 178 /184Compenser les pixels ajoutés#foo{! border-bottom: 10px solid pink;! margin-top: -10px;! position: relative;! top: 10px;}
  152. 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. 153. Grilles macro-typo 180 /184Compenser les pixels ajoutés#foo{! .border-bottom! (10px, solid, pink);}
  154. 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. 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. 156. Grilles macro-typo 183 /184Conclusion
  157. 157. Grilles macro-typo 184 /184Merci ! :-) bit.ly/grilles-faciles@kreestal@htmlzg
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×