Aller au contenu principal

Module SCSS.9 – Projet SCSS

Objectif​

Créer un design system structuré avec SCSS pour valider toutes les compétences SCSS acquises : architecture, mixins, fonctions, organisation.

Théorie​

Spécifications du projet​

Application : Design System SCSS complet

Créer un design system professionnel avec toutes les fonctionnalités SCSS apprises.

Spécifications du projet​

Fonctionnalités requises​

1. Architecture 7-1

  • Structure complète (abstracts, base, components, layout, etc.)
  • Partials organisés
  • Main.scss avec imports ordonnés

2. Variables et configuration

  • Variables pour couleurs, espacements, typographie
  • Maps pour thèmes, breakpoints
  • Configuration centralisée

3. Mixins et fonctions

  • Bibliothèque de mixins réutilisables
  • Fonctions helper (rem, color, etc.)
  • Mixins responsive

4. Composants stylisés

  • Boutons avec variantes
  • Cards avec modificateurs
  • Formulaires stylisés
  • Navigation

5. Système de grille

  • Grille responsive générée avec @for
  • Classes utilitaires

6. Génération automatique

  • Classes utilitaires avec @each
  • Système de couleurs dynamique
  • Espacements automatiques

7. Thèmes

  • Support dark mode
  • Variables pour thèmes
  • Génération automatique

Structure du projet​

Organisation :

design-system/
├── scss/
│   ├── abstracts/
│   │   ├── _variables.scss
│   │   ├── _functions.scss
│   │   ├── _mixins.scss
│   │   └── _placeholders.scss
│   ├── base/
│   │   ├── _reset.scss
│   │   └── _typography.scss
│   ├── components/
│   │   ├── _buttons.scss
│   │   ├── _cards.scss
│   │   ├── _forms.scss
│   │   └── _navigation.scss
│   ├── layout/
│   │   ├── _grid.scss
│   │   └── _container.scss
│   ├── utilities/
│   │   ├── _spacing.scss
│   │   └── _colors.scss
│   └── main.scss
├── css/
│   └── main.css (compilé)
└── package.json

Guide de développement​

Étape 1 : Setup (1h)

  • Structure 7-1
  • Configuration npm scripts
  • Fichiers de base

Étape 2 : Abstracts (2h)

  • Variables (couleurs, espacements, typographie)
  • Maps (thèmes, breakpoints)
  • Fonctions (rem, color, etc.)
  • Mixins de base

Étape 3 : Base (1h)

  • Reset
  • Typographie
  • Utilities de base

Étape 4 : Composants (3h)

  • Boutons avec mixins
  • Cards avec modificateurs
  • Formulaires
  • Navigation

Étape 5 : Système (2h)

  • Grille générée avec @for
  • Classes utilitaires avec @each
  • Thèmes

Étape 6 : Documentation (1h)

  • Commentaires
  • README
  • Guide d'utilisation

Critères d'évaluation​

Architecture (25%) :

  • Structure 7-1 complète
  • Partials organisés
  • Imports ordonnés

Fonctionnalités (25%) :

  • Variables et maps
  • Mixins réutilisables
  • Fonctions helper

Génération (20%) :

  • Classes automatiques (@for, @each)
  • Système de grille
  • Utilities générées

Composants (15%) :

  • Boutons, cards, forms stylisés
  • Variantes et modificateurs
  • Réutilisabilité

Code qualité (15%) :

  • Bonnes pratiques
  • Documentation
  • Performance

Exercice - Développement​

Abstracts​

Variables :

  • Palette de couleurs complète
  • Espacements (xs à xl)
  • Typographie (tailles, weights)
  • Breakpoints

Maps :

  • $theme-colors : Couleurs du thème
  • $spacings : Espacements
  • $breakpoints : Breakpoints responsive

Fonctions :

  • rem($pixels) : Conversion px → rem
  • color($key) : Obtenir couleur depuis map
  • breakpoint($key) : Obtenir breakpoint

Mixins :

  • button($color) : Bouton avec couleur
  • media($breakpoint) : Media query avec @content
  • clearfix : Clearfix
  • truncate : Texte coupé

Base​

Reset :

  • Normalisation moderne
  • Box-sizing border-box

Typographie :

  • Hiérarchie (h1-h6)
  • Line-height optimal
  • Variables pour tailles

Components​

Boutons :

  • Base avec placeholder
  • Variantes (primary, secondary, success)
  • Tailles (small, medium, large)
  • États (hover, active, disabled)

Cards :

  • Base avec mixin
  • Modificateurs (featured, compact)
  • Utilisation de variables

Formulaires :

  • Inputs stylisés
  • États (focus, invalid)
  • Labels accessibles

Système​

Grille :

  • 12 colonnes générées avec @for
  • Responsive avec mixins
  • Classes utilitaires

Utilities :

  • Spacings générés avec @each
  • Couleurs générées avec @each
  • Classes utilitaires automatiques

Thèmes :

  • Variables pour light/dark
  • Génération avec @each
  • Support prefers-color-scheme

Validation finale​

Checklist :

  • Structure 7-1 complète
  • Variables et maps organisées
  • Mixins réutilisables
  • Fonctions helper
  • Composants stylisés
  • Système de grille généré
  • Classes utilitaires automatiques
  • Thèmes supportés
  • Code selon bonnes pratiques
  • Documentation complète

Tests :

  1. Compilation : CSS généré sans erreurs
  2. Organisation : Structure claire
  3. Réutilisabilité : Mixins/fonctions utilisées
  4. Génération : Classes automatiques fonctionnelles
  5. Performance : CSS optimisé

Ressources​

Si vous êtes bloqué :

  • Revisitez les modules précédents
  • Documentation Sass : sass-lang.com
  • Exemples de design systems

Bonnes pratiques :

  • Code organisé
  • Documentation complète
  • Réutilisabilité maximale

Objectif final​

Créer un design system SCSS complet qui démontre :

  • Maîtrise de l'architecture SCSS
  • Utilisation avancée (loops, conditions, maps)
  • Génération automatique de classes
  • Système scalable et maintenable
  • Code professionnel

Validation : Vous avez terminé SCSS quand votre design system est fonctionnel, organisé et utilise toutes les fonctionnalités avancées.

Félicitations ! Vous avez terminé l'apprentissage complet du SCSS. Vous êtes maintenant capable de créer des design systems professionnels et maintenables.