SlideShare una empresa de Scribd logo
1 de 184
Descargar para leer sin conexión
Les grilles macro-typo
pour le web ? Facile !
Marie Guillaumet
Vincent Valentin
                         Paris Web
                   20 octobre 2012



                       1
Grilles macro-typo   2 /184




Qui sommes-nous ?
Grilles macro-typo   3 /184




Qui sommes-nous ?

Marie Guillaumet
Web designer et
développeur web front-end

http://marieguillaumet.com/
@kreestal

              bit.ly/site-marie
Grilles macro-typo   4 /184




Qui sommes-nous ?

Vincent Valentin
Développeur web front-end

http://www.htmlzengarden.com/
@htmlzg

             bit.ly/site-vincent
Grilles macro-typo   5 /184




Avant-propos
Retour d’expérience
++pragmatisme
−−démonstrations techniques avancées
Grilles macro-typo   6 /184




Plan d’attaque !
 1.La grille toute puissante
 2.Concevoir sa grille
 3.La grille dans la pratique
Grilles macro-typo   7 /184




Objectifs

 • Donner envie aux développeurs web
   front-end et aux web designers
   d’utiliser la grille
 • Fournir une méthodologie de travail
Grilles macro-typo   8 /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.
Grilles macro-typo   9 /184




Quelques définitions
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   20 /184




Première partie
La grille toute puissante
Grilles macro-typo   21 /184




Print vs Web :
 •une filiation évidente
 •un fossé technique immense
Grilles macro-typo   22 /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.
Grilles macro-typo   23 /184
Grilles macro-typo   24 /184




Un outil commun : la grille.

Unité. Harmonie. Rythme.
Grilles macro-typo   25 /184




Offrir au regard des contenus
clairs, agréables à lire, dans
lesquels on se repère aisément.

  ++ Lisibilité
  ++ Accessibilité
  ++ Capitaliser sur l'apprentissage
Grilles macro-typo   26 /184




La grille dans l’histoire
Grilles macro-typo   27 /184




Écriture et architecture
3400 avant J.C. : écritures cunéiformes
Grilles macro-typo   28 /184
Grilles macro-typo   29 /184




Écriture et architecture
2670 à 2450 avant J.C. : pyramides de
Guizeh, construites avec le nombre d'or
Grilles macro-typo   30 /184
Grilles macro-typo   31 /184




Écriture et architecture
449 à 438 avant J.C. : le Parthénon

Optique, proportions, nombre d'or
Grilles macro-typo   32 /184
Grilles macro-typo   33 /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.
Grilles macro-typo   34 /184




Mondrian
Composition avec
jaune, bleu et rouge
(1939-1942)
Grilles macro-typo   35 /184




Morellet
Reflets dans l’eau
déformés par
le spectateur
(1964)
Grilles macro-typo   36 /184




Buren
Les deux plateaux
(1996)
Grilles macro-typo   37 /184
Grilles macro-typo   38 /184




Graphisme contemporain
Style suisse : prise de pouvoir de
l’utilitaire sur l’expression personnelle.

Utilisation systématique de la grille.
Grilles macro-typo   39 /184




Emil Ruder
(1914–1970)
Grilles macro-typo   40 /184




Emil Ruder
(1914–1970)
Grilles macro-typo   41 /184




Josef Müller-
Brockmann
(1914–1996)
Grilles macro-typo   42 /184




Josef Müller-
Brockmann
(1914–1996)
Grilles macro-typo   43 /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.
Grilles macro-typo   44 /184




Appuyons-nous sur ces principes
plastiques fiables.

Affinons notre regard à la lumière
de cet héritage pluridisciplinaire.
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.
Grilles macro-typo   46 /184




Les web designers et la grille :
une histoire passionnelle !
Grilles macro-typo   47 /184




La grille, un frein à la créativité ?
Lesgrillesmacro typopourlewebfacile-121021043933-phpapp02
Lesgrillesmacro typopourlewebfacile-121021043933-phpapp02
Grilles macro-typo   50 /184




La grille est un squelette
           une charpente
            un guide
Grilles macro-typo    51 /184




Les 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
Grilles macro-typo   52 /184




Deuxième partie
Concevoir sa grille
Grilles macro-typo   53 /184




Il n'existe pas une grille.

Il existe une infinité de grilles.
Grilles macro-typo   54 /184




À chaque web designer de
concevoir sa grille en fonction du
contenu du site et de ses choix
esthétiques.
Grilles macro-typo   55 /184




C’est l’usage du site qui doit
prévaloir dans le choix de la grille.
Grilles macro-typo   56 /184




Quelle grille choisir ?
Deux approches :
 1. Grille fluide ou élastique
 2. Grille à largeur fixe
Grilles macro-typo   57 /184




Définir sa grille
Grilles macro-typo   58 /184




Définir sa grille
Grille verticale

 •largeur de page
 •largeur de gouttière
 •largeur de colonne
 •nombre de colonnes
Grilles macro-typo   59 /184




Définir sa grille
Grille verticale

 •largeur de page
 •largeur de gouttière
 •largeur de colonne
 •nombre de colonnes
Grilles macro-typo   60 /184




Définir sa grille
Grille verticale         Grille horizontale

 •largeur de page         •corps de texte
 •largeur de gouttière    •hauteur de ligne
 •largeur de colonne
 •nombre de colonnes
Grilles macro-typo   61 /184




Définir sa grille
Grille verticale         Grille horizontale

 •largeur de page         •corps de texte
 •largeur de gouttière    •hauteur de ligne
 •largeur de colonne
 •nombre de colonnes
Grilles macro-typo   62 /184




Définir sa grille
Grille verticale         Grille horizontale

 •largeur de page         •corps de texte
 •largeur de gouttière    •hauteur de ligne
 •largeur de colonne
 •nombre de colonnes
Grilles macro-typo   63 /184




Définir sa grille

  •S’aider de formules
  •S’aider d’outils visuels
Grilles macro-typo   64 /184




Démonstration




           bit.ly/grid-calc
           bit.ly/scale-rhythm
Grilles macro-typo   65 /184




Définir sa grille : choisir

  •Grille verticale en unités absolues
  •Grille horizontale en unités relatives
Grilles macro-typo   66 /184




Démonstration




           bit.ly/marges-px-em
Grilles macro-typo   67 /184




Et pour le RWD ?
 •Écrans larges : tailles maîtrisées
 •Écrans mobiles : pas d’espace à perdre
Grilles macro-typo   68 /184




Configurer sa grille :
  Photoshop
+ GuideGuide
  http://www.guideguide.me/




               bit.ly/guide-guide
Grilles macro-typo   69 /184




Démonstration




           bit.ly/guide-guide
Grilles macro-typo      70 /184




Attention !
 1. Choisir un interlignage égal à la largeur
    des gouttières

 2. Placer le texte entre les lignes de base
Grilles macro-typo   71 /184




La grille sur le web : exemples
Grilles macro-typo   72 /184




Grille à colonnes égales

++Grille adaptable à toutes les situations
−−La plus courante
Grilles macro-typo   73 /184




http://www.lyon.archi.fr/




             bit.ly/lyon-archi
Lesgrillesmacro typopourlewebfacile-121021043933-phpapp02
Lesgrillesmacro typopourlewebfacile-121021043933-phpapp02
Grilles macro-typo   76 /184




http://www.enssib.fr/




            bit.ly/école-enssib
Lesgrillesmacro typopourlewebfacile-121021043933-phpapp02
Lesgrillesmacro typopourlewebfacile-121021043933-phpapp02
Grilles macro-typo   79 /184




http://www.foncia-location-vacances.fr/




              bit.ly/foncia-vacances
Lesgrillesmacro typopourlewebfacile-121021043933-phpapp02
Lesgrillesmacro typopourlewebfacile-121021043933-phpapp02
Grilles macro-typo    82 /184




Grille modulaire

++Qualités graphiques et organisationnelles
−−Suppose des blocs de hauteur fixe
Grilles macro-typo   83 /184




http://www.hattienewman.co.uk/




           bit.ly/hattie-newman
Lesgrillesmacro typopourlewebfacile-121021043933-phpapp02
Lesgrillesmacro typopourlewebfacile-121021043933-phpapp02
Grilles macro-typo   86 /184




http://promisetangeman.com/




           bit.ly/promise-tangeman
Lesgrillesmacro typopourlewebfacile-121021043933-phpapp02
Lesgrillesmacro typopourlewebfacile-121021043933-phpapp02
Grilles macro-typo   89 /184




http://volumique.com/v2/




            bit.ly/volumique-v2
Lesgrillesmacro typopourlewebfacile-121021043933-phpapp02
Lesgrillesmacro typopourlewebfacile-121021043933-phpapp02
Grilles macro-typo   92 /184




http://manchesterwire.co.uk/




            bit.ly/manchester-wire
Grilles macro-typo   93 /184




Grille modulaire « éclatée »

Le meilleur des deux mondes ?
Grilles macro-typo   94 /184




http://pinterest.com/




            bit.ly/grid-pinterest
Lesgrillesmacro typopourlewebfacile-121021043933-phpapp02
Lesgrillesmacro typopourlewebfacile-121021043933-phpapp02
Grilles macro-typo   97 /184




http://www.flowfestival.com/




            bit.ly/flow-festival
Lesgrillesmacro typopourlewebfacile-121021043933-phpapp02
Lesgrillesmacro typopourlewebfacile-121021043933-phpapp02
Grilles macro-typo   100 /184




D’autres expérimentations sont
possibles :
 •   Grilles basées sur le nombre d’or
 •   Doubles grilles
 •   Grilles à colonnes inégales
 •   Etc.
Grilles macro-typo   101 /184




Fonctionnement CSS
Grilles macro-typo   102 /184




Grille verticale
Grilles macro-typo   103 /184




Grille verticale
  .col
  {
    width: 60px;
    float: left; /* + hack   si nécessaire */
    margin-right: 20px;

  }
Grilles macro-typo     104 /184




Grille verticale
  #aside
  {
    width: 300px; /* (60 *   4) + (20 * 3) */
    float: left;
    margin-right: 20px;

  }
Grilles macro-typo   105 /184




Grille verticale
  .col
  {
    width: 60px;
    float: left;
    margin-left: 20px;

  }
Grilles macro-typo   106 /184




Grille verticale
  .col
  {
    width: 60px;
    float: left;
    margin-left: 10px;
    margin-right: 10px;
  }
Grilles macro-typo   107 /184




Grille verticale
  .first-child /* ou   :first-child */
  {margin-left: 0;}

  .last-child
  {margin-right: 0;}
Grilles macro-typo   108 /184




Grille horizontale
Grilles macro-typo          109 /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 */
  }
Grilles macro-typo          110 /184




Grille 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;

  }
Grilles macro-typo           111 /184




Grille horizontale
  p
  {
      font-size: 1em;
      line-height: 1.42867em;   /* soit 20 pixels */
      margin-top: 1.42867em;

  }
Grilles macro-typo          112 /184




Grille horizontale
  p
  {
      font-size: 1em;
      line-height: 1.42867em; /* soit    20 pixels */
      margin-top: 1.42867em; /* fusion   */
      margin-bottom: 1.42867em;
  }
Grilles macro-typo   113 /184




Techniques un peu plus avancées
Grilles macro-typo   114 /184




Grille verticale
Grilles macro-typo    115 /184




Grille verticale
  .gutter-border
  {
    margin-right: 10px; /* 10 + (60 / 2) */
    padding-right: 9px; /* 9 + (60 / 2) */
    border-right: 1px solid pink;
  }
Grilles macro-typo           116 /184




Grille verticale
  .col-border
  {
    margin-right: 40px; /* 10 + (60 /       2) */
    padding-right: 39px; /* 9 + (60 /       2) */
    border-right: 1px solid pink;
  }
Grilles macro-typo   117 /184




Grille horizontale
Grilles macro-typo           118 /184




Grille horizontale
  p
  {
      font-size: 1em; /* soit 14 pixels */
      line-height: 1.42867em; /* soit 20         px */
      margin-bottom: 1.42867em;

  }
Grilles macro-typo        119 /184




Grille horizontale
  p
  {
      font-size: 2em; /* soit 28 pixels */
      line-height: 0.71428em; /* 1.42em       / 2 */
      margin-bottom: 0.71428em;

  }
Grilles macro-typo       120 /184




Grille horizontale
  p strong /* p est à 28 pixels */
  {
    font-size: ?em; /* on veut 32    pixels */
    line-height: ?em; /* on veut     20 pixels */
    margin-bottom: ?em;

  }
Grilles macro-typo   121 /184




Démonstration




           bit.ly/em-calculator
Grilles macro-typo       122 /184




Grille 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;
  }
Grilles macro-typo       123 /184




Grille 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;
  }
Grilles macro-typo       124 /184




Grille 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;
  }
Grilles macro-typo       125 /184




Grille 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;
  }
Grilles macro-typo    126 /184




Grille horizontale
  p strong /* p est à 28 pixels */
  {
    font-size: 32/28em; /* soit      32 pixels */
    line-height: ?em; /* on veut     20 pixels */
    margin-bottom: ?em;


  }
Grilles macro-typo      127 /184




Grille 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;

  }
Grilles macro-typo      128 /184




Grille 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;

  }
Grilles macro-typo      129 /184




Grille 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;

  }
Grilles macro-typo      130 /184




Grille 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;


  }
Grilles macro-typo   131 /184




De bons outils
Grilles macro-typo   132 /184




Normalize.css
 • Définir une base de travail
 • Disponible en deux versions




            bit.ly/normalize-demo
Grilles macro-typo   133 /184




Préprocesseurs CSS
Grilles macro-typo   134 /184




Préprocesseurs CSS
 •Calculs simples
 •Tâches répétitives
Grilles macro-typo   135 /184




Préprocesseurs CSS
 •Variables
 •Calculs
 •Fonctions
 •Héritage
 •Imbrications
Grilles macro-typo   136 /184




Préprocesseurs CSS
 •Less
 •Sass (Sass et SassyCSS)
  •Compass
 •Stylus
Grilles macro-typo   137 /184




Préprocesseurs CSS – Mixins
 • adjust-font-size-to
 • padding-leader / margin-leader
 • padding-trailer / margin-trailer
 • establish-baseline
 • Etc.

             bit.ly/compass-rhythm
Grilles macro-typo   138 /184




Préprocesseurs CSS – Mixins réécrits
 • font-size
 • padding-top / margin-top
 • padding-bottom / margin-bottom
 • line-height
 • Etc.
Grilles macro-typo   139 /184




Préprocesseurs CSS – Mixins ajoutés
 • position-top / position-bottom
 • height / line-height
 • border-top / border-bottom
 • bloc
 • Etc.
Grilles macro-typo       140 /184




Pré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);
     }
 }
Grilles macro-typo   141 /184




Préprocesseurs CSS – Texte
 p {
   $fs1: 28px;

     .bloc($fs1);

     strong {

         $fs2: 32px;

         .bloc($fs2, $fs1);
     }
 }
Grilles macro-typo     142 /184




Pré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>
Grilles macro-typo   143 /184




Préprocesseurs CSS – RWD
 #article {
   .span(8);
   @media tablet {
     .span(4);
   }
   @media smartphone {
     float: none; width: auto; .first;
   }
 }
Grilles macro-typo   144 /184




Pré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;
Grilles macro-typo   145 /184




#grid
 • Contrôle de la grille
 • Aucune image, tout en CSS
 • À supprimer en production



           bit.ly/hash-grid
Grilles macro-typo   146 /184




Démonstration




           bit.ly/hash-grid-demo
Grilles macro-typo   147 /184




La grille que nous vous proposons
   •   Tout-terrain
   •   Divisible
   •   Modulaire
   •   Souple
Lesgrillesmacro typopourlewebfacile-121021043933-phpapp02
Lesgrillesmacro typopourlewebfacile-121021043933-phpapp02
Lesgrillesmacro typopourlewebfacile-121021043933-phpapp02
Lesgrillesmacro typopourlewebfacile-121021043933-phpapp02
Lesgrillesmacro typopourlewebfacile-121021043933-phpapp02
Lesgrillesmacro typopourlewebfacile-121021043933-phpapp02
Lesgrillesmacro typopourlewebfacile-121021043933-phpapp02
Lesgrillesmacro typopourlewebfacile-121021043933-phpapp02
Lesgrillesmacro typopourlewebfacile-121021043933-phpapp02
Colonnes de
 60 pixels
Gouttières de
  20 pixels
Page :
980 pixels
Interlignage
  20 pixels
Corps de texte
           14 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.
Grilles macro-typo   /184
Grilles macro-typo   /184
Grilles macro-typo   164 /184




Troisième partie
Dans la pratique
Grilles macro-typo   165 /184




Tout doit-il être aligné sur
la grille ?
Non !

  •Ce n’est pas toujours possible
  •Ce n’est pas toujours souhaité
Grilles macro-typo   166 /184




Mon rythme vertical est cassé
Grilles macro-typo   167 /184




Mon rythme vertical est cassé
Grilles macro-typo   168 /184




Mon rythme vertical est cassé
Grilles macro-typo                          169 /184




Mon rythme vertical est cassé
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor   Lorem ipsum dolor sit
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis        amet, consectetur
nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.     adipisicing elit, sed do
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu   eiusmod tempor incididunt
fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in    ut labore et dolore magna
culpa qui officia deserunt mollit anim id est laborum.                            aliqua. Ut enim ad minim
                                                                                  veniam, quis nostrud
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor   exercitation ullamco
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis        laboris nisi ut aliquip ex ea
nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.     commodo consequat. Duis
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu   aute irure dolor in
fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in    reprehenderit in voluptate
culpa 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 occaecat
incididunt 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 officia
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu   deserunt mollit anim id est
fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in    laborum.
culpa qui officia deserunt mollit anim id est laborum.
Grilles macro-typo                          170 /184




Mon rythme vertical est cassé
                                                                                  Lorem ipsum dolor sit

Lorem ipsum dolor sit                                                             amet, consectetur
                                                                                  adipisicing elit, sed do
                                                                                  eiusmod tempor incididunt

amet, consectetur                                                                 ut labore et dolore magna
                                                                                  aliqua. Ut enim ad minim
                                                                                  veniam, quis nostrud
                                                                                  exercitation ullamco
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
                                                                                  laboris nisi ut aliquip ex ea
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
                                                                                  commodo consequat. Duis
nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                                                                                  aute irure dolor in
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
                                                                                  reprehenderit in voluptate
fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
                                                                                  velit esse cillum dolore eu
culpa qui officia deserunt mollit anim id est laborum.
                                                                                  fugiat nulla pariatur.
                                                                                  Excepteur sint occaecat
Lorem 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 officia
nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                                                                                  deserunt mollit anim id est
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
                                                                                  laborum.
fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.
Grilles macro-typo                          171 /184




Mon rythme vertical est cassé
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor   Lorem ipsum dolor sit
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis        amet, consectetur
nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.     adipisicing elit, sed do
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu   eiusmod tempor incididunt
fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in    ut labore et dolore magna
culpa qui officia deserunt mollit anim id est laborum.                            aliqua. Ut enim ad minim
                                                                                  veniam, quis nostrud
                                                                                  exercitation ullamco
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
                                                                                  laboris nisi ut aliquip ex ea
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
                                                                                  commodo consequat. Duis
nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                                                                                  aute irure dolor in
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
                                                                                  reprehenderit in voluptate
fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
                                                                                  velit esse cillum dolore eu
culpa qui officia deserunt mollit anim id est laborum.
                                                                                  fugiat nulla pariatur.
                                                                                  Excepteur sint occaecat
Lorem 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 officia
nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                                                                                  deserunt mollit anim id est
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
                                                                                  laborum.
fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.
Grilles macro-typo                          172 /184




Mon rythme vertical est cassé
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor   Lorem ipsum dolor sit
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis        amet, consectetur
nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.     adipisicing elit, sed do
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu   eiusmod tempor incididunt
fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in    ut labore et dolore magna
culpa 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 occaecat
Lorem 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 officia
nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                                                                                  deserunt mollit anim id est
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
                                                                                  laborum.
fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.
Grilles macro-typo                          173 /184




Mon rythme vertical est cassé
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor   Lorem ipsum dolor sit
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis        amet, consectetur
nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.     adipisicing elit, sed do
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu   eiusmod tempor incididunt
fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in    ut labore et dolore magna
culpa qui officia deserunt mollit anim id est laborum.                            aliqua. Ut enim ad minim
                                                                                  veniam, quis nostrud
                                                                                  exercitation ullamco
Lorem ipsum                                                                       laboris nisi ut aliquip ex ea
                                                                                  commodo consequat. Duis
                                                                                  aute irure dolor in
Dolor sit amet                                                                    reprehenderit in voluptate
                                                                                  velit esse cillum dolore eu
                                                                                  fugiat nulla pariatur.
                                                                                  Excepteur sint occaecat
Lorem 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 officia
nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                                                                                  deserunt mollit anim id est
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
                                                                                  laborum.
fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.
Grilles macro-typo                          174 /184




Mon rythme vertical est cassé
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor   Lorem ipsum dolor sit
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis        amet, consectetur
nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.     adipisicing elit, sed do
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu   eiusmod tempor incididunt
fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in    ut labore et dolore magna
culpa 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 occaecat
Lorem 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 officia
nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                                                                                  deserunt mollit anim id est
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
                                                                                  laborum.
fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.
Grilles macro-typo   175 /184




Réparer le rythme vertical

 •Compenser les pixels ajoutés
 •Fixer des hauteurs
 •Faire les calculs automatiquement
Grilles macro-typo   176 /184




Compenser les pixels ajoutés

#foo
{
! border-bottom: 10px solid pink;



}
Grilles macro-typo   177 /184




Compenser les pixels ajoutés

#foo
{
! border-bottom: 10px solid pink;
! margin-top: -10px;


}
Grilles macro-typo   178 /184




Compenser les pixels ajoutés

#foo
{
! border-bottom: 10px solid pink;
! margin-top: -10px;
! position: relative;
! top: 10px;
}
Grilles macro-typo   179 /184




Compenser 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;
}
Grilles macro-typo   180 /184




Compenser les pixels ajoutés

#foo
{
! .border-bottom
! (10px, solid, pink);
}
Grilles macro-typo   181 /184




Fixer des hauteurs

•Toujours travailler avec des unités
 relatives
•Préférer les hauteurs minimales aux
 hauteurs fixes
Grilles macro-typo   182 /184




Faire les calculs automatiquement
jquery.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
Grilles macro-typo   183 /184




Conclusion
Grilles macro-typo   184 /184




Merci ! :-)   bit.ly/grilles-faciles




@kreestal
@htmlzg

Más contenido relacionado

Destacado

Cultura com Tempero e Sabor
Cultura com Tempero e SaborCultura com Tempero e Sabor
Cultura com Tempero e SaborCarolina Sá
 
[플래텀] 2014 스타트업 신규투자동향 보고서
[플래텀] 2014 스타트업 신규투자동향 보고서[플래텀] 2014 스타트업 신규투자동향 보고서
[플래텀] 2014 스타트업 신규투자동향 보고서Platum
 
Hack x crack_scapy pdfreebooks1.blogspot.com
Hack x crack_scapy pdfreebooks1.blogspot.comHack x crack_scapy pdfreebooks1.blogspot.com
Hack x crack_scapy pdfreebooks1.blogspot.comDiego Caceres
 
Evolucion.de.la.moda
Evolucion.de.la.modaEvolucion.de.la.moda
Evolucion.de.la.modamarinade1234
 
1.la indumentaria de 1868 a 1914 ii
1.la indumentaria  de 1868 a 1914 ii1.la indumentaria  de 1868 a 1914 ii
1.la indumentaria de 1868 a 1914 iiOrlando Rodríguez
 
08 10102 10_carles_moreno_idc38913
08 10102 10_carles_moreno_idc3891308 10102 10_carles_moreno_idc38913
08 10102 10_carles_moreno_idc38913Tito0104
 
Europa, modernidade e eurocentrismo DUSSEL, Enrique
Europa, modernidade e eurocentrismo DUSSEL, EnriqueEuropa, modernidade e eurocentrismo DUSSEL, Enrique
Europa, modernidade e eurocentrismo DUSSEL, EnriqueDiego Carlesso
 
Tradeoffs in Automatic Provenance Capture
Tradeoffs in Automatic Provenance CaptureTradeoffs in Automatic Provenance Capture
Tradeoffs in Automatic Provenance CapturePaul Groth
 
Provenance for Data Munging Environments
Provenance for Data Munging EnvironmentsProvenance for Data Munging Environments
Provenance for Data Munging EnvironmentsPaul Groth
 
Estudio sobre la piratería y las descargas ilegales.
Estudio sobre la piratería y las descargas ilegales.Estudio sobre la piratería y las descargas ilegales.
Estudio sobre la piratería y las descargas ilegales.Luis Miguel Beneitez Garcia
 

Destacado (16)

Cultura com Tempero e Sabor
Cultura com Tempero e SaborCultura com Tempero e Sabor
Cultura com Tempero e Sabor
 
Capitalismo
CapitalismoCapitalismo
Capitalismo
 
[플래텀] 2014 스타트업 신규투자동향 보고서
[플래텀] 2014 스타트업 신규투자동향 보고서[플래텀] 2014 스타트업 신규투자동향 보고서
[플래텀] 2014 스타트업 신규투자동향 보고서
 
El impacto social de las revistas científicas. Dr. Alejandro Márquez Jiménez
El impacto social de las revistas científicas. Dr. Alejandro Márquez JiménezEl impacto social de las revistas científicas. Dr. Alejandro Márquez Jiménez
El impacto social de las revistas científicas. Dr. Alejandro Márquez Jiménez
 
Hack x crack_scapy pdfreebooks1.blogspot.com
Hack x crack_scapy pdfreebooks1.blogspot.comHack x crack_scapy pdfreebooks1.blogspot.com
Hack x crack_scapy pdfreebooks1.blogspot.com
 
Evolucion.de.la.moda
Evolucion.de.la.modaEvolucion.de.la.moda
Evolucion.de.la.moda
 
1.la indumentaria de 1868 a 1914 ii
1.la indumentaria  de 1868 a 1914 ii1.la indumentaria  de 1868 a 1914 ii
1.la indumentaria de 1868 a 1914 ii
 
08 10102 10_carles_moreno_idc38913
08 10102 10_carles_moreno_idc3891308 10102 10_carles_moreno_idc38913
08 10102 10_carles_moreno_idc38913
 
Europa, modernidade e eurocentrismo DUSSEL, Enrique
Europa, modernidade e eurocentrismo DUSSEL, EnriqueEuropa, modernidade e eurocentrismo DUSSEL, Enrique
Europa, modernidade e eurocentrismo DUSSEL, Enrique
 
Estado actual das pescas
Estado actual das pescasEstado actual das pescas
Estado actual das pescas
 
Tradeoffs in Automatic Provenance Capture
Tradeoffs in Automatic Provenance CaptureTradeoffs in Automatic Provenance Capture
Tradeoffs in Automatic Provenance Capture
 
Provenance for Data Munging Environments
Provenance for Data Munging EnvironmentsProvenance for Data Munging Environments
Provenance for Data Munging Environments
 
Aristófanes
AristófanesAristófanes
Aristófanes
 
Los 1100 mejores boleros
Los 1100 mejores bolerosLos 1100 mejores boleros
Los 1100 mejores boleros
 
Biodiversidade 4 (1)
Biodiversidade 4 (1)Biodiversidade 4 (1)
Biodiversidade 4 (1)
 
Estudio sobre la piratería y las descargas ilegales.
Estudio sobre la piratería y las descargas ilegales.Estudio sobre la piratería y las descargas ilegales.
Estudio sobre la piratería y las descargas ilegales.
 

Más de Geoffrey Dorne

Rendre la critique créative. La démarche abductive et pragmatique du design E...
Rendre la critique créative. La démarche abductive et pragmatique du design E...Rendre la critique créative. La démarche abductive et pragmatique du design E...
Rendre la critique créative. La démarche abductive et pragmatique du design E...Geoffrey Dorne
 
A Clash of Concerns: Applying Design Thinking to Social Dilemmas
A Clash of Concerns: Applying Design Thinking to Social Dilemmas A Clash of Concerns: Applying Design Thinking to Social Dilemmas
A Clash of Concerns: Applying Design Thinking to Social Dilemmas Geoffrey Dorne
 
Graphisme & design Memphis - années 80
Graphisme & design Memphis - années 80Graphisme & design Memphis - années 80
Graphisme & design Memphis - années 80Geoffrey Dorne
 
Creating a New Language for Nutrition: McDonald’s Universal Icons for 109 Cou...
Creating a New Language for Nutrition: McDonald’s Universal Icons for 109 Cou...Creating a New Language for Nutrition: McDonald’s Universal Icons for 109 Cou...
Creating a New Language for Nutrition: McDonald’s Universal Icons for 109 Cou...Geoffrey Dorne
 
152314 cnap graphisme-en-france_23_2017-fr
152314 cnap graphisme-en-france_23_2017-fr152314 cnap graphisme-en-france_23_2017-fr
152314 cnap graphisme-en-france_23_2017-frGeoffrey Dorne
 
ART D’AUTOROUTE JULIEN LELIÈVRE
ART D’AUTOROUTE JULIEN LELIÈVREART D’AUTOROUTE JULIEN LELIÈVRE
ART D’AUTOROUTE JULIEN LELIÈVREGeoffrey Dorne
 
La place du designer - mémoire Juliette Mothe
La place  du designer - mémoire Juliette MotheLa place  du designer - mémoire Juliette Mothe
La place du designer - mémoire Juliette MotheGeoffrey Dorne
 
LES PUCES DE L'ILLUSTRATION 2016
LES PUCES DE L'ILLUSTRATION 2016LES PUCES DE L'ILLUSTRATION 2016
LES PUCES DE L'ILLUSTRATION 2016Geoffrey Dorne
 
Un grand signe pour un regard citoyen
Un grand signe pour un regard citoyenUn grand signe pour un regard citoyen
Un grand signe pour un regard citoyenGeoffrey Dorne
 
Design et métiers d’art
Design et métiers d’artDesign et métiers d’art
Design et métiers d’artGeoffrey Dorne
 
Le guide de la bonne relation entre annonceur et agence en design
Le guide de la bonne relation entre annonceur et agence en designLe guide de la bonne relation entre annonceur et agence en design
Le guide de la bonne relation entre annonceur et agence en designGeoffrey Dorne
 
Résultats de l'enquête relative aux tendances typographiques
Résultats de l'enquête relative aux tendances typographiquesRésultats de l'enquête relative aux tendances typographiques
Résultats de l'enquête relative aux tendances typographiquesGeoffrey Dorne
 
La démarche design, un outil pour renouveler les processus de l’urbanisme
La démarche design, un outil pour renouveler les processus de l’urbanismeLa démarche design, un outil pour renouveler les processus de l’urbanisme
La démarche design, un outil pour renouveler les processus de l’urbanismeGeoffrey Dorne
 
INNOVER EN FRANCE AVEC LE DESIGN THINKING ? Mémoire
INNOVER EN FRANCE AVEC LE DESIGN THINKING ? MémoireINNOVER EN FRANCE AVEC LE DESIGN THINKING ? Mémoire
INNOVER EN FRANCE AVEC LE DESIGN THINKING ? MémoireGeoffrey Dorne
 
Formation designer 1958
Formation designer 1958Formation designer 1958
Formation designer 1958Geoffrey Dorne
 
[lecture] Faut-il mesurer la bande passante du design ?
[lecture] Faut-il mesurer la bande passante du design ?[lecture] Faut-il mesurer la bande passante du design ?
[lecture] Faut-il mesurer la bande passante du design ?Geoffrey Dorne
 
L'enjeu du design industriel en 1980
L'enjeu du design industriel en 1980L'enjeu du design industriel en 1980
L'enjeu du design industriel en 1980Geoffrey Dorne
 
Le design thinking en bibliothèque
Le design thinking en bibliothèqueLe design thinking en bibliothèque
Le design thinking en bibliothèqueGeoffrey Dorne
 

Más de Geoffrey Dorne (20)

Rendre la critique créative. La démarche abductive et pragmatique du design E...
Rendre la critique créative. La démarche abductive et pragmatique du design E...Rendre la critique créative. La démarche abductive et pragmatique du design E...
Rendre la critique créative. La démarche abductive et pragmatique du design E...
 
A Clash of Concerns: Applying Design Thinking to Social Dilemmas
A Clash of Concerns: Applying Design Thinking to Social Dilemmas A Clash of Concerns: Applying Design Thinking to Social Dilemmas
A Clash of Concerns: Applying Design Thinking to Social Dilemmas
 
La pluie a midi
La pluie a midiLa pluie a midi
La pluie a midi
 
Graphisme & design Memphis - années 80
Graphisme & design Memphis - années 80Graphisme & design Memphis - années 80
Graphisme & design Memphis - années 80
 
Creating a New Language for Nutrition: McDonald’s Universal Icons for 109 Cou...
Creating a New Language for Nutrition: McDonald’s Universal Icons for 109 Cou...Creating a New Language for Nutrition: McDonald’s Universal Icons for 109 Cou...
Creating a New Language for Nutrition: McDonald’s Universal Icons for 109 Cou...
 
152314 cnap graphisme-en-france_23_2017-fr
152314 cnap graphisme-en-france_23_2017-fr152314 cnap graphisme-en-france_23_2017-fr
152314 cnap graphisme-en-france_23_2017-fr
 
ART D’AUTOROUTE JULIEN LELIÈVRE
ART D’AUTOROUTE JULIEN LELIÈVREART D’AUTOROUTE JULIEN LELIÈVRE
ART D’AUTOROUTE JULIEN LELIÈVRE
 
La place du designer - mémoire Juliette Mothe
La place  du designer - mémoire Juliette MotheLa place  du designer - mémoire Juliette Mothe
La place du designer - mémoire Juliette Mothe
 
LES PUCES DE L'ILLUSTRATION 2016
LES PUCES DE L'ILLUSTRATION 2016LES PUCES DE L'ILLUSTRATION 2016
LES PUCES DE L'ILLUSTRATION 2016
 
Un grand signe pour un regard citoyen
Un grand signe pour un regard citoyenUn grand signe pour un regard citoyen
Un grand signe pour un regard citoyen
 
Design et métiers d’art
Design et métiers d’artDesign et métiers d’art
Design et métiers d’art
 
Bauhaus : exposition
Bauhaus : expositionBauhaus : exposition
Bauhaus : exposition
 
Le guide de la bonne relation entre annonceur et agence en design
Le guide de la bonne relation entre annonceur et agence en designLe guide de la bonne relation entre annonceur et agence en design
Le guide de la bonne relation entre annonceur et agence en design
 
Résultats de l'enquête relative aux tendances typographiques
Résultats de l'enquête relative aux tendances typographiquesRésultats de l'enquête relative aux tendances typographiques
Résultats de l'enquête relative aux tendances typographiques
 
La démarche design, un outil pour renouveler les processus de l’urbanisme
La démarche design, un outil pour renouveler les processus de l’urbanismeLa démarche design, un outil pour renouveler les processus de l’urbanisme
La démarche design, un outil pour renouveler les processus de l’urbanisme
 
INNOVER EN FRANCE AVEC LE DESIGN THINKING ? Mémoire
INNOVER EN FRANCE AVEC LE DESIGN THINKING ? MémoireINNOVER EN FRANCE AVEC LE DESIGN THINKING ? Mémoire
INNOVER EN FRANCE AVEC LE DESIGN THINKING ? Mémoire
 
Formation designer 1958
Formation designer 1958Formation designer 1958
Formation designer 1958
 
[lecture] Faut-il mesurer la bande passante du design ?
[lecture] Faut-il mesurer la bande passante du design ?[lecture] Faut-il mesurer la bande passante du design ?
[lecture] Faut-il mesurer la bande passante du design ?
 
L'enjeu du design industriel en 1980
L'enjeu du design industriel en 1980L'enjeu du design industriel en 1980
L'enjeu du design industriel en 1980
 
Le design thinking en bibliothèque
Le design thinking en bibliothèqueLe design thinking en bibliothèque
Le design thinking en bibliothèque
 

Lesgrillesmacro typopourlewebfacile-121021043933-phpapp02

  • 1. Les grilles macro-typo pour le web ? Facile ! Marie Guillaumet Vincent Valentin Paris Web 20 octobre 2012 1
  • 2. Grilles macro-typo 2 /184 Qui sommes-nous ?
  • 3. Grilles macro-typo 3 /184 Qui sommes-nous ? Marie Guillaumet Web designer et développeur web front-end http://marieguillaumet.com/ @kreestal bit.ly/site-marie
  • 4. Grilles macro-typo 4 /184 Qui sommes-nous ? Vincent Valentin Développeur web front-end http://www.htmlzengarden.com/ @htmlzg bit.ly/site-vincent
  • 5. Grilles macro-typo 5 /184 Avant-propos Retour d’expérience ++pragmatisme −−démonstrations techniques avancées
  • 6. Grilles macro-typo 6 /184 Plan d’attaque ! 1.La grille toute puissante 2.Concevoir sa grille 3.La grille dans la pratique
  • 7. Grilles macro-typo 7 /184 Objectifs • 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 /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.
  • 9. Grilles macro-typo 9 /184 Quelques définitions
  • 10. Grilles macro-typo /184 Colonnes
  • 12. Grilles macro-typo /184 Gouttières
  • 16. Grilles macro-typo /184 Ligne de base
  • 17. Grilles macro-typo /184 Ligne de base
  • 20. Grilles macro-typo 20 /184 Première partie La grille toute puissante
  • 21. Grilles macro-typo 21 /184 Print vs Web : •une filiation évidente •un fossé technique immense
  • 22. Grilles macro-typo 22 /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.
  • 24. Grilles macro-typo 24 /184 Un outil commun : la grille. Unité. Harmonie. Rythme.
  • 25. Grilles macro-typo 25 /184 Offrir au regard des contenus clairs, agréables à lire, dans lesquels on se repère aisément. ++ Lisibilité ++ Accessibilité ++ Capitaliser sur l'apprentissage
  • 26. Grilles macro-typo 26 /184 La grille dans l’histoire
  • 27. Grilles macro-typo 27 /184 Écriture et architecture 3400 avant J.C. : écritures cunéiformes
  • 29. Grilles macro-typo 29 /184 Écriture et architecture 2670 à 2450 avant J.C. : pyramides de Guizeh, construites avec le nombre d'or
  • 31. Grilles macro-typo 31 /184 Écriture et architecture 449 à 438 avant J.C. : le Parthénon Optique, proportions, nombre d'or
  • 33. Grilles macro-typo 33 /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.
  • 34. Grilles macro-typo 34 /184 Mondrian Composition avec jaune, bleu et rouge (1939-1942)
  • 35. Grilles macro-typo 35 /184 Morellet Reflets dans l’eau déformés par le spectateur (1964)
  • 36. Grilles macro-typo 36 /184 Buren Les deux plateaux (1996)
  • 38. Grilles macro-typo 38 /184 Graphisme contemporain Style suisse : prise de pouvoir de l’utilitaire sur l’expression personnelle. Utilisation systématique de la grille.
  • 39. Grilles macro-typo 39 /184 Emil Ruder (1914–1970)
  • 40. Grilles macro-typo 40 /184 Emil Ruder (1914–1970)
  • 41. Grilles macro-typo 41 /184 Josef Müller- Brockmann (1914–1996)
  • 42. Grilles macro-typo 42 /184 Josef Müller- Brockmann (1914–1996)
  • 43. Grilles macro-typo 43 /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.
  • 44. Grilles macro-typo 44 /184 Appuyons-nous sur ces principes plastiques fiables. Affinons notre regard à la lumière de 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 /184 Les web designers et la grille : une histoire passionnelle !
  • 47. Grilles macro-typo 47 /184 La grille, un frein à la créativité ?
  • 50. Grilles macro-typo 50 /184 La grille est un squelette une charpente un guide
  • 51. Grilles macro-typo 51 /184 Les 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
  • 52. Grilles macro-typo 52 /184 Deuxième partie Concevoir sa grille
  • 53. Grilles macro-typo 53 /184 Il n'existe pas une grille. Il existe une infinité de grilles.
  • 54. Grilles macro-typo 54 /184 À chaque web designer de concevoir sa grille en fonction du contenu du site et de ses choix esthétiques.
  • 55. Grilles macro-typo 55 /184 C’est l’usage du site qui doit prévaloir dans le choix de la grille.
  • 56. Grilles macro-typo 56 /184 Quelle grille choisir ? Deux approches : 1. Grille fluide ou élastique 2. Grille à largeur fixe
  • 57. Grilles macro-typo 57 /184 Définir sa grille
  • 58. Grilles macro-typo 58 /184 Définir sa grille Grille verticale •largeur de page •largeur de gouttière •largeur de colonne •nombre de colonnes
  • 59. Grilles macro-typo 59 /184 Définir sa grille Grille verticale •largeur de page •largeur de gouttière •largeur de colonne •nombre de colonnes
  • 60. Grilles macro-typo 60 /184 Définir sa grille Grille 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 61 /184 Définir sa grille Grille verticale Grille horizontale •largeur de page •corps de texte •largeur de gouttière •hauteur de ligne •largeur de colonne •nombre de colonnes
  • 62. Grilles macro-typo 62 /184 Définir sa grille Grille verticale Grille horizontale •largeur de page •corps de texte •largeur de gouttière •hauteur de ligne •largeur de colonne •nombre de colonnes
  • 63. Grilles macro-typo 63 /184 Définir sa grille •S’aider de formules •S’aider d’outils visuels
  • 64. Grilles macro-typo 64 /184 Démonstration bit.ly/grid-calc bit.ly/scale-rhythm
  • 65. Grilles macro-typo 65 /184 Définir sa grille : choisir •Grille verticale en unités absolues •Grille horizontale en unités relatives
  • 66. Grilles macro-typo 66 /184 Démonstration bit.ly/marges-px-em
  • 67. Grilles macro-typo 67 /184 Et pour le RWD ? •Écrans larges : tailles maîtrisées •Écrans mobiles : pas d’espace à perdre
  • 68. Grilles macro-typo 68 /184 Configurer sa grille : Photoshop + GuideGuide http://www.guideguide.me/ bit.ly/guide-guide
  • 69. Grilles macro-typo 69 /184 Démonstration bit.ly/guide-guide
  • 70. Grilles macro-typo 70 /184 Attention ! 1. Choisir un interlignage égal à la largeur des gouttières 2. Placer le texte entre les lignes de base
  • 71. Grilles macro-typo 71 /184 La grille sur le web : exemples
  • 72. Grilles macro-typo 72 /184 Grille à colonnes égales ++Grille adaptable à toutes les situations −−La plus courante
  • 73. Grilles macro-typo 73 /184 http://www.lyon.archi.fr/ bit.ly/lyon-archi
  • 76. Grilles macro-typo 76 /184 http://www.enssib.fr/ bit.ly/école-enssib
  • 79. Grilles macro-typo 79 /184 http://www.foncia-location-vacances.fr/ bit.ly/foncia-vacances
  • 82. Grilles macro-typo 82 /184 Grille modulaire ++Qualités graphiques et organisationnelles −−Suppose des blocs de hauteur fixe
  • 83. Grilles macro-typo 83 /184 http://www.hattienewman.co.uk/ bit.ly/hattie-newman
  • 86. Grilles macro-typo 86 /184 http://promisetangeman.com/ bit.ly/promise-tangeman
  • 89. Grilles macro-typo 89 /184 http://volumique.com/v2/ bit.ly/volumique-v2
  • 92. Grilles macro-typo 92 /184 http://manchesterwire.co.uk/ bit.ly/manchester-wire
  • 93. Grilles macro-typo 93 /184 Grille modulaire « éclatée » Le meilleur des deux mondes ?
  • 94. Grilles macro-typo 94 /184 http://pinterest.com/ bit.ly/grid-pinterest
  • 97. Grilles macro-typo 97 /184 http://www.flowfestival.com/ bit.ly/flow-festival
  • 100. Grilles macro-typo 100 /184 D’autres expérimentations sont possibles : • Grilles basées sur le nombre d’or • Doubles grilles • Grilles à colonnes inégales • Etc.
  • 101. Grilles macro-typo 101 /184 Fonctionnement CSS
  • 102. Grilles macro-typo 102 /184 Grille verticale
  • 103. Grilles macro-typo 103 /184 Grille verticale .col { width: 60px; float: left; /* + hack si nécessaire */ margin-right: 20px; }
  • 104. Grilles macro-typo 104 /184 Grille verticale #aside { width: 300px; /* (60 * 4) + (20 * 3) */ float: left; margin-right: 20px; }
  • 105. Grilles macro-typo 105 /184 Grille verticale .col { width: 60px; float: left; margin-left: 20px; }
  • 106. Grilles macro-typo 106 /184 Grille verticale .col { width: 60px; float: left; margin-left: 10px; margin-right: 10px; }
  • 107. Grilles macro-typo 107 /184 Grille verticale .first-child /* ou :first-child */ {margin-left: 0;} .last-child {margin-right: 0;}
  • 108. Grilles macro-typo 108 /184 Grille horizontale
  • 109. Grilles macro-typo 109 /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 */ }
  • 110. Grilles macro-typo 110 /184 Grille 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; }
  • 111. Grilles macro-typo 111 /184 Grille horizontale p { font-size: 1em; line-height: 1.42867em; /* soit 20 pixels */ margin-top: 1.42867em; }
  • 112. Grilles macro-typo 112 /184 Grille horizontale p { font-size: 1em; line-height: 1.42867em; /* soit 20 pixels */ margin-top: 1.42867em; /* fusion */ margin-bottom: 1.42867em; }
  • 113. Grilles macro-typo 113 /184 Techniques un peu plus avancées
  • 114. Grilles macro-typo 114 /184 Grille verticale
  • 115. Grilles macro-typo 115 /184 Grille verticale .gutter-border { margin-right: 10px; /* 10 + (60 / 2) */ padding-right: 9px; /* 9 + (60 / 2) */ border-right: 1px solid pink; }
  • 116. Grilles macro-typo 116 /184 Grille verticale .col-border { margin-right: 40px; /* 10 + (60 / 2) */ padding-right: 39px; /* 9 + (60 / 2) */ border-right: 1px solid pink; }
  • 117. Grilles macro-typo 117 /184 Grille horizontale
  • 118. Grilles macro-typo 118 /184 Grille horizontale p { font-size: 1em; /* soit 14 pixels */ line-height: 1.42867em; /* soit 20 px */ margin-bottom: 1.42867em; }
  • 119. Grilles macro-typo 119 /184 Grille horizontale p { font-size: 2em; /* soit 28 pixels */ line-height: 0.71428em; /* 1.42em / 2 */ margin-bottom: 0.71428em; }
  • 120. Grilles macro-typo 120 /184 Grille horizontale p strong /* p est à 28 pixels */ { font-size: ?em; /* on veut 32 pixels */ line-height: ?em; /* on veut 20 pixels */ margin-bottom: ?em; }
  • 121. Grilles macro-typo 121 /184 Démonstration bit.ly/em-calculator
  • 122. Grilles macro-typo 122 /184 Grille 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; }
  • 123. Grilles macro-typo 123 /184 Grille 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; }
  • 124. Grilles macro-typo 124 /184 Grille 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; }
  • 125. Grilles macro-typo 125 /184 Grille 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; }
  • 126. Grilles macro-typo 126 /184 Grille horizontale p strong /* p est à 28 pixels */ { font-size: 32/28em; /* soit 32 pixels */ line-height: ?em; /* on veut 20 pixels */ margin-bottom: ?em; }
  • 127. Grilles macro-typo 127 /184 Grille 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; }
  • 128. Grilles macro-typo 128 /184 Grille 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; }
  • 129. Grilles macro-typo 129 /184 Grille 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; }
  • 130. Grilles macro-typo 130 /184 Grille 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; }
  • 131. Grilles macro-typo 131 /184 De bons outils
  • 132. Grilles macro-typo 132 /184 Normalize.css • Définir une base de travail • Disponible en deux versions bit.ly/normalize-demo
  • 133. Grilles macro-typo 133 /184 Préprocesseurs CSS
  • 134. Grilles macro-typo 134 /184 Préprocesseurs CSS •Calculs simples •Tâches répétitives
  • 135. Grilles macro-typo 135 /184 Préprocesseurs CSS •Variables •Calculs •Fonctions •Héritage •Imbrications
  • 136. Grilles macro-typo 136 /184 Préprocesseurs CSS •Less •Sass (Sass et SassyCSS) •Compass •Stylus
  • 137. Grilles macro-typo 137 /184 Préprocesseurs CSS – Mixins • adjust-font-size-to • padding-leader / margin-leader • padding-trailer / margin-trailer • establish-baseline • Etc. bit.ly/compass-rhythm
  • 138. Grilles macro-typo 138 /184 Préprocesseurs CSS – Mixins réécrits • font-size • padding-top / margin-top • padding-bottom / margin-bottom • line-height • Etc.
  • 139. Grilles macro-typo 139 /184 Préprocesseurs CSS – Mixins ajoutés • position-top / position-bottom • height / line-height • border-top / border-bottom • bloc • Etc.
  • 140. Grilles macro-typo 140 /184 Pré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); } }
  • 141. Grilles macro-typo 141 /184 Préprocesseurs CSS – Texte p { $fs1: 28px; .bloc($fs1); strong { $fs2: 32px; .bloc($fs2, $fs1); } }
  • 142. Grilles macro-typo 142 /184 Pré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>
  • 143. Grilles macro-typo 143 /184 Préprocesseurs CSS – RWD #article { .span(8); @media tablet { .span(4); } @media smartphone { float: none; width: auto; .first; } }
  • 144. Grilles macro-typo 144 /184 Pré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;
  • 145. Grilles macro-typo 145 /184 #grid • Contrôle de la grille • Aucune image, tout en CSS • À supprimer en production bit.ly/hash-grid
  • 146. Grilles macro-typo 146 /184 Démonstration bit.ly/hash-grid-demo
  • 147. Grilles macro-typo 147 /184 La grille que nous vous proposons • Tout-terrain • Divisible • Modulaire • Souple
  • 157. Colonnes de 60 pixels
  • 158. Gouttières de 20 pixels
  • 160. Interlignage 20 pixels
  • 161. Corps de texte 14 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.
  • 164. Grilles macro-typo 164 /184 Troisième partie Dans la pratique
  • 165. Grilles macro-typo 165 /184 Tout doit-il être aligné sur la grille ? Non ! •Ce n’est pas toujours possible •Ce n’est pas toujours souhaité
  • 166. Grilles macro-typo 166 /184 Mon rythme vertical est cassé
  • 167. Grilles macro-typo 167 /184 Mon rythme vertical est cassé
  • 168. Grilles macro-typo 168 /184 Mon rythme vertical est cassé
  • 169. Grilles macro-typo 169 /184 Mon rythme vertical est cassé Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor Lorem ipsum dolor sit incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis amet, consectetur nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. adipisicing elit, sed do Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu eiusmod tempor incididunt fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in ut labore et dolore magna culpa qui officia deserunt mollit anim id est laborum. aliqua. Ut enim ad minim veniam, quis nostrud Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor exercitation ullamco incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis laboris nisi ut aliquip ex ea nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. commodo consequat. Duis Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu aute irure dolor in fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in reprehenderit in voluptate culpa 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 occaecat incididunt 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 officia Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu deserunt mollit anim id est fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in laborum. culpa qui officia deserunt mollit anim id est laborum.
  • 170. Grilles macro-typo 170 /184 Mon rythme vertical est cassé Lorem ipsum dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt amet, consectetur ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor laboris nisi ut aliquip ex ea incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis commodo consequat. Duis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. aute irure dolor in Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu reprehenderit in voluptate fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in velit esse cillum dolore eu culpa qui officia deserunt mollit anim id est laborum. fugiat nulla pariatur. Excepteur sint occaecat Lorem 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 officia nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. deserunt mollit anim id est Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu laborum. fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  • 171. Grilles macro-typo 171 /184 Mon rythme vertical est cassé Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor Lorem ipsum dolor sit incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis amet, consectetur nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. adipisicing elit, sed do Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu eiusmod tempor incididunt fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in ut labore et dolore magna culpa qui officia deserunt mollit anim id est laborum. aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor laboris nisi ut aliquip ex ea incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis commodo consequat. Duis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. aute irure dolor in Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu reprehenderit in voluptate fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in velit esse cillum dolore eu culpa qui officia deserunt mollit anim id est laborum. fugiat nulla pariatur. Excepteur sint occaecat Lorem 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 officia nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. deserunt mollit anim id est Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu laborum. fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  • 172. Grilles macro-typo 172 /184 Mon rythme vertical est cassé Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor Lorem ipsum dolor sit incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis amet, consectetur nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. adipisicing elit, sed do Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu eiusmod tempor incididunt fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in ut labore et dolore magna culpa 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 occaecat Lorem 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 officia nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. deserunt mollit anim id est Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu laborum. fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  • 173. Grilles macro-typo 173 /184 Mon rythme vertical est cassé Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor Lorem ipsum dolor sit incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis amet, consectetur nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. adipisicing elit, sed do Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu eiusmod tempor incididunt fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in ut labore et dolore magna culpa qui officia deserunt mollit anim id est laborum. aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco Lorem ipsum laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in Dolor sit amet reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat Lorem 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 officia nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. deserunt mollit anim id est Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu laborum. fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  • 174. Grilles macro-typo 174 /184 Mon rythme vertical est cassé Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor Lorem ipsum dolor sit incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis amet, consectetur nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. adipisicing elit, sed do Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu eiusmod tempor incididunt fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in ut labore et dolore magna culpa 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 occaecat Lorem 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 officia nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. deserunt mollit anim id est Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu laborum. fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  • 175. Grilles macro-typo 175 /184 Réparer le rythme vertical •Compenser les pixels ajoutés •Fixer des hauteurs •Faire les calculs automatiquement
  • 176. Grilles macro-typo 176 /184 Compenser les pixels ajoutés #foo { ! border-bottom: 10px solid pink; }
  • 177. Grilles macro-typo 177 /184 Compenser les pixels ajoutés #foo { ! border-bottom: 10px solid pink; ! margin-top: -10px; }
  • 178. Grilles macro-typo 178 /184 Compenser les pixels ajoutés #foo { ! border-bottom: 10px solid pink; ! margin-top: -10px; ! position: relative; ! top: 10px; }
  • 179. Grilles macro-typo 179 /184 Compenser 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; }
  • 180. Grilles macro-typo 180 /184 Compenser les pixels ajoutés #foo { ! .border-bottom ! (10px, solid, pink); }
  • 181. Grilles macro-typo 181 /184 Fixer des hauteurs •Toujours travailler avec des unités relatives •Préférer les hauteurs minimales aux hauteurs fixes
  • 182. Grilles macro-typo 182 /184 Faire les calculs automatiquement jquery.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
  • 183. Grilles macro-typo 183 /184 Conclusion
  • 184. Grilles macro-typo 184 /184 Merci ! :-) bit.ly/grilles-faciles @kreestal @htmlzg