Kickoff setup checklist

Success!

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

Open scss/_color-palette.scss and change any vars to your own ones.

Open scss/_variables.scss

  • defines your base font size var $font-size-base.
  • 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.
  • defines your font-sizes in the $type sass map. Type sizes are defined by name, like micro, small, base, mid, large & jumbo. By default, all type sizes use a modular scale, see for an example.
  • define the leading and line-height.
  • The $baseline var 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-bold to the weight you are using.
  • define your base font stacks. These are used throughout the framework.
  • $font-family-base is used for the default typeface so make sure you update it's value with one of the font-stacks above.
  • $font-family-headings is used for headings typeface. Using inherit as a value, means that it will inherit from $font-family-base.
  • If your heading's webfont bold font-weight is not 700, change this value to the weight you are using.
  • Define your own breakpoints (by editing the $breakpoints sass map on ) to suit your design; the defaults here are just a suggestion.
  • An example usage for these might be: 
    @include media('>mid') {
	// RWD code
}
    Read more about their usage here.
  • Please add more if you need them!
It can be useful to save certain paths as variables to ease development, especially image paths.
  • Define the maximum width of your main column by editing the $layout-max-width on . This directly affects the .l-container class that we suggest you use in your markup. See the for an example of this. Also, the .l-container class is styled in .
  • Kickoff comes with a flexbox-based grid system. To define your grid column count, gutter widths etc change the vars from .
On there is one example of an app-specific variable, this is for link transitions. Add any others that you may need below there.

All done!

Now view the styleguide again and then run gulp watch or gulp serve to start creating magic!

Where next?

Get Kickoff

Understanding our tooling setup