Bretzel, annuaire de Layouts CSS utilitaires [Revue de Presse]

Bretzel, annuaire de Layouts CSS utilitaires [Revue de Presse] Bretzel est un ensemble de Layouts utilitaires modernes et réutilisables, conçu par l'agence web Alsacréations pour simplifier la création de mises en page responsive. Ces outils sont inspirés du projet Every-Layout et de la méthode CUBE CSS.

Bretzel est un ensemble de Layouts utilitaires modernes et réutilisables, conçu par l'agence web Alsacréations pour simplifier la création de mises en page responsive.

Ces outils sont inspirés du projet Every-Layout et de la méthode CUBE CSS.

🎯 Principe

Les Layouts sont des styles utilitaires neutres qui gèrent l'agencement et l'interaction des composants entre eux, sans imposer de style visuel. Ils sont :

• Responsives par défaut
• Paramétrables via variables CSS
• Réutilisables sur tous vos projets

On les applique simplement avec l'attribut HTML data-layout sur l'élément.

📦 Installation

Copiez le fichier layouts.css dans votre projet et importez-le dans votre feuille de styles principale :

@import "layouts.css";

💡 Conseil : Placez ce fichier dans un @layer au-dessus de votre reset CSS pour une meilleure gestion de la cascade.

🧩 Layouts disponibles

• Stack : empilage vertical avec espacement consistant
• Cluster : disposition horizontale avec retour à la ligne automatique
• Autogrid : grille automatique responsive
• Switcher : bascule entre affichage horizontal et vertical
• Repel : écarte deux éléments aux extrémités
• Reel : défilement horizontal avec scroll-snap
• Duo : deux colonnes avec rapports personnalisables
• Boxed : conteneur centré avec largeur maximale

🚀 Utilisation

Appliquez un layout via l'attribut data-layout :

<div data-layout="stack">
  <div>Élément 1</div>
  <div>Élément 2</div>
  <div>Élément 3</div>
</div>

Modification des gouttières

Ajustez l'espacement avec data-gap :

<div data-layout="cluster" data-gap="l">
  <!-- Gouttière large -->
</div>

<div data-layout="stack" data-gap="xl">
  <!-- Gouttière extra-large -->
</div>

<div data-layout="autogrid" data-gap="none">
  <!-- Sans gouttière -->
</div>

Variables CSS

Personnalisez les layouts via des variables CSS :

:root {
  --gap-m: 1.5rem; /* gouttière par défaut */
  --gap-l: 2.5rem; /* gouttière large */
  --gap-xl: 4rem; /* gouttière extra-large */
}

📚 Documentation complète

Consultez la documentation interactive avec exemples et démos pour chaque layout.

🤝 Les outils Alsacréations

Cet outil fait partie d'un écosystème de services et bonnes pratiques CSS, les ressources suivantes vous seront sans doute aussi utiles qu'à nous !

• Kiwipedia : les Guidelines de l'agence Alsacréations.
• Reset : le reset CSS employé chez nous.
• Bretzel : Layouts réutilisables et utilitaires.
• Spätzi : Testez et corrigez vos contrastes de couleurs non accessibles.
• Fondue : Optimisation des polices pour le web.
• Hotpink : Encyclopédie des couleurs CSS nommées.
• KNACSS : styles modernes et accessibles pour les éléments HTML natifs courants.
• Schnapsit : Lorem Ipsum alsacien.
• MyDevice : Taille, résolution et infos de votre device.
• UniClaude : Explorateur de caractères Unicode.
• Quetsche : Compression d'images. Simple. Basique.

Publié par Alsacreations.com