A Guide to Snowdog Blank and Magento 2

Patrick Whitehouse | October 5th 2018

 What is Snowdog Blank?

A Magento 2 theme developed by Snowdog, an agency based in Poland. Snowdog Blank is the same as the default Magento 2 blank theme but it uses SCSS rather than LESS. It includes a base blank theme with SCSS and a customised set of front-end tools (Frontools) to work hand in hand with the theme. Frontools uses Gulp to compile the SCSS into CSS rather than Grunt.

What features does Snowdog Blank have to offer?

At PushON we have been using Snowdog Blank for around three months and over this period, I’ve been blown away with its features and capabilities. It has reduced my development time and dramatically reduced the number of front-end bugs that appear accidentally.

Snowdog has developed the theme so that each module has its own set of SCSS files. This allows the developers at PushON to work on an individual module without worrying about deleting other developers’ work or even worse, working in the same file which will cause the dreaded merge conflicts. I particularly like the fact that Snowdog has created an SCSS variable for almost everything that they believe will differ from theme to theme. For example, in the typography SCSS file there are a bunch of variables which can be altered and customised to suit the theme’s needs. These range from font size, font colour, line height, font family and so on.

Before we moved over to using Snowdog Blank, I would occasionally struggle to think of variable names that other developers could remember and reuse. Thanks to Snowdog’s expertise, it’s very unlikely that we will need to create any additional variables as we can simply edit the pre-exisitng ones.

What features does Frontools have to offer?

As with the Snowdog Blank theme, I was impressed with Frontools and the advance Gulp setup that it uses. The most useful feature of the Gulp setup, in my opinion, is the use of SCSS maps. During the development stage, the maps allow the developer to easily locate the file and line number where the initial styles are defined. This makes overwriting the styles simple as the developer can ensure the path is correct and matches Snowdog’s Blank theme.

Other features are included within the Gulp setup such as SCSS linting, JS linting, SVG sprite generator and so on. The Gulp setup also allows the developer to pass flags into the command they’re running. This is extremely useful at PushON when we’re developing a child theme that inherits from another theme. We’re able to pass a flag into the Gulp command which prevents Gulp compiling all the assets for each individual theme, and instead processes just the assets for the single theme that is passed.