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',
]);