Le thème Breeze pour Magento 2 se distingue par sa performance, sa simplicité de structure et sa souplesse de personnalisation. Contrairement au thème Luma (et sa Magento UI Library), Breeze offre une approche plus moderne et directe pour gérer les styles CSS/LESS.
Organisation des fichiers LESS dans un thème Breeze
web/css/
├── abstracts/
│ └── variables/
│ ├── _colors_extend.less
├── pages/
│ └── _homepage.less
├── _extend.less
├── _custom.less
Gérer les imports : overrides vs styles personnalisés
Dans web/css/_extend.less, on importe les fichiers destinés à surcharger ou étendre des styles existants du thème, comme par exemple :
@import ‘abstracts/variables/_colors_extend’;
Dans web/css/_custom.less, on importe les fichiers contenant des styles entièrement personnalisés, pour des éléments qui n’existent pas dans le thème de base, comme :
@import ‘pages/_homepage’;
Atomic Design & Breeze : une structure modulaire et évolutive
Le thème Breeze s’aligne parfaitement avec la méthodologie Atomic Design, qui permet de construire des interfaces web de manière structurée, modulaire et scalable. Cette approche décompose l’interface en cinq niveaux hiérarchiques :
-
Atomes (Atoms) : les plus petits éléments, comme un bouton, un champ de formulaire ou un titre.
-
Molécules (Molecules) : des combinaisons simples d’atomes (ex. un champ de recherche avec un bouton).
-
Organismes (Organisms) : des groupes plus complexes, comme un header complet ou une fiche produit.
-
Templates : des structures de page, qui organisent les blocs visuellement sans contenu réel.
-
Pages : le rendu final, intégrant le contenu réel pour chaque type de page.
Correspondance avec l’arborescence Breeze
L’organisation des dossiers dans web/css/ de Breeze reflète très bien ces niveaux :
-
Atoms → abstracts/ et base/ : ici on retrouve les fondations comme les couleurs, les polices, les variables, les boutons ou les inputs.
-
Molecules → components/ : chaque fichier correspond à un petit ensemble d’atomes réutilisables (ex. une alerte avec un bouton de fermeture).
-
Organisms → layout/ : ces fichiers décrivent des structures plus complexes comme un header, un footer, une sidebar ou un bloc résumé de commande.
-
Templates → pages/ : ce dossier regroupe les mises en page des différentes pages du site (ex. page d’accueil, panier, tunnel de commande…).
-
Pages → rendues par Magento via les fichiers .phtml, qui injectent le contenu réel.
Exemple concret : le bloc « Résumé de commande » dans le checkout
Prenons un cas réel pour mieux comprendre cette architecture :
-
Atome : un simple bouton « Passer commande » se trouve dans base/_buttons.less, et le style du prix dans base/_typography.less.
-
Molécule : un bloc contenant l’étiquette « Total » + son prix est défini dans components/_totals.less.
-
Organisme : l’ensemble du résumé de commande (avec le total, les taxes, les réductions) est stylisé dans layout/checkout/_summary.less.
-
Template : la structure globale de la page de checkout se trouve dans pages/_checkout.less.
-
Page : le rendu final est visible sur l’url /checkout, avec les données injectées dynamiquement par Magento.