Créer votre design : Personnalisation Sass & Bootstrap 5

Magix CMS s'appuie sur la puissance du préprocesseur Sass (SCSS) et du framework Bootstrap 5 pour vous offrir un système de design flexible, performant et modulaire.

Grâce à cette architecture, vous pouvez personnaliser l'apparence globale de votre site ou cibler précisément certains modules sans alourdir le chargement de vos pages.

1. Architecture des fichiers Sass

L'ensemble des fichiers de style se trouve dans le dossier /sass de votre thème. L'architecture est divisée entre des points d'entrée à la racine et des dossiers de structure.

A. Les points d'entrée (À la racine /sass)

À la racine du dossier Sass, vous trouverez plusieurs fichiers destinés à être compilés en CSS :

• global.scss : Fichier principal du site. Il regroupe le framework Bootstrap 5, la typographie, la mise en page (Header, Footer, Footbar) et les composants UI globaux

• home.scss : Dédié exclusivement aux styles de la page d'accueil.

• Fichiers des modules Core :

  • pages.scss : Styles pour la gestion des pages et sous-pages (.page-children)

  • catalog.scss : Styles dédiés au catalogue produits (.category-products)

  • news.scss : Styles pour les actualités et la grille de calendrier/agenda (.news-list, .calendar-grid)

  • gallery.scss : Appel du composant spécifique pour les galeries d'images

Pourquoi isoler les modules ?

Charger uniquement le CSS nécessaire sur la page consultée permet de maintenir d'excellentes performances SEO et d'optimiser les temps de chargement (Core Web Vitals).

B. Les dossiers de structure

Le dossier /sass s'organise selon la logique suivante :

Architecture du dossier SASS

scss/
│
├── global.scss                   # Point d'entrée principal (Layout et UI global)
├── home.scss                     # Styles spécifiques à la page d'accueil
│
├── # FICHIERS DÉDIÉS AUX MODULES CORE (À LA RACINE)
├── pages.scss                    # Module Pages (.page-children)
├── catalog.scss                  # Module Catalogue / Produits (.category-products)
├── news.scss                     # Module Actualités & Agenda (.news-list, .calendar-grid)
├── gallery.scss                  # Module Galerie (Import du composant gallery)
│
├── abstract/                     # 1. OUTILS ET VARIABLES (Silencieux)
│   ├── _core.scss                # Variables SASS & Mixins[cite: 11]
│   └── _bootstrap-icons.scss     # Chemin et définition des icônes Bootstrap[cite: 11]
│
├── bootstrap5/                   # 2. VENDORS (Framework Bootstrap 5)
├── bootstrap-bundles/            # 2. VENDORS (Moteur)[cite: 11]
│   └── _bootstrap-full.scss      # Intégration globale Bootstrap[cite: 11]
│
├── icofont/                      # 2. VENDORS (Icônes supplémentaires)[cite: 11]
│   └── _icofont.scss             # Police et classes Icofont[cite: 11]
│
├── base/                         # 3. BASE ET RACINE (Génération CSS)[cite: 11]
│   ├── _root.scss                # Variables CSS natives (:root)[cite: 11]
│   ├── _typography.scss          # Surcharge typographique[cite: 11]
│   └── _headings.scss            # Titres et hiérarchie[cite: 11]
│
├── components/                   # 4. COMPOSANTS CORE MAGIXCMS[cite: 11]
│   ├── _buttons.scss             # Boutons[cite: 11]
│   ├── _cards.scss               # Cartes[cite: 11]
│   ├── _badges.scss              # Badges[cite: 11]
│   ├── _table.scss               # Tableaux[cite: 11]
│   ├── _layout.scss              # Structure interne des composants[cite: 11]
│   ├── _menu.scss                # Menus et navigation[cite: 11]
│   ├── _youtube.scss             # Intégrations vidéos[cite: 11]
│   └── _gallery.scss             # Composant interne Galerie photos
│
├── layout/                       # 5. LAYOUT (Gabarit global)[cite: 11]
│   ├── _block.scss               # Bloc de contenu[cite: 11]
│   ├── _header.scss              # En-tête[cite: 11]
│   ├── _footer.scss              # Pied de page[cite: 11]
│   └── _footbar.scss             # Barre inférieure[cite: 11]
│
└── utilities/                    # 6. UTILITAIRES[cite: 11]
    └── _animations.scss          # Keyframes et classes d'animation[cite: 11]

2. Bonnes pratiques de modification

1. Modifier les couleurs & variables globales :

   • Pour changer la palette de couleurs, les espacements ou les variables du thème, éditez le fichier abstract/_variables.scss.

   • Pour ajuster les variables CSS dynamiques injectées au niveau du navigateur, modifiez base/_root.scss

2. Ajouter du style pour un module spécifique :

   • Si vous modifiez un module existant (ex: l'agenda ou les actus), travaillez directement dans le fichier de racine correspondant (news.scss)

   • Pour un style d'habillage général, préférez modifier ou étendre les fichiers dans components/ ou layout/

3. Compilation :

   • Utilisez votre compilateur Sass habituel (Dart-Sass, PhpStorm File Watchers, VS Code Live Sass Compiler).

   • Assurez-vous que la destination de compilation pointe vers le dossier CSS de votre thème.