Kickoff

Kickoff is a lightweight front-end framework for creating scalable, responsive sites.

Get Started What's new in

Yeoman Our Yeoman Generator is the best way to get Kickoff each time you want to start a new project:

npm install -g generator-kickoff yo
yo kickoff

or clone the git repo:

git clone https://github.com/trykickoff/kickoff.git your-project-folder

Find other ways to get Kickoff in our documentation.
Follow @trykickoff for updates.

Need real-time help? Find us on Slack

Feature overview

Intuitive CSS / Sass

Kickoff comes with a robust CSS framework; it provides many sensible defaults so that you can get your project up and running in the shortest possible time.

We make use of the excellent Sass CSS preprocessor which allows us to use many extra features beyond the capabilities of vanilla CSS.

Kickoff uses a bespoke naming scheme for classnames, inspired loosely by the BEM naming scheme. See this page for more info on this.

Find out more in the docs

/**
 * Typography variables
 */
$font-size-base           : 20;
$font-size-base-px        : $font-size-base * 1px;
$font-size-base-narrow    : $font-size-base - 2;
$font-size-base-narrow-px : $font-size-base-narrow * 1px;

$leading-base             : 1.4;
$line-height-base         : round($font-size-base * $leading-base); // 20 * 1.4
$baseline                 : $line-height-base * 1px;

$type-scale               : 1.25; // Major third

/**
 * Breakpoints
 * There are no common breakpoints so these are just a suggestions
 * You'll need to define your own breakpoints to suit your design
 */
$bp-narrow                : 400;  // Set in px
$bp-mid                   : 750;  // Set in px
$bp-wide                  : 1000;  // Set in px
$bp-huge                  : 1250; // Set in px

// Special breakpoints
$bp-single-col            : $bp-mid; // Break to single column (used in the grid)
$bp-rwd-text              : $bp-mid; // Reduce text size below this width

Unopinionated Javascript

Kickoff uses Browserify to bundle javascript modules but beyond that, it does not prescribe a way for you to write your JS. We believe that writing JS in a modular way is the future.

The code on the right is part of our starter Javascript file ;)

Find out more in the docs

// npm modules
var SwiftClick = require('swiftclick');
var trak = require('trak.js');
var ready = require('lite-ready');

// DOM ready code goes in here
ready(function () {
	var swiftclick = SwiftClick.attach(document.body);
	trak.start();
});

Awesome tooling

Kickoff is powered by the Grunt.js task runner. It is used extensively to ease common development bottlenecks and allow us developers to focus on creating the best work possible.

Special attention has been made to ensure Kickoff works well with continuous delivery, if you develop that way.

Find out more in the docs

// grunt serve
grunt.registerTask('serve', [
	'compile',
	'browserSync:serve',
	'watch'
]);

// grunt compile
grunt.registerTask('compile', [
	'shimly',
	'copy:modernizr',
	'browserify',
	'postscss',
	'images'
]);

From the blog…

Built with Kickoff

Hundreds of amazing sites across the web are being built with Kickoff. See below for a few of them:

Have you used Kickoff on a project?

Let us know so we can add it here.

Like Kickoff? Super charge it using

Makes the process of creating static HTML templates quick and easy

Find out more