Table des matières TP Générer une grille responsive avec SASS

L'objet de ce TP est de générer en SASS, une grille de mise en forme responsive à l’aide du  Flexbox Layout.

Il faudra gérer les espaces inter-colonnes (gouttières), les décalages (“offsets”), et les différentes tailles d’écran. Il faudra automatiser la génération de cette grille selon le nombre de colonnes et la largeur souhaité de ces colonnes

Le critère de réussite sera d'obtenir le plus beau résultat avec le minimum de code.

I Gérer la largeur de chaque colonne

Voici, ci-dessous, un premier squelette de code SCSS, nous allons compléter les points d'interrogation (???) en deux temps :

  1. Compléter comme un CSS pour des valeurs correspondant à une grille de 4 colonnes (la grille doit être flexible)
    Demander le corrigé : tp_part1_corrige.scss

  2. Transformer ce code en SCSS afin de s'adapter à un nombre ($number) variable de colonne.
    Demander le corrigé : tp_part2_corrige.scss
/* pour notre grille, width devra décompter jusqu'au border */
* { box-sizing: border-box; }

/* 1er essai : calcul manuel */
/* Complétez vous-même les valeurs d'attributs */
.container-grid-4 {
    display: ???;
    flex-direction: ???;
    flex-wrap: ???;
}
/* placez ici les valeurs des attribut des enfants directs de la rille à 4 colonnes */
.container-grid-4 > * {
    flex: ??? ??? ???;
    width: ???%;
}

Tester votre code sur grille.html

II Gérer la gouttière

La gouttière est l'espace laissé entre 2 colonnes. Naturellement, pour ménager cet espace, on diminue les largeurs des colonnes. Enfin on déclare le container-grid avec l'attribut justify-content: space-between;

Ajouter au code précédent une variable gouttiere ($gutter) et générer une grille à 6 colonnes pour obtenir :

Demander le corrigé : tp_part3_corrige.scss

Hélas, cela ne suffira pas : dès qu'une cellule aura une portée élargie à 2 colonnes, l'espacement ne sera plus régulier !
La solution est de déclarer des "margin-left:$gutter" pour chaque cellule et un "margin-left" négatif équivalent pour le container-grid.

Demander le corrigé : tp_part33_corrige.scss

III Eléments double ou triple taille

Certains éléments doivent être mis en exergue et occuper le double d'espace que leurs voisins ? Rien de plus simple avec flexbox : il suffit d'adapter la valeur de width voire de l'automatiser avec SASS pour que cette valeur s'adapte quel que soit le nombre de colonnes.

A vous de construire 2 nouvelles classes : .flexitem-double et .flexitem-triple et de générer leur largeur selon le nombre de colonnes.

Demander le corrigé : tp_part4_corrige.scss

IV Media Queries pour toutes les devices

Ajouter un media queries lorsque la largeur de l'écran est inférieur à $tiny. On donne les valeurs de média suivantes :

$tiny-screen: 480px; // tiny screens media query (less than 480px)
$small-screen: 768px; // screens between 481px and 768px
$medium-screen: 1024px; // screens between 769px and 1024px
$large-screen: 1280px; // screens between 1025px and 1280px

Demander le corrigé : tp_part5_corrige.scss

V Mixin

Mettre la génération des container-grid et de ses enfants sous la forme d'un mixin, s'appliquant à une classe plus générale .grid

.grid($number, $gutter) { ...