Written by Rich Samartino

One of the driving principles in software development is DRY – ‘Don’t Repeat Yourself’. This has led to the rise of package managers like PHP’s Composer, which is utilized by Magento 2 – one of the key differentiators between it and Magento 1.

In a similar way, Magento 2’s usage of the Less CSS preprocessor allows frontend developers to join the DRY movement. Instead of redeclaring font colors, page widths, or input border styles in multiple places, CSS preprocessors allow these values to be declared as variables.

An even more powerful feature is mixins, which allow entire blocks of styles to be declared as a kind of function, with or without arguments, that can then be used in multiple places. It is similar in concept to declaring a PHP abstract class which is then used as-is or modified by the implementing child class.

The Magento team built an extensive frontend library utilizing Less variables and mixins so that developers can customize the default theme with minimal amounts of custom code. Below, I’ll show some examples how to do this, and highlight some other useful features to make your frontend Magento 2 development a little easier.

Utilizing the Magento UI Library 

 

 

 

 

 

 

 

 

 

 

 

 

 

As documented in Magento DevDocs, your custom theme can totally transform the look and feel of default Magento styles simply by redefining a few Less variables, as shown in this example:

Ideally, your variable redefinitions should go in <theme_dir>/web/css/source/_extend.less (they can also go in <theme_dir>/web/css/source/_theme.less, but this will override the parent theme’s _theme.less file.)

One question is, how do you know which variables to override? Consult the Magento UI Library docs, or inspecting default styles in the browser (made easier with CSS source maps and Grunt, covered below), will reveal which Less mixin is outputting the style, and inspecting that mixin will tell you which variable contains the value you want to change.

For example, the Luma theme styles primary action buttons here with a mixin defined here. Looking at that mixin, you can see that various button styles default to Less variables; for example the background color defaults to the @button-primary__color variable. So, redefining the @button-primary__color in your _extend.less file will change the background color of those buttons throughout the website.

It’s worth reading through the DevDocs on this topic and familiarizing yourself with all of the different mixins and variables used by the UI Library because it will save you a lot of lines of code now and make your styles much more maintainable and extendable in the long run – unless you’re a WET programmer – ‘we enjoy typing’ 😉

Using Mixins Defined in _utilities.less

Some handy (and less documented, as far as I can tell) mixins are located in _utilities.less. Some styles, like flexbox, require vendor prefixes to maintain compatibility with older browsers. Magento wrote a mixin to save you from typing out these prefixes. There’s also a more generic .lib-css() mixin that will output these vendor prefixes for any CSS style if the @_prefix argument is specified.

Again, it could be worth spending a few minutes perusing _utilities.less since some other handy mixins are included, like .lib-url which makes referencing asset urls a little easier (but mysteriously isn’t used in core code anywhere…)

All Styles Should Be Wrapped in Magento Media Query

Personally I don’t think this was a great idea by Magento, but all styles, even those which don’t target a certain screen size, should be wrapped in a media query, or else they will be output in both styles-m.css and styles-l.css, making browser debugging harder and file sizes bigger. You can find many examples of these media queries in core code, including here.

Compiling Styles with Grunt

Your frontend development will be made much easier by using Grunt to compile styles, rather than clearing pub/static and relying on PHP to process Less styles. Grunt compiles styles faster and produces CSS source maps, which allow you to see exactly which Less file styles are coming from in your browser. Grunt setup and usage is well documented here.

Conclusion

As you can see above, taking some time to investigate Magento’s Less-based UI Library will make writing styles for Magento much more interesting, less repetitive and more maintainable.

While this is all a great improvement over writing styles in .css files, technologies such as Less and Grunt, originally included in Magento during its development ~5 years ago, have been surpassed in popularity or technological superiority by Sass, Gulp, npm scripts, webpack and probably many other technologies I’m not aware of. Additionally, Magento might have chosen to base its default styles on a more actively developed library like Bootstrap, which can be included in a project’s build pipeline using Sass files and extended similarly to how I described extending Magento’s homegrown UI Library above.

So, try to master, but don’t feel limited by Magento’s default styles framework. Here at Crimson Agility’s Arizona office, our goal is to make your code as DRY as the Sonoran Desert 🙂

Until next time, let’s get social! Like us on Facebook, follow us on Twitter, Instagram and on LinkedIn.

 

About the Author: Drawn to the open source, modern architecture of Magento 2, Rich has channeled his passion for technology into mastering the trade of E-Commerce Engineer. Originally an IT major, Rich spent several years away from technology exploring many ‘offline’ aspects of life, picking up skills such as knitting and guitar-playing, but eventually gravitated back to technology to build web applications for several nonprofits. With the seed of object-oriented web development planted, Rich continued to blossom as a web developer with an innovative sleep technology company, playing an integral role in launching its new Magento 2 website. Hungry for more Magento 2 experience, Rich has landed at Crimson Agility, where he looks forward to applying his talents to build you a great website!