Logo - laConsole

Formation Créer son Framework CSS | L'Architecture

Zoom sur les fichiers et dossiers constituant notre micro framework CSS.

Icône de calendrier MAJ en
Débutant
6 chapitres

Le code CSS de notre framework sera structuré selon l’arborescence suivante :

📁 microframework
└── 📁 css
    ├── 📁 base
    │   ├── 📄 _reset.css
    │   ├── 📄 _typography.css
    │   └── 📄 all.css
    ├── 📁 components
    │   ├── 📄 _button.css
    │   ├── 📄 _card.css
    │   ├── 📄 _alert.css
    │   └── 📄 all.css
    ├── 📁 layout
    │   ├── 📄 _container.css
    │   ├── 📄 _grid.css
    │   └── 📄 all.css
    ├── 📁 utilities
    │   ├── 📄 _utility1.css
    │   ├── 📄 _utility2.css
    │   ├── ...
    │   └── 📄 all.css
    ├── 📄 app.css
    └── 📄 config.css

Le code de notre framework sera réparti au sein de fichiers et dossiers définis dans un répertoire 📂 css.

Vous constatez que de nombreux fichiers sont préfixés d’un _.

Il s’agit d’une convention de nommage indiquant que ces éléments seront importés au sein de fichiers plus globaux (ici 📄 all.css). Ces fichiers sont plus couramment appelés « partials ».

Cette convention est aujourd’hui largement utilisée dans le développement web.

5 composantes

Notre framework sera constitué de 5 composantes principales : un fichier de configuration un reset, un système de layout, des composants et des classes utilitaires.

📄 config.css

Ce fichier rassemblera au sein de variables CSS les données relatives au Design System de l’interface :

  • Couleurs
  • Typographies
  • Layout
  • Etc.

📁 base

Pour travailler sur de bonnes bases, notre framework se doit de définir des styles par défaut élégants et cohérents pour nos balises HTML.

Cela passe par la création d’un « reset » et la gestion typographique des éléments textuels principaux.

📄 all.css est le fichier global qui va avoir pour rôle d’aggréger en un seul fichier l’ensemble des partials contenus dans le dossier 📁 base :

base/all.css
copié ! 
@import '_reset.css';
@import '_typography.css';

📁 layout

Le layout désigne la structure globale d’une interface utilisateur.

Il définit la disposition et l’organisation des différents éléments visuels. C’est entre autres à l’intérieur que seront définis :

  • Les conteneurs
  • La grille responsive

📄 all.css est le fichier global qui va avoir pour rôle d’agréger en un seul fichier l’ensemble des partials contenus dans le dossier 📁 layout :

layout/all.css
copié ! 
@import '_container.css';
@import '_grid.css';

📁 components

Les composants sont des éléments réutilisables de votre interface utilisateur. Notre framework CSS contiendra dans son cas des :

  • Boutons
  • Cartes (cards)
  • Boîte de feedback (alerts)

Les composants sont conçus pour être flexibles et réutilisables dans différentes parties de votre site ou de votre application.

📄 all.css est le fichier global qui va avoir pour rôle d’agréger en un seul fichier l’ensemble des partials contenus dans le dossier 📁 components :

components/all.css
copié ! 
@import '_card.css';
@import '_button.css';
@import '_alert.css';

📁 utilities

Les utilitaires contiennent des classes CSS qui opèrent des modifications de style spécifiques comme :

  • Les marges (margin, padding, gap)
  • Les dimensions (width, height…)
  • L’affichage (display)
  • La typographie (font-size, font-weight…)

Ces utilitaires aident à apporter des modifications rapides et précises à votre mise en page.

📄 all.css est le fichier global qui va avoir pour rôle d’aggréger en un seul fichier l’ensemble des partials contenus dans le dossier 📁 utilities :

utilities/all.css
copié ! 
@import '_utility1.css';
@import '_utility2.css';
@import '_utility3.css';

Fichier global 📄 app.css

📄 app.css aggrègera quant à lui l’ensemble des fichiers source du framework :

app.css
copié ! 
@import 'config.css';
@import 'base/all.css';
@import 'layout/all.css';
@import 'components/all.css';
@import 'utilities/all.css';

Les chapitres suivant traiteront un à un ces concepts.

Tester son framework

Je vous recommande de tester votre framework au fur et à mesure de cette formation afin de visualiser concrètement le rôle de chaque classe CSS.

Lions à cette page web l’ensemble de notre framework, aggrégé par le fichier 📄 app.css :

demo.html
copié ! 
<!DOCTYPE html>
<html lang="fr">
	<head>
		...
		<link rel="stylesheet" href="css/app.css">
	</head>
	...
</html>