Aller au contenu principal

normal.css — Variables CSS et fondations responsive

Environ 2 min

normal.css — Variables CSS et fondations responsive

📖 Introduction

Le fichier normal.css constitue la base du design system.
Il définit l’ensemble des variables CSS globales, la gestion des thèmes clair / sombre, une palette de couleurs complète, ainsi qu’un système de mise en page responsive basé sur des breakpoints standards.

Ce fichier est conçu pour être :

  • Central
  • Réutilisable
  • Facilement extensible
  • Compatible avec tous les frameworks ou Web Components

📦 Installation / Prérequis / Dépendances

Prérequis

  • Navigateur moderne supportant les CSS Custom Properties
  • Aucun préprocesseur requis

Installation

<link rel="stylesheet" href="normal.css">

Aucune dépendance externe n’est nécessaire.

🎨 Variables globales

Bordures (Border Radius)

--border-radius: 0.375rem;
--border-radius-sm: 0.25rem;
--border-radius-lg: 0.5rem;
--border-radius-xl: 1rem;
--border-radius-xxl: 2rem;
--border-radius-full: 999px;

Définit des rayons standardisés pour garantir une cohérence visuelle sur l’ensemble des composants.

Ombres (Box Shadow)

--shadow-sm;
--shadow;
--shadow-md;
--shadow-lg;
--shadow-xl;
--shadow-2xl;

Système progressif d’ombres permettant de gérer la hiérarchie visuelle et la profondeur des composants.

Espacements (Padding & Margin)

--padding-1  →  --padding-10
--margin-1   →  --margin-10

Échelle homogène basée sur des incréments de 0.25rem, permettant un espacement cohérent et lisible.

🌗 Gestion des thèmes

Thème sombre

body[data-teme=dark] {
  --background-page-color: #2b3035;
  --background-component-color: #212529;
}

Le thème sombre est activé via l’attribut :

<body data-teme="dark">

Thème clair (par défaut)

body[data-teme=light], body {
  --background-page-color: #f8f9fa;
  --background-component-color: #fff;
}

Le thème clair est appliqué par défaut si aucun attribut n’est défini.

🎨 Palette de couleurs

Le fichier définit une palette complète par familles de couleurs, chacune déclinée de 50 à 900.

Exemple : Bleu

--bleu-50:  #f6f7ff;
--bleu-100: #dadefe;
--bleu-200: #bac2fd;
...
--bleu-900: #2b3057;

Couleurs disponibles

  • Bleu
  • Rouge
  • Vert
  • Violet
  • Rose
  • Gris
  • Orange

Chaque palette est conçue pour :

  • États UI (hover, active, disabled)
  • Thèmes clairs et sombres
  • Accessibilité et contraste

📐 Layout & Responsive

Conteneur principal

La classe .main-container permet de centrer et limiter la largeur du contenu selon la taille de l’écran.

📱 Mobile

@media (max-width: 640px) {
  .main-container {
    margin-left: auto;
    margin-right: auto;
  }
}

📱 Tablette

@media (min-width: 768px) {
  .main-container {
    max-width: 768px;
  }
}

💻 Desktop

@media (min-width: 1024px) {
  .main-container {
    max-width: 1024px;
  }
}

🖥️ Large écran

@media (min-width: 1280px) {
  .main-container {
    max-width: 1280px;
  }
}

Ce système s’inspire des breakpoints modernes utilisés par Tailwind et Bootstrap.

🚀 Utilisation

Exemple simple

<div class="main-container" style="
  background: var(--background-component-color);
  padding: var(--padding-4);
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-md);
">
  Contenu
</div>

🎯 Conclusion

Le fichier normal.css pose des fondations solides pour tout projet front-end :

  • Variables CSS centralisées
  • Thèmes clair / sombre simples à activer
  • Palette de couleurs complète
  • Layout responsive cohérent
  • Aucune dépendance

Il est parfaitement adapté à :

  • Design system
  • Web Components
  • Applications SPA
  • Projets multi-thèmes

📜 Code complet

/* normal.css */

:root {
  --border-radius: 0.375rem;
  --border-radius-sm: 0.25rem;
  --border-radius-lg: 0.5rem;
  --border-radius-xl: 1rem;
  --border-radius-xxl: 2rem;
  --border-radius-full: 999px;
  ...
}