CSS Layout cookbook
Le livre de recettes CSS vise à illustrer différents motifs qu'on retrouve fréquemment sur le Web et qu'on pourrait souhaiter implémenter pour son propre site. En plus de fournir du code qui peut servir de point de départ, ces recettes mettent en avant les différents outils et dispositions qui peuvent être utilisées et les choix à effectuer lors du développement.
Note : Si vous débutez en CSS, nous vous conseillons de consulter notre module sur l'apprentissage de la disposition en CSS. Ce guide vous fournira les informations de base pour comprendre le fonctionnement de chacune de ces recettes.
Les recettes
| Recette | Description | Méthodes de disposition utilisées |
|---|---|---|
| Objets avec média | Une boîte constituée de deux colonnes avec une image d'un côté et un texte descriptif de l'autre (par exemple un tweet ou une publication Facebook intégrée à une page). | Grilles CSS, float pour une méthode de recours, dimensionnement avec fit-content |
| Colonnes | Comment choisir entre une disposition multi-colonnes, les boites flexibles (flexbox) ou les grilles CSS pour organiser des colonnes de contenu. | Grilles CSS, Disposition multi-colonnes, Flexbox |
| Centrer un élément | Comment centrer un élément horizontalement et verticalement. | Flexbox, Alignement des boîtes |
| Bas de page adhérant | Créer un pied de page qui se situe en bas du conteneur ou de la zone d'affichage (viewport) lorsque le contenu est plus petit que la zone ou le conteneur. | Grilles CSS, Flexbox |
| Navigation segmentée | Un motif de navigation où certains liens sont séparés des autres. | Flexbox, margin |
| Navigation avec un fil d'Ariane (breadcrumb) | Créer une liste de liens qui permette au visiteur de naviguer selon la hiérarchie des pages. | Flexbox |
| Liste de groupes avec indicateurs | Afficher une liste d'éléments avec chacun un indicateur numérique. | Flexbox, Alignement des boîtes |
| Pagination | Comment créer des liens pour différentes pages, ordonnées, de contenu (les résultats d'une recherche par exemple). | Flexbox, Alignement des boîtes |
| Carte | Un composant sous forme de carte. L'assemblage de tels composants formera une grille de cartes. | Grilles CSS |
| Envelopper une grille (grid wrapper) | Comment aligner certains éléments au centre d'une grille et permettre à d'autres d'être alignés sur les bords. | Grilles CSS |
Contribuer en créant une recette
MDN est un wiki auquel vous pouvez contribuer, y compris en ajoutant une recette à celles-ci ! Voir cette page pour un modèle ainsi que les règles à suivre pour créer votre propre exemple.