The Breeze theme for Magento 2 stands out for its performance, clean structure, and flexible customization.
Unlike the Luma theme (and its Magento UI Library), Breeze offers a more modern and straightforward approach to managing CSS/LESS styles.
Organizing LESS Files in a Breeze Theme
web/css/
├── abstracts/
│ └── variables/
│ ├── _colors_extend.less
├── pages/
│ └── _homepage.less
├── _extend.less
├── _custom.less
Managing Imports: Overrides vs Custom Styles
In web/css/_extend.less, you import files meant to override or extend existing theme styles, such as:
@import ‘abstracts/variables/_colors_extend’;
In web/css/_custom.less, you import files that contain entirely custom styles — for elements that don’t exist in the base theme, such as:
@import ‘pages/_homepage’;
Atomic Design & Breeze: a modular and scalable structure
The Breeze theme aligns perfectly with the Atomic Design methodology, which helps build web interfaces in a structured, modular, and scalable way.
This approach breaks down the interface into five hierarchical levels:
-
Atoms: The smallest elements, such as a button, a form field, or a heading.
-
Molecules: Simple combinations of atoms (e.g. a search input with a button).
-
Organisms: More complex groups, like a full header or a product card.
-
Templates: Page structures that organize blocks visually, without real content.
-
Pages: The final rendered pages, integrating actual content for each page type.
Mapping Breeze’s Folder Structure to Atomic Design
The folder structure in web/css/ within Breeze closely mirrors the levels of Atomic Design:
-
Atoms → abstracts/ and base/ : This is where you’ll find foundational styles like colors, fonts, variables, buttons, and inputs.
-
Molecules → components/ : Each file represents a small, reusable group of atoms (e.g. an alert box with a close button).
-
Organisms → layout/ : These files define more complex sections such as the header, footer, sidebar, or the order summary block.
-
Templates → pages/ : This folder contains page layouts for different parts of the site (e.g. homepage, cart, checkout…).
-
Pages → rendered by Magento through .phtml files, which inject the actual content dynamically.
Real-World Example: The “Order Summary” Block in Checkout
Let’s look at a practical example to better understand this architecture:
-
Atom: A simple “Place Order” button is styled in base/_buttons.less, and the price text styling comes from base/_typography.less.
-
Molecule: A block displaying the “Total” label and its amount is defined in components/_totals.less.
-
Organism: The complete order summary block (including total, tax, discounts…) is styled in layout/checkout/_summary.less.
-
Template: The global layout of the checkout page is found in pages/_checkout.less.
-
Page: The final output is rendered on the /checkout URL, with real content injected dynamically by Magento.