Breeze Theme for Magento
It’s finally happened. Two months of active work and we are ready to tell you about our new Magento product.
Breeze Theme — is a great starter theme for your next unique design. Since it doesn’t use Luma as a parent theme it’s a super small and feature-rich theme: critical CSS, responsive images, a dark scheme, RTL support, and more.
Let’s do a quick overview of the main features and their technical implementation details.
General Approach
Theme CSS is written from scratch using LESS and automatically compiled by Magento. We did our best to keep CSS as small as possible, and achieved 13kB of critical CSS and 9kB of icons, animations, and focus/hover effects.
As for layout and template files, we decided to inherit them from Magento core modules. Just a few templates were changed, and a few layout updates were added on top of Magento layout update instructions.
This approach allows us easily integrate our modules and keep the same codebase for Luma-based and Breeze-based themes.
JS Stack
Breeze Theme uses our Breeze module. If you didn’t hear of it — it’s a drop-in replacement for the Luma js stack. You can read more about it in my previous posts.
Critical CSS
If you ever worked with a Luma-based theme, you know the way to write a proper CSS file:
Breeze theme uses a different approach. We do not split the styles per device but split them by layout shift causer. Here is what we are doing:
This allows having the separate critical CSS file that must be loaded synchronously, and non-critical styles that loaded asynchronously. Additionally, our approach is a lot easier to remember :)
Responsive Images
Breeze Theme provides perfectly sized images for the majority of modern devices. The sizes and srcset attributes are easily configurable via theme’s view.xml file:
Advanced Media Queries
Breeze Theme uses CSS custom properties for all colors and animation definitions. This allows implementing prefers-reduced-motion and prefers-color-scheme media queries in just 1kB of CSS:
Theme Colors
Did you notice color variables in the previous section? Yes, that’s a Tailwind 3.0 color palette and it’s fully available to use as less variables so you can change theme colors with a few lines on code. Here is how we declare default colors:
RGB color definition is used to provide even more control in CSS by composing RGB value with alpha channel:
RTL Support
We use swissup/module-rtl package for that. This package provides useful mixins to use for LTR/RTL-dependent properties.
Thanks for reading! I’ll include the link to the demo store when it will be ready.
