You installed Kickoff. At least we hope you did! If you didn’t please visit here to find out how to install Kickoff.
To quickly get up and running there are a few things you will want to edit before adding any custom code.
CSS / Sass
Kickoff provides many variables and sensible defaults (colour palette, fonts, grid settings and more) so you can start writing code as quickly as possible. To take advantage of the full power of this, it is advised that you start each project by defining your own defaults. See below for how to do this:
Sass project variables
scss/_color-palette.scssand change any vars to your own ones.
- Line 19 defines your base font size var
- Line 28 defines your type scale:
$type-scale. By default we use the 'major third' scale (1.25), this then determines the sizes all the other type size vars.
Lines 30—37 defines your font-sizes in the
$typesass map. Type sizes are defined by name, like
jumbo. By default, all type sizes use a modular scale, see this for an example.
- Lines 24 & 25 define the leading and line-height.
$baselinevar is used for even spacing (like a baseline grid) for most typographical elements and some other items like margins and padding.
- If your webfont's bold font-weight is not
700, change the value of
$font-weight-boldto the weight you are using.
- Lines 47—52 define your base font stacks. These are used throughout the framework.
$font-family-baseis used for the default typeface so make sure you update it's value with one of the font-stacks above.
$font-family-headingsis used for headings typeface. Using
inheritas a value, means that it will inherit from
- If your heading's webfont bold font-weight is not
700, change this value to the weight you are using.
Define the maximum width of your main column by editing the
$layout-max-widthon line 84. This directly affects the
.l-containerclass that we suggest you use in your markup. See the main index.html for an example of this. Also, the
.l-containerclass is styled in _global.scss.
- Kickoff comes with a flexbox-based grid system. To define your grid column count, gutter widths etc change the vars from lines 86—90.
Now view the styleguide again and then run
gulp watch or
gulp serve to start creating magic!