Livre de recettes CSS
Le livre de recettes CSS vise à rassembler des recettes pour les motifs de mise en page courants, que vous pourriez avoir besoin d'implémenter sur vos propres sites. En plus de fournir du code que vous pouvez utiliser comme point de départ dans vos projets, ces recettes mettent en avant les différentes façons d'utiliser les spécifications de mise en page, ainsi que les choix que vous pouvez faire en tant que développeur·euse.
Note : Si vous débutez avec la mise en forme CSS, vous pouvez d'abord consulter notre module d'apprentissage de la mise en page CSS, qui vous donnera les bases nécessaires pour profiter pleinement des recettes proposées ici.
Recettes
| Recette | Description | Méthodes de mise en page |
|---|---|---|
| Objets média | Une boîte à deux colonnes avec une image d'un côté et un texte descriptif de l'autre, par exemple une publication sur un réseau social. | Grille CSS, solution de repli float, dimensionnement fit-content |
| Colonnes | Quand choisir la mise en colonnes, flexbox ou grille pour vos colonnes. | Grille CSS, Colonnes multiples, Flexbox |
| Centrer un élément | Comment centrer un élément horizontalement et verticalement. | Flexbox, Alignement des boîtes |
| Pied de page collant | Créer un pied de page qui reste en bas du conteneur ou de la zone d'affichage lorsque le contenu est court. | Grille CSS, Flexbox |
| Navigation séparée | Un motif de navigation où certains liens sont visuellement séparés des autres. | Flexbox, margin |
| Fil d'Ariane | Créer une liste de liens permettant à l'utilisateur·ice de remonter dans la hiérarchie de la page. | Flexbox |
| Liste avec indicateurs | Une liste d'éléments avec un indicateur affichant un nombre. | Flexbox, Alignement des boîtes |
| Pagination | Liens vers des pages de contenu (par exemple des résultats de recherche). | Flexbox, Alignement des boîtes |
| Carte | Un composant carte, affiché dans une grille de cartes. | Grille CSS |
| Grille englobante | Pour aligner le contenu d'une grille dans un conteneur central tout en permettant à certains éléments de sortir du cadre. | Grille CSS |
Contribuer une recette
Comme pour tout MDN, nous serions ravi·e·s que vous contribuiez en proposant une recette au même format que celles présentées ci-dessus. Consultez le guide pour ajouter une recette au livre de recettes de mise en page pour obtenir un modèle et des conseils pour rédiger votre propre exemple.