CSS & Sass Variables

ignition comes with an easy file for editing all your CSS and sass variables across the entire site. From font variables to grid variables to media queries down to colors. Everything is here. You don’t have to go digging anywhere else. The CSS variables have fallbacks for ie11 using Post CSS.

This is the first file you should edit when it comes to editing the CSS.

We will go through some of those variables now, although most of it is self-explanatory.
The variables file is located under assets/sass/code/variables.


Font variables control all the fonts across your site. You can set your fonts here, and if you loaded google fonts in the functions file you can add the font here now.

Speaking of fonts, it should be noted that the site is set to use a root font size of 62.5%.

This means you can set an item to 1.3rem and it will be equal to 13px. Rem’s on the site are also set to grow around 4 pixels on large screens. If you have an item that you do not want to grow, use pixels instead of rem for that element.


Colors can be added, changed and removed. You can change them easily. The colors are then applied to areas on your site using more variables. Using the applied variables means it will be easy to change it later. You can set –highlight to red at a later time, as opposed to setting –red to purple which would get confusing. However this system can be cumbersome, so you can feel free to use them as you see fit.

Layout Variables

These variables help set a few layout options, like when the mobile menu should move and how to align the menu items on desktop.

There are also the container variables and the gutter and paddings used by the grids. You probably do not have to touch these.

The panel widths can be set if wanted. This is the size of the panels on both sides of the site when they are open. By default they are closed and hidden. The left panel is used to hold the menu on mobile.

The z-index variables help when wanting to put an element on top or under other elements. They are useful and should probably be used but not changed as that can affect the panels not showing up on top.

Sass Variables

Sass variables are compiled into static css and so they are not dynamic and cannot be changed once the CSS is compiled. They cannot either be accessed via javascript.

However they are still our only option when it comes to media queries, as css variables will not work as media queries. Here you can set the media query sizes or leave them as default. They are used throughout the site and more importantly used by the grid system.

The $media-nav variable should match the –nav-move CSS variable above. One is used as a media query while the other is used to control when to move the menu via javascript into the panel-left. you can learn more on the styling menus page.


These cool guys reside on both sides of the main site. They are invisible when empty. When they have content, buttons appear allowing you to toggle them open. When they are opened, they push over the entire to make room. This effect is removed on mobile devices by setting them to a position of absolute. You can choose when they should become positioned absolute with the sass variables. Usually you want that to happen  on mobile.

When positioned absolute, they don’t push the site over but appear on top of the main content.