Bretzel

Bretzel est un outil d'assistance à la méthodologie Cube CSS conçu par l'agence web Alsacréations pour ses projets d'intégration.

Voir : http://bretzel.alsacreations.com/

Bretzel fournit :

un Reset CSS,
un annuaire de Layouts (compositions),
un Constructeur de classes utilitaires (en cours de développement).

Un Reset CSS

Le fichier reset CSS est un fichier employé à la base de tous nos projets CSS. Il apporte des fonctionnalités basiques utiles partout.

https://github.com/alsacreations/bretzel/blob/main/_reset/

Un annuaire de Layouts

Les "Layouts" sont des zones d'affichages destinées à gérer la façon dont les composants vont s'afficher et interagir entre eux.

https://github.com/alsacreations/bretzel/blob/main/_layouts/

Un Constructeur de classes CSS utilitaires

Enfin Bretzel est un Constructeur de classes CSS utilitaires et de variables CSS.

Renseigner le fichier _config.scss avec ses valeurs de breakpoints, de couleurs, de tailles, etc.
Compiler le fichier bretzel-variables.scss avec un compilateur Sass. Le fichier de destination contiendra toutes les variables CSS sous forme --color-secondary: pink; (il est ici généré dans le dossier public/).
Compiler le fichier bretzel-utilities.scss avec un compilateur Sass. Le fichier de destination contiendra toutes les classes utilitaires sous forme .bg-primary { background-color: var(--color-primary) } (il est ici généré dans le dossier public/).
Utiliser le fichier de Reset (dans public/), le fichier de variables et le fichier de classes utilitaires dans le framework CSS de votre choix.

Attention, aucune classe utilitaire n'est notée !important dans le fichier bretzel-utilities.css. Pour vous assurer de ne pas avoir de problèmes de cascade CSS, il est vivement conseillé d'importer les fichiers au sein de @layer.

Un peu d'histoire

Vers 2012, Alsacréations élabore son propre micro-framework nommé KNACSS, destiné à intégrer nos bonnes pratiques d'Accessibilité et demeurer très léger face aux usines à gaz telles que Bootstrap
De 2014 à 2020, KNACSS s'enrichit au fur et à mesure (grilles de mise en forme, composants-types). Plus complexe, plus contraignant à mettre à jour, … plus proche de Bootstrap
En 2020, Alsacréations adopte un framework CSS 100% axé sur des classes utilitaires, TailwindCSS.
À partir de 2022, nos Guidelines concernant Tailwind démontrent qu'on y trouve autant d'inconvénients que d'avantages, et que le principal avantage consiste en classes utilitaires bien spécifiques.

Licence

Auteur : Alsacréations

Les contenus de ce dépôt sont disponibles sous une licence Creative Commons « Attribution - Pas d'Utilisation Commerciale - Partage à l'Identique 2.0 France (CC BY-NC-SA 2.0) ».

alsacreations / bretzel