Strive is our second product that aims to improve Magento experience. This time, it’s aim is making significant improvements to the frontend development workflow. As a Magento 2 starter theme it is up to you to make it look good. We have already taken care of the performance and ease of development.
Magento 2 came out with improvements in many areas, including the ones on the frontend. Prototype was replaced by jQuery, templates are now based on HTML5 & CSS3, built-in LESS preprocessor and Knockout JS.
By the time “Magento 2” came out, more advanced web technologies rapidly evolved and began to gain traction. We feel that it should follow the same path to easier and progressive web development.
As soon as we dived into Magento 2, we realised that Magento frontend development could be improved even more by using latest frontend technologies web developers use today.
The thing we believe is going to make a difference is PostCSS.
Magento frontend development process can always be improved especially by making it easier and faster.
Pragmatically, this is what we needed in our day to day development and postCSS delivered:
- Faster CSS Compilation
- Instant CSS Browser Injection
- Painless Static Content Deployment
As of now, we think that the goals are initially achieved and battle tested in practice working on several Magento 2 custom projects.
Check out how all this works, our findings and how to contribute to this open source project.
Strive use modern web tech stack, PostCSS, Browsersync and Gulp.
Modularity – Use what you actually need and create your own environment.
Unlike LESS or SASS which comes with nesting, variables, mixins, import… by default, using PostCSS means you can write plain old CSS or mix in LESS or any other syntax and helpers you need.
That’s where the modularit comes to shine by using PostCSS plugins.
Variable support? Install postcss-simple-vars plugin for example.
Nesting support? Install postcss-nested. There are many other plugins available here on npm site but you get the gist of it..
Plugins which offer some type of LESS/SASS features usually have very similar syntax to those. Strive PostCSS has somewhat of SASS-like feel.
“Strive” – Magento 2 starter theme features:
- Ultra Fast CSS compilation thanks to PostCSS & Gulp.
- BrowserSync – instant CSS injecting into browser & weinre support
- Child theme support / realtime PostCSS theme fallback
- Theme static content being watched & transferred directly into ‘_pub/static_’ via Gulp. *No need to use Magento content deploy during development!
- Minimal footprint – Small as possible set of PostCSS base styles and settings needed to get a working development system
- Additional gulp tasks that come in handy during development
- Set of postCSS packages (SASS-like environment) needed to get a good development workflow
*UPDATE: Magento introduced some improvements to static code deployment in v2.1.8.
PostCSS files are organised inside
web/src/preCSS folder. Main
print.css are compiled inside theme’s
"pub/static" CSS folder.
settings.css and files from
theme folders are imported.
Lib – contains some mixins, reset.css, box-sizing and bare minimum of styles needed for certain elements. Theme – contains styles related to a theme.
Bear in mind that Strive is not a port of blank (less) Magento theme and it does not rely on blank or luma theme (It doesn’t have a parent theme).
Note that Magento blank theme comes with some js files.
This project’s goal was to introduce PostCSS only. JS files are left intact to achieve full Magento compatibility.
Here’s how STRIVE performs. Take a look at this:
Test was done on ‘settings.css‘ and gulp, task execution time was between 215ms & 285ms.
(Tested on MacBook Pro i5/8GB RAM/SSD)
Creating a child theme with realtime PostCSS theme fallback
Child theme will need to have
styles.css inside the same folder structure like Strive (
"web/src/preCSS/"), so you’ll need to copy this file from
Trive/blank to the child theme.
After this, you’ll probably want to override
settings.css and desired postCSS files. Don’t forget to add a parent theme into
postcss-import constantly watches newly imported CSS files inside
Trive/_theme-name_ and if it can’t find them here, it’ll look into
Trive/blank. To override existing blank theme CSS file, add the CSS file with the same name and path inside the child theme. The
postcss-import will include that file instead of
All of this happens in realtime, which means as soon as a new child theme override file is created, CSS gulp task recompiles it and changes are immediately injected into the browser. If a child theme file gets deleted, fallback kicks in and the blank theme file is now compiled.
Same process happens again, CSS task recompiles CSS, and changes are injected into the browser.
File override example:
Test was performed on
Gulp task execution time was between 574ms & 864ms. We expected it would probably be slower as
postcss-import checks two paths, blank and child theme but we were pleasantly surprised with it actually being fast.
(Tested on MacBook Pro i5/8GB RAM/SSD)
Note that header looses its styling once we make child theme override with new
header.css, as it’s actually empty.
Gulp task – Starts a default
gulp task (
browser-sync tasks). At Trive, we mostly use this one.
CSS gulp tasks
Two main gulp src files are
After PostCSS processing, compiled CSS files are generated into theme’s CSS folder (Strive already comes with pre-compiled CSS) and ‘pub/static’ CSS folder. Sourcemaps are a part of CSS task by default and
cssnano processor (minification) with comments.
For production, just comment source maps and uncomment
cssnano. Development and production modes will be probably added in the upcoming versions of Strive.
Strive’s compiled and minified
styles.css is around 57KB (one CSS file with responsive styling).
This is significantly smaller (approx. 4 times smaller) than Magento blank theme which has ‘styles-m.css’ (254KB) &
styles-l.css (42KB) being both loaded on page load and
styles-l.css for media screens above 768px.
One reason for results like this is our effort to a get working base Magento theme with less CSS selectors as possible. It is meant to be used as a starter theme.
PostCSS plugins used on this project:
- postcss-import – PostCSS plugin to transform @import rules by inlining content.
- postcss-simple-vars – PostCSS plugin for Sass-like variables
- postcss-extend – As close to cssnext @extend as possible for PostCSS
- postcss-nested – PostCSS plugin to unwrap nested rules like how Sass does it.
- autoprefixer – Parse CSS and add vendor prefixes to CSS rules using values from the Can I Use website
- cssnano – A modular minifier, built on top of the PostCSS ecosystem.
- css-mqpacker – Pack same CSS media query rules into one media query rule.
- postcss-mixins – PostCSS plugin for mixins
- lost – LostGrid is a powerful grid system built in PostCSS that works with any preprocessor and even vanilla CSS.
- postcss-responsive-type – PostCSS plugin that adds responsive magic to font-size
- postcss-custom-media – PostCSS plugin to transform W3C CSS Custom Media Queries to more compatible CSS
- postcss-color-function – PostCSS plugin to transform W3C CSS color function to more compatible CSS.
It works on CSS, HTML, images and JS files. These files, if changed, are automatically transferred from theme to
pub/static folder, so deployment of Magento static content would not be needed during development.
Files inside theme folder don’t have the same folder structure as in
pub/static folder (for example
'web' folder is not present in
pub/static). This was also considered and it should be working fine for you.
If the Strive package is installed via composer, both packages,
theme-frontend-strive and its dependency
strive-gulp are installed inside
vendor/trive (same parent directory) unlike manual install where it’s advised to have the
gulpfile inside some folder within Magento root. Static task resolves this problem as well.
Actually, this would not be needed if only absolute paths are used, but it was necessary to create relative paths as the task is faster that way.
(Tested on MacBook Pro i5/8GB RAM/SSD)
Gulp-watch package is added to gulpfile so next to modified files, newly added files are watched also. Default
gulp.watch has this feature also but we experienced certain issues with new folders being added and that was the reason to use the gulp-watch package. In short, it’s not needed to restart gulp task if new files are added.
Great tool when it comes to CSS browser injection and synchronisation. No need for additional browser
livereload extensions. It has “Weinre” support built in, so wireless mobile debugging is baked in.
Additional gulp tasks
gulp clean – Removes everything in
.htaccess, Magento blank and Magento Luma theme.
gulp deploy – It’s a shorthand for
We’ve added these features to our roadmap:
- Support for email styling
Let there be more light
Strive comes with CSS compiled, so once it’s installed, and static content is deployed, you’ll get a working starter theme. In order to modify theme’s styling you’ll need to have
gulp and its plugins installed as explained above.
If for some objective reason compiling CSS in your development environment is a show stopper, do not use STRIVE!
Strive is focused on e-commerce teams with full developer support.
Strive repository & installation details:
Checkout our demo here:
Thanks for reading and do leave your feedback, we’d love to hear from you.