Kickoff

Kickoff is a lightweight front-end framework for creating scalable, performant and 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.

We also use the Autoprefixer library to manage and add vendor prefixes where necessary to the CSS.

Find out more about Kickoff’s CSS in the docs.

/**
 * Typography variables
 */
$font-size-base           : 20;
$leading-base             : 1.4;
$line-height-base         : round($font-size-base * $leading-base); // 20 * 1.4
$type-scale               : 1.25; // Major third

$type: (
	micro                   : modular-scale($font-size-base, -2, $type-scale),
	small                   : modular-scale($font-size-base, -1, $type-scale), // h5, h6
	base                    : modular-scale($font-size-base, 0, $type-scale),  // p, h4
	mid                     : modular-scale($font-size-base, 1, $type-scale),  // h3
	large                   : modular-scale($font-size-base, 2, $type-scale),  // h2
	jumbo                   : modular-scale($font-size-base, 3, $type-scale)   // h1
);

/**
 * Breakpoints
 * There are no common breakpoints so these are just a suggestions
 * You'll need to define your own breakpoints to suit your design
 */
$breakpoints: (
	narrow: 400px,
	mid: 768px,
	wide: 992px,
	huge: 1600px
);

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.

We also use Babel to allow developers to write ES2015 JavaScript right now in their projects, while providing support for older browsers.

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

Find out more about Kickoff’s JavaScript in the docs.

// npm modules
import ready from 'lite-ready';
import $$ from 'double-dollar';
window.$$ = $$;

// Bundle global libs that don't return a value
import 'console';

// Add your project-specific modules here
import moduleTest from './modules/moduleTest';  // this is a test, uncomment this line to try it

// Your DOM ready code goes in here
ready(() => {
	moduleTest();
});

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.

Continous delivery

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

We are also working on extending Kickoff to use Gulp for those developers that prefer using it.

Find out more about Kickoff’s tooling in the docs.

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


// grunt watcher
grunt.registerTask('watcher', [
	'compile',
	'watch',
]);

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

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