Ce conteneur s'adapte à 100% de la largeur de la vue, créant un effet visuel immersif. Le contenu à l'intérieur, cependant, reste centré et lisible grâce à un conteneur.
Les sections utilisent
width: 100% pour s'étendre sur
toute la largeur de la fenêtre. Cela crée un
effet visuel immersif sans être limité par un
conteneur parent. La section héroïque ci-dessus
démontre cette technique avec une image de fond.
À l'intérieur des sections full-bleed, un
conteneur avec
width: 90%; max-width: 1100px; margin:
auto
centre le contenu et assure la lisibilité. Cette
double structure permet d'avoir des
arrière-plans pleine largeur avec du texte
contenu.
Ce layout utilise uniquement des sélecteurs CSS
basés sur les éléments HTML5 sémantiques
(header, main,
section, article) et
des attributs (data-layout,
role, aria-*) sans
aucune classe CSS.
Le menu utilise une
<input type="checkbox">
cachée et le sélecteur
:checked pour détecter l'état.
Quand cochée, le menu glisse depuis la droite
avec transform: translateX(0).
L'icône hamburger (3 lignes en
<span>) se transforme en
croix via des rotations et translations. Aucun
JavaScript nécessaire !