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.
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.
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.
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.
When positioned absolute, they don’t push the site over but appear on top of the main content.