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. Flexboxmargin
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.

Étiquettes et contributeurs liés au document

Étiquettes : 
Contributeurs à cette page : SphinxKnight, chrisdavidmills
Dernière mise à jour par : SphinxKnight,