Des Layouts ?

Les "Layouts" sont des styles utilitaires neutres destinées à gérer la façon dont les composants vont s'afficher et interagir entre eux. Les Layouts sont responsive, entièrement paramétrables et destinés à être réutilisables. On les applique simplement à l'aide d'un attribut HTML data-layout.

Stack

Layout vertical où l'espace entre chaque enfant est consistant.

  • Principe : Ce layout organise les éléments verticalement avec un espacement consistant entre chaque enfant. Idéal pour créer des listes ou des sections empilées avec un rythme vertical régulier.
  • Déclencheur : Aucun, fonctionne toujours en vertical.
  • Enfants : Deux ou plusieurs
  • Mise en place : ajouter l'attribut data-layout="stack" sur l'élément
  • Attributs HTML spécifiques : aucun
  • Attributs HTML globaux :
    • data-gap="xs|s|m|l|xl|none"
    • data-justify="start|end|center|space"
    • data-align="start|end|center|stretch"

Cluster

Layout qui dispose les éléments horizontalement avec espacement uniforme et retour à la ligne automatique.

  • 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
  • Mise en place : ajouter l'attribut data-layout="cluster" sur l'élément
  • Attributs HTML globaux :
    • data-gap="xs|s|m|l|xl|none"
    • data-justify="start|end|center|space"
    • data-align="start|end|center|stretch"

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
  • Mise en place : ajouter l'attribut data-layout="autogrid" sur l'élément
  • Variables spécifiques :
    • --col-min-size (largeur minimale des colonnes)
    • --grid-fill (mode de remplissage auto-fit ou auto-fill)
  • Attributs HTML globaux :
    • data-gap="xs|s|m|l|xl|none"
    • data-justify="start|end|center|space"
    • data-align="start|end|center|stretch"

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 : Largeur disponible dans le parent
  • Enfants : Deux ou plusieurs
  • Mise en place : ajouter l'attribut data-layout="switcher" sur l'élément
  • Variables spécifiques : --switcher-min-size (largeur minimale du parent (30rem))
  • Attributs HTML globaux :
    • data-gap="xs|s|m|l|xl|none"
    • data-justify="start|end|center|space"
    • data-align="start|end|center|stretch"

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 parent
  • Enfants : Deux ou plusieurs
  • Mise en place : ajouter l'attribut data-layout="repel" sur l'élément
  • Attributs HTML globaux :
    • data-gap="xs|s|m|l|xl|none"
    • data-justify="start|end|center|space"
    • data-align="start|end|center|stretch"

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 plus
  • Mise en place : ajouter l'attribut data-layout="reel" sur l'élément
  • Variables spécifiques : --item-size (largeur des éléments enfants)
  • Attributs HTML spécifiques :
    • data-scroll="start|end|center" (alignement de chaque enfant)
    • data-scrollbar="hidden" (barre de défilement masquée ou non)
  • Attributs HTML globaux :
    • data-gap="xs|s|m|l|xl|none"
    • data-justify="start|end|center|space"
    • data-align="start|end|center|stretch"

Duo

Layout pour aligner deux contenus côté à côte (rapport de 1/1 par défaut).

  • Principe : Ce layout permet de placer deux contenus côté à côte, avec un rapport de 1/1 par défaut, mais d'autres rapports sont possibles. 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 (768px)
  • Enfants : Deux précisément
  • Mise en place : ajouter l'attribut data-layout="duo" sur l'élément
  • Attributs HTML spécifiques :
    • data-split="1-1|2-1|1-2|1-3|3-1|1-4|4-1|1-auto|auto-1|reverse" (modifie le rapport entre les deux enfants, et/ou l'ordre d'affichage)
  • Attributs HTML globaux :
    • data-gap="xs|s|m|l|xl|none"
    • data-justify="start|end|center|space"
    • data-align="start|end|center|stretch"

Boxed

Layout centré horizontalement avec une largeur maximale définie.

  • Principe : Ce layout centre le contenu horizontalement et limite sa largeur maximale. Idéal pour créer des conteneurs centrés avec une largeur contrôlée, particulièrement utile pour les sections de contenu principal.
  • Déclencheur : Non
  • Enfants : Un ou plusieurs
  • Mise en place : ajouter l'attribut data-layout="boxed" sur l'élément
  • Variables CSS spécifiques  --boxed-max (largeur maximale du conteneur)
  • Attributs HTML spécifiques : data-boxed="small" (modificateur de la taille)

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 stack by Alsacreations (@alsacreations) on CodePen.