Tutoriel Vidéo CSS Créer une grille responsive

Télécharger la vidéo Télécharger les sources

Aujourd'hui je vous propose de découvrir comment créer une grille CSS responsive de A à Z en utilisant le preprocesseur SASS.

Le principe est de créer une série de classes HTML qui vont nous permettre de piloter la structure du site en fonction de la taille de l'écran.

Le principe du mobile-first

Pour créer notre grille nous allons utiliser le principe du mobile first. Le principe est de styliser les éléments en fonction de l'apparence qu'ils doivent avoir sur les mobiles.

.col-s-X permet de créer un élément qui prends X colonnes

On ajoute ensuite des classes supplémentaires pour modifier ce comportement au délà d'une certaine taille par exemple sur tablette et bureau.

.col-m-X sur un écran "medium" l'élément prendra X colonnes

Et ainsi de suite, vous pouvez créer autant de breakpoint que vous voulez.

La visibilité

Un autre point intéréssant est de pouvoir gérer la visibilité des différents éléments suivant la taille de l'écran. On va se créer différentes classes pour gérer ça :

  • m-hide, cache l'élément à partir de la taille medium
  • l-hide, cache l'élément à partir de la taille large