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
