Le dessous des grilles

Tout ce que vous avez toujours rêvé de découvrir à propos des grilles

Défricher l'histoire des grilles CSS et en décrypter leur fonctionnement

L'atelier

De l'abondance à la rareté

Les frameworks et autres systèmes "clefs en main" proposent un florilège de modules ou extensions. On dispose de toutes les fonctionnalités possibles.

  1. Mais de quoi a-t-on vraiment besoin ?
  2. Maîtrise-t-on l'ensemble des fonctionnalités utilisées ?
  3. Comment maintenir un système performant ?

Citation :

I feel that grid systems as a code—rather than design—tool are still *vastly* misunderstood and underrated. I should write/speak about them…

- Harry Roberts -

Les frameworks - WTF ?

La boîte à outils

Dans le temps ancien des années 2000, la faible professionnalisation des intégrateurs CSS, faisait qu'on repartait souvent d'une page blanche. Petit à petit, ces érudits électroniques se sont armés de bibliothèques de styles ; puis ont commencé à les uniformiser et à les partager à mesure que les navigateurs se standardisaient.

Liste de différents framework HTML/CSS => Framework Compare

Une bibliothèque modulaire

Les frameworks sont décomposés en plusieurs séries de fichiers (base, helpers, layout...). Ces fichiers sont activables à loisir.

Les grilles

Une grille typographique est une structure à deux dimensions composée de séries d'axes verticaux et horizontaux se croisant. Elle est utilisée pour structurer un contenu.

Les élements

  1. L'élément englobant (row) — largeur du conteneur
  2. Les modules de contenus (block) — fraction de la colonne
  3. Une marge extérieure — gouttière régulière de séparation des modules
  4. Une marge intérieure — gouttière intra module

Disposition

  1. N modules avec chacun une gouttière (gauche ou droite ou les deux)
  2. 1er et dernier élément sans gouttière (gauche ou droite)

Le cambouis

Exercice de groupe

Matériel

Principe

  1. Travailler en groupe pour réaliser une conception papier
  2. Passer par des phases de travail définies (comprenant les pauses) :: pomodoro
  3. Réaliser un rendu à d'autres personnes / réaliser des tests

Ready ? go !

Round 1 - 30 minutes

  1. 3 minutes - Monter un groupe, choisir un sujet, trouver le matériel, ouvrir un codepen
  2. 10 minutes - Dessiner une grille de 6 éléments : définir les côtes, éditer le code en ligne
  3. 15 minutes - Rendu
  4. 2 minutes - Pause

Round 2 - 15 minutes

  1. 5 minutes - Les modules s'affichent sur 2 lignes, le 3ème est plus haut que les autres
  2. 10 minutes - Rendu

Round 3 - 25 minutes

  1. 5 minutes - Une bordure doit s'afficher entre les modules
  2. 20 minutes - Rendu

Grilles générées

Exemples de fichiers

  1. Semantic Sass grid mixin (tutoriel)
  2. Susy
  3. Bootstrap
  4. Groundwork CSS
  5. Inuit CSS
  6. Unsemantic

Ressources

bertrandkeller

Pour aller plus loin