Patterns CSS universels

Empiler des éléments avec un espacement constant

HTML

<div class="stack">
    <div>A</div>
    <div>B</div>
</div>

CSS

.stack {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

Créer un stack compact

CSS

.stack-sm {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

Variantes possibles : gap variable.

Grouper des éléments avec wrap contrôlé

HTML

<div class="cluster">
    <button>A</button>
    <button>B</button>
</div>

CSS

.cluster {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
}

Variantes possibles : align-items, gap.

Diviser l’espace en deux zones équilibrées

HTML

<div class="split">
    <div>A</div>
    <div>B</div>
</div>

CSS

.split { display: flex; }
.split > * { flex: 1; }

Variantes possibles : ratios personnalisés.

Basculer entre layout horizontal et vertical selon l’espace

HTML

<div class="switcher">
    <div>A</div>
    <div>B</div>
</div>

CSS

.switcher {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}
.switcher > * { flex: 1 1 300px; }

Variantes possibles : largeur minimale.

Créer un layout centré avec header et footer fixes

HTML

<div class="cover">
    <header>H</header>
    <main>C</main>
    <footer>F</footer>
</div>

CSS

.cover {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.cover > main { flex: 1; }

Créer un contenu centré dans le main

CSS

.cover-center > main {
    display: grid;
    place-content: center;
}

Créer un scroll horizontal fluide

HTML

<div class="reel">
    <div>A</div>
    <div>B</div>
</div>

CSS

.reel {
    display: flex;
    overflow-x: auto;
    gap: 1rem;
    scroll-snap-type: x mandatory;
}

.reel > * { scroll-snap-align: start; }

Créer une grille responsive automatique

HTML

<div class="auto-grid">
    <div>A</div>
    <div>B</div>
</div>

CSS

.auto-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}

Créer une carte minimaliste

HTML

<article class="card">
    <h2>Titre</h2>
    <p>Texte</p>
</article>

CSS

.card {
    padding: 1rem;
    border: 1px solid #ddd;
    border-radius: 8px;
}

Créer une carte avec fond doux

CSS

.card-soft { background: #fafafa; }

Variantes possibles : border, fond.

Aligner une image et un texte proprement

HTML

<div class="media">
    <img src="img.jpg">
    <p>Texte</p>
</div>

CSS

.media {
    display: flex;
    gap: 1rem;
    align-items: center;
}

Aligner un media en haut

CSS

.media-top { align-items: flex-start; }

Variantes possibles : align-items.

Grouper un input et un bouton

HTML

<div class="input-group">
    <input>
    <button>OK</button>
</div>

CSS

.input-group { display: flex; }

.input-group > * { border-radius: 0; }

Créer un input group compact

CSS

.input-group-tight > * { margin-left: -1px; }

Variantes possibles : spacing, border.

Créer un tooltip minimal sans JS

HTML

<button class="tip" data-tip="Info">?</button>

CSS

.tip { position: relative; }
.tip:hover::after {
    content: attr(data-tip);
    position: absolute;
    top: 100%;
    left: 0;
    background: #111;
    color: #fff;
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
}

Créer un tooltip arrondi

CSS

.tip:hover::after { border-radius: 4px; }

Variantes possibles : position, fond.

Créer une sidebar flexible

HTML

<div class="sidebar">
    <aside>Menu</aside>
    <main>Contenu</main>
</div>

CSS

.sidebar {
    display: flex;
    gap: 1rem;
}
.sidebar > aside { flex: 0 0 200px; }

Créer une sidebar fluide

CSS

.sidebar-fluid > aside { flex: 1 0 20%; }

Variantes possibles : largeur fixe ou fluide.

Gérer l’espacement vertical automatiquement

HTML

<article class="flow">
    <h2>Titre</h2>
    <p>Texte</p>
</article>

CSS

.flow > * + * { margin-top: 1rem; }

Créer un flow compact

CSS

.flow-sm > * + * { margin-top: 0.5rem; }

Variantes possibles : marge variable.

Supprimer l’espace vertical des polices

HTML

<h1 class="trim">Titre</h1>

CSS

.trim {
    leading-trim: both;
    text-edge: cap;
}

Appliquer un trim partiel

CSS

.trim-start { leading-trim: start; }

Variantes possibles : start, end, both.

Centrer un élément dans un conteneur

HTML

<div class="center">A</div>

CSS

.center {
    display: flex;
    justify-content: center;
    align-items: center;
}

Limiter la largeur d’un contenu

HTML

<div class="wrapper">Texte</div>

CSS

.wrapper {
    max-width: 60ch;
    margin-inline: auto;
}

Cacher un élément visuellement mais le garder accessible

HTML

<span class="vh">Texte</span>

CSS

.vh {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

Autre variante de masquage accessible

CSS

.vh-clip { clip-path: inset(50%); }

Variantes possibles : clip, absolute.