Kickoff

The lightweight front-end framework for creating scalable, performant and responsive sites.

Get Started •

Features

Unopinionated & extendable
A few common UI elements, a grid & some other base styles. The rest is up to you.

Rock-solid build tasks
We use gulp & webpack to deliver the best task runner & developer experience for your project.

Future proof
Build complex layouts with flexbox & use ES2015 (ES6) for your javascript.

Lean
CSS: 8.68 kB gzipped. JS: 2 kB gzipped. It is a boilerplate after all 😉

Intuitive CSS / Sass

Kickoff comes with a robust Sass-powered CSS framework; it provides many sensible defaults so that you can get your project up and running in the shortest possible time, and also includes components

Kickoff uses a bespoke naming scheme for classnames, inspired loosely by the BEM naming scheme.

Our CSS approach

/**
 * Below we have setup the breakpoints
 * that our app/site will use and
 * shown an example with our 3rd-party
 * media-query library
 */
$breakpoints: (
  narrow : 400px,
  mid    : 750px,
  wide   : 1000px,
  huge   : 1250px
);

.foo {
  @include media(">mid") {
    width: 50%;
  }
}

Unopinionated Javascript

Kickoff uses 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 to allow developers to write ES2015 JavaScript right now in their projects, while providing support for older browsers.

Our Javascript approach

// This is our starter js file
import ready from 'lite-ready';

// Project-specific/non-npm modules here
import someModule from './modules/someModule';

// DOM ready
ready(() => {
	someModule();
});

The code above is part of our starter Javascript file ;)

Awesome tooling

Kickoff is powered by the 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. Find out more about Kickoff’s tooling in the docs.

Find out more

Read our docs • see our demos • LMS

Quick start

Install our , it is the best way to get Kickoff each time you want to start a new project:

# Install Yeoman and the Kickoff generator
npm install -g generator-kickoff yo

# Run the Kickoff Yeoman generator
yo kickoff

If you don't want to use the generator, clone the git repo:

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

Find out more

Read our docs • see our demos

Built with Kickoff

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

Super-charge Kickoff using Statix

Statix is our static templating/rapid-prototyping tool, it makes the process of creating static HTML templates quick and easy.

Read docs •