Strive is our second product that aims to improve Magento experience. This time, its 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.
Especially the ones that the community perceives as the next logical step. Going back to the roots with CSS, only this time, extending it via Javascript in order make up for the obvious limitations it has.
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.
We created "Strive" for this exact reason. The postCSS choice is the right one as we believe it is the future of web development as CSS naturally evolves.
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.
PostCSS
Based on JavaScript. PostCSS packages syntax is transformed into CSS much more quickly
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 modularity 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 Structure
PostCSS files are organised inside web/src/preCSS folder. Main style.css and print.css are compiled inside theme's "web/css" and "pub/static" CSS folder.
The styles.css has settings.css and files from lib and 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.
CSS Compilation
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
paths.cssSrc
app/design/fronted/Trive/theme-name
paths.cssDest:
pub/static/frontend/Trive/theme-name/
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 theme.xml.
The 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 Trive/blank CSS.
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:Trive/blank/web/src/preCSS/_theme_/header.css
-> Trive/theme-name/web/src/preCSS/_theme_/header.css
Test was performed on settings.css and header.css.
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 Tasks
Default tasks
The Gulp task - Starts a default gulp task (css, static, watch and browser-sync tasks). At Trive, we mostly use this one.
CSS gulp tasks
Two main gulp src files are styles.css and print.css.
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.
Static task
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)
Watch task
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.
Browser-sync
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 var/cache, var/generation, var/view_preprocessed and pub/staticfolder, except .htaccess, Magento blank and Magento Luma theme.
gulp deploy - It's a shorthand for bin/magento setup:static-content:deploy.
What's next
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:
https://github.com/trive-digital/Strive
Checkout our demo here:
https://strive.public.trivedev.com/
Thanks for reading and do leave your feedback, we'd love to hear from you.