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/base/variables.

Fonts

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.

You probably don’t need to touch any of the other font variables like line height and the font size.

Font Size

The font size is special and is used throughout your site. It is based on 1rem equaling 16px which is what most browsers are set to. The font size variable is set to increase to 1.125 (which equals 18px) for really large screens. This affects all styles that are using the –font-size variable which nicely makes the sites content larger in one line of code. You should use this variable for all your font size needs.

Using the font-size variable on your own CSS is easy and involves using calc(). Using it would look like this:

.my-element{
  font-size: calc(var(--font-size) + 2px); //font size will be 18px
}

If this is too difficult, don’t worry, we have included a sass mixin. You can set the font size with this too:

.my-element{
   @include font-size(18); //the magic is done for you! Will be 18px
}

Colors

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.

Panels

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.