Mon Site

Bienvenue sur cette page de démonstration

Section 1 - Contenu Normal

Ceci est une section de contenu normal, avec une largeur maximale et des marges latérales. Les paragraphes sont bien alignés et le contenu est facile à lire.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Section 2 - Full-bleed avec Image

Cette section s'étend sur toute la largeur de l'écran avec une image de fond. Un voile d'assombrissement permet au texte de rester facilement lisible.

Le contraste élevé entre le texte blanc et l'overlay sombre assure une excellente lisibilité même sur des images complexes.

Section 3 - Contenu Normal

De retour à une section avec largeur limitée. Cela crée un contraste visuel avec la section précédente.

Sous-article

Les articles peuvent être imbriqués pour une meilleure structure sémantique.

Section 4 - Full-bleed Bleue

Une autre section en full-bleed avec une couleur de fond différente. Les paragraphes conservent leur alignement correct.

Vous pouvez ajouter autant de sections full-bleed que vous le souhaitez, chacune avec ses propres couleurs et contenus.

Section 5 - Contenu Structuré

Cette section contient des éléments HTML sémantiques sans classes CSS inutiles.

Section 6 - Full-bleed Minimaliste

Section full-bleed sans couleur de fond, juste avec des bordures pour définir l'espace.

Les paragraphes restent parfaitement alignés avec le reste du contenu.

Technique CSS Grid Full-bleed

Cette page utilise une technique CSS Grid pour gérer les sections full-bleed. Voici comment elle fonctionne :

Concept principal

La grille du body est divisée en 3 colonnes : une colonne fluide à gauche, un conteneur limité à 900px au centre, et une colonne fluide à droite. Cette approche garantit un alignement parfait à tous les écrans.

Code CSS du body

body {
    display: grid;
    grid-template-columns: 1fr min(100%, 900px) 1fr;
}

Chaque élément normal (header, section, footer) occupe la colonne 2 : 

section {
    grid-column: 2;
    padding: 2rem 1rem;
}

Sections full-bleed

Pour les sections full-bleed, on utilise grid-column: 1 / -1 pour s'étendre sur toutes les colonnes. La section crée ensuite sa propre grille interne identique, ce qui permet au contenu d'être parfaitement aligné avec le reste : 

section[data-fullbleed] {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr min(100%, 900px) 1fr;
    padding: 2rem 0;
}

section[data-fullbleed] > * {
    grid-column: 2;
    padding-inline: 1rem;
}

Structure HTML

Les sections full-bleed utilisent simplement un attribut data : 

<section data-fullbleed data-bg="light">
    <h2>Titre</h2>
    <p>Contenu...</p>
</section>

Avantages