Utiliser une grille existante

Nous allons découvrir la notion de grille en utilisant une grille générique existante fournie par le framework css Materialize
  1. Avec ce fichier source, la version css du framework materialize et sa librairie de normalisation, fabriquer la mise en page proposée dans les figures 6.1 et 6.2.
    Quelques consignes :
    • Utilisez uniquement la partie "grid" du framework. Faites d'abord la version "mobile", puis étendez avec la version "écran large".
    • Ajoutez ensuite un peu de padding pour aérer vos textes et un border autour des boites pour les visualiser.
    • Bien sur on ne modifie pas le fichier materialize.css.
  2. À l'aide des outils de votre navigateur, comprendre le fonctionnement de la grille. Identifier les positionnements et propriétés de boites consécutifs produits par les classes ajoutés au fichier html.
  3. Retrouver la mise en page avec ce nouveau fichier.
    • Quelle est la différence entre ce fichier et le précédent ?
    • Attention Ce résultat sera à rendre. Toutes les formes de grilles suivantes devront donner un résultat identique sur ce fichier.

Comprendre le fonctionnement...

À l'aide de vos outils de développement de navigateurs :
  • regarder ce qu'apporte la classe "col",
  • regarder ce qu'apporte les classes "s12" et "s6",
  • regarder ce qu'apporte les classes "m12" et "m6"",
  • regarder ce qu'apporte la classe "row".
Créer une feuille de styles qui écrase les 'vieux' placements et les remplace par plus moderne...

Écrire sa propre grille

L'objectif est de construire une mini-grille css générique, c'est à dire indépendante de l'application et pouvant servir à organiser le placement dans différents projets.
En utilisant flex, la fonction css calc() et les variables css, programmer une grille générique inspirée de materialize :
  • 12 colonnes,
  • gutter de 1.6 % entre les colonnes
Il faut donc définir :
  • les 2 classes .row et .col,
  • les classes .s1 à .s12,
  • puis les classe .m1 à .m12
Ces classes agissent uniquement sur le placement des éléments.
Tester votre grille sur le document de l'exercice 1.
Attention : votre grille doit être suffisamment solide pour supporter l'ajout de padding et de border dans les cellules.