Kickoff
The lightweight front-end framework for creating scalable, performant and responsive sites.
Get Started • What's new inFeatures
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.
/**
* 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 Webpack 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.
// 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();
});Awesome tooling
Kickoff is powered by the Gulp 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
Need real-time help? Find us on Slack
Read the blog
Quick start
Install our Yeoman Generator, 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 kickoffIf 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
