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 :

Dossier Rôle & Contenu
abstract/

Variables & Outils silencieux (_variables.scss pour la palette/thème, _core.scss pour la logique Sass/mixins, _bootstrap-icons.scss). Ce dossier ne génère pas de CSS direct
bootstrap5/ & bootstrap-bundles/

Moteur Bootstrap 5 complet (_bootstrap-full.scss)
icofont/

Fontes d'icônes complémentaires
base/

Surcharges fondamentales (_root.scss pour les variables CSS natives, _typography.scss, _headings.scss)
components/

Composants UI internes (_buttons.scss, _cards.scss, _menu.scss, _youtube.scss, _gallery.scss, etc.)
layout/

Structure globale du gabarit (_header.scss, _footer.scss, _footbar.scss, _block.scss)
utilities/

Classes utilitaires et animations (_animations.scss)

 

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.

FAQ : Configuration

Immédiatement après l'installation, il est essentiel de configurer les paramètres généraux dans l'administration : définir le titre global du site, valider l'URL principale pour le maillage interne, sélectionner la langue par défaut et activer le protocole HTTPS pour sécuriser l'ensemble des échanges.

Magix CMS 4 permet d'injecter directement les feuilles de style (CSS/SCSS) de votre thème au cœur de l'éditeur TinyMCE. Cette fonctionnalité offre à vos rédacteurs un véritable rendu WYSIWYG ("what you see is what you get"), garantissant que la mise en page visualisée dans l'administration soit strictement identique à celle publiée sur le site.

Magix CMS 4 intègre deux niveaux d'optimisation : la mise en cache SQL native, qui stocke automatiquement les requêtes de base de données les plus lourdes pour soulager le serveur, et la mise en cache de fichiers optionnelle, qui génère des rendus statiques de vos pages pour un affichage instantané lors des pics de trafic.

Le mode Développement désactive les caches, active les logs d'erreurs et génère des Source Maps (.css.map) pour faciliter l'intégration et le débogage. À l'inverse, le mode Production active la minification des assets (CSS/JS) et enclenche les caches (SQL et fichiers) pour garantir des performances de chargement maximales et sécuriser le site.

Oui, Magix CMS 4 gère nativement les protocoles modernes HTTP/2 et HTTP/3. Cette gestion transparente permet la parallélisation du chargement des ressources (images, scripts, styles) sans nécessiter de configurations complexes, améliorant ainsi drastiquement les temps de réponse et vos scores Web Vitals.

Haut

Nous utilisons des cookies pour vous garantir la meilleure expérience, analyser notre trafic et vous proposer des contenus adaptés. En savoir plus.