Des Layouts

Les "Layouts" sont des zones d'affichages neutres destinées à gérer la façon dont les composants vont s'afficher et interagir entre eux. Les Layouts sont automatiquement flexibles (sans media queries) et destinés à être réutilisables.

Autogrid

Layout en grille automatique avec des colonnes de même largeur.
  • Principe : Grille responsive où les enfants s'organisent automatiquement en colonnes de même largeur. Le nombre de colonnes s'adapte en fonction de l'espace disponible.
  • Déclencheur : Largeur minimale des colonnes définie par une variable.
  • Enfants : Deux ou plusieurs
  • Gouttière : Oui
  • Mise en place : ajouter la classe autogrid sur l'élément parent et modifier les variables si nécessaire.
  • Variables (à adapter à chaque usage) :
    • --col-min-size (largeur minimale des colonnes)
    • --autogrid-gutter (espace entre les éléments)
  • Attributs HTML : data-align="start" (alignement vertical des enfants)

Switcher

Layout composé d'enfants de même largeur s'affichant horizontalement ou sur une colonne.

  • Principe : Ce layout est composé d'enfants de même taille, s'affichant par défaut verticalement, ou horizontalement selon l'espace disponible.
    • Mobile : Une colonne verticale (quel que soit le nombre d'enfants).
    • Desktop : X colonnes horizontales (X = le nombre d'enfants).
  • Déclencheur : Point de rupture 48rem
  • Enfants : Deux ou plusieurs
  • Gouttière : Oui
  • Mise en place : ajouter la classe switcher sur un élément parent et modifier les variables / attributs si nécessaire.
  • Variables CSS: --switcher-gutter (espace entre les enfants)
  • Attributs HTML : data-align="start" (alignement vertical des enfants)

Cluster

Layout qui regroupe des éléments avec espacement uniforme et retour à la ligne automatique. Également utilisable pour aligner simplement des éléments horizontaux.

  • Principe : Ce layout permet d'organiser deux éléments de tailles variables avec un espacement uniforme entre eux. Les deux éléments passent automatiquement à la ligne quand l'espace est insuffisant, tout en maintenant leur alignement.
  • Déclencheur : Espace disponible dans le conteneur parent.
  • Enfants : Deux ou plusieurs
  • Gouttière : Oui
  • Mise en place : ajouter la classe cluster sur l'élément parent et modifier les variables si nécessaire.
  • Variables CSS: --cluster-gutter (espace entre les enfants)
  • Attributs HTML : data-align-h="end" (alignement horizontal des enfants), data-align-v="start", data-align-v="stretch" (alignement vertical des enfants)

Repel

Layout qui écarte les éléments aux extrémités avec un espacement minimal.

  • Principe : Ce layout place les éléments aux extrémités opposées du conteneur, en maintenant un espacement minimal entre eux. Lorsque l'espace devient insuffisant, les éléments passent automatiquement en colonne.
    • Mobile : Une colonne verticale alignée à gauche.
    • Desktop : Un enfant à gauche, l'autre à droite.
  • Déclencheur : Espace disponible dans le conteneur parent.
  • Enfants : Deux
  • Gouttière : Oui
  • Mise en place : ajouter la classe repel sur l'élément parent et modifier les variables si nécessaire.
  • Variables CSS: --repel-gutter (espace entre les enfants)
  • Attributs HTML : data-align-v="start", data-align-v="stretch" (alignement vertical des enfants)

Reel

Layout horizontal défilant avec scroll latéral sur petits écrans (avec snap-points).

  • Principe : Ce layout permet d'afficher une série d'éléments horizontalement avec un défilement latéral lorsque l'espace est insuffisant. Particulièrement utile pour les galeries d'images ou les listes de cartes sur mobile.
  • Déclencheur : Largeur du conteneur insuffisante pour afficher tous les éléments.
  • Enfants : Trois ou plusieurs
  • Gouttière : Oui
  • Mise en place : ajouter la classe reel sur l'élément parent et modifier les variables si nécessaire.
  • Variables CSS: --reel-gutter (espace entre les enfants), --item-size (largeur des éléments enfants)
  • Attributs HTML : data-scroll (permet de modifier la valeur de l'ancrage), data-scrollbar="hidden" (permet de masquer la barre de défilement)

TwoPanes

Layout pour aligner deux contenus côté à côte, avec un rapport de 2/3 1/3.

  • Principe : Ce layout permet de placer deux contenus côté à côte, avec un rapport de 2/3 1/3. Il passe automatiquement en colonne quand l'espace est insuffisant. Idéal pour les blocs "image + texte" ou "input + submit".
    • Mobile : Une colonne verticale occupant toute la largeur du parent.
    • Desktop : Un enfant à gauche, l'autre à droite.
  • Déclencheur : Point de rupture 48rem
  • Enfants : Deux
  • Gouttière : Oui
  • Mise en place : ajouter la classe twopanes sur l'élément parent et modifier les variables si nécessaire.
  • Variables CSS: --twopanes-gutter (espace entre les enfants)
  • Attributs HTML : data-direction="rtl" (permet d'inverser les rapports), data-size="auto" (adapte la taille du premier enfant à "auto")

L'annuaire de Layouts

Choisis ton layout en fonction de tes besoins, lis la documentation fournie dans le fichier CSS puis tu n'as plus qu'à récupérer le code source du layout choisi. L'ensemble des Layouts est disponible sur Github. en libre accès Open Source.

See the Pen autogrid by Alsacreations (@alsacreations) on CodePen.

Liquid

Liquid est le nom d'un agencement réalisé en CSS Grid Layout compatible avec l'affichage de blocs qui "sortent" de la maquette, généralement appelés full-bleed, breakout, hero ou splash.

découvrir Liquid

Des Snippets

Les Snippets sont des bouts de code HTML, CSS et JavaScript apportant certaines fonctionnalités pratiques (scroll-to-top, theme switcher, etc.)

Alsacréations a réuni ses snippets les plus utiles dans une collection Codepen.

annuaire de snippets