:basketball: A lightweight front-end framework for creating scalable, responsive sites. Version 8 has just been released!
A lightweight front-end framework for creating scalable and performant, responsive sites
Developed and maintained by Ashley Nolan & Zander Martineau
Features
| Feature | Description | |
|---|---|---|
| ⏩ | #webperf | Performance-first, responsive philosophy |
| 🚍 | Rock-solid build tasks | We use gulp & webpack to deliver the best task runner & developer experience for your project |
| 👓 | Unopinionated & extendable | A few common UI elements, a grid & some other base styles. The rest is up to you. |
| 🔮 | Future proof | Build complex layouts with flexbox & use ES2015 (ES6) for your javascript. |
| 😠 | Lean & mean | CSS: 8.68 kB gzipped JS: 2 kB gzipped It is a boilerplate after all 😉 |
Tasks
| Command | Description |
|---|---|
npm start |
Basic dev server using Browsersync |
npm run watch |
Watch all files for changes |
npm run deploy |
Install all dependencies and compile all assets for production deployment |
npm run compile:all |
Compile the CSS & JS, compress the images and run any other compilation tasks needed to run your app |
npm run compile:release |
Add the --release flag to any other task, e.g. gulp javascript --release or gulp css --release |
npm run compile:css |
Sass (Libsass via node-sass), Postcss with Autoprefixer, CSSNano, Source Maps & more… |
npm run compile:js |
Babel, Webpack |
npm run compile:svg |
Auto-generated SVG sprites |
npm run compress:images |
Image compression with imagemin |
npm run lint:js |
Lint JS using xo |
npm run fix:js |
Fix JS linting issues using xo |
npm run lint:css |
Lint CSS using stylelint. We use the https://github.com/stylelint/stylelint-config-standard rules for our linting |
npm test |
Run javascript and css tests |
npm run clean:all |
Clean the compiled files |
npm run copy:all |
Run the copy tasks - useful for things like webfonts etc |
npm run release-patch |
Creates a patch release using release-it |
npm run release-minor |
Creates a minor release using release-it |
npm run release-major |
Creates a major release using release-it |
npm run release-premajor |
Creates a premajor release using release-it |
📝 Demos and documentation
Kickoff’s demo and documentation site is hosted at trykickoff.com.
Yeoman generator
Our Yeoman Generator is the best way to get Kickoff each time you want to start a new project, visit trykickoff.com/docs/yeoman.html for more info.
Need real-time help? Find us on Slack
🐛 Bugs and feature requests
Have a bug or a feature request? Please search for existing and closed issues. If your problem or idea is not addressed yet, please open a new issue.
Browser compatibility
Kickoff has been tested in the following browsers:
| Chrome (latest) | Firefox (latest) | Safari (latest) | Edge (latest) | Opera (latest) |
|---|---|---|---|---|
 |
 |
 |
 |
 |
We also support older versions of Internet Explorer but the support is limited. For example, the Kickoff grid relies on flexbox so Modernizr is needed to detect for it and then we can provide a fallback.
Maintainers and contributors
| Zander Martineau | Ashley Nolan | Nic Bell |
|---|---|---|
 |
 |
 |
| Github | Github | Github |
| Site | Site | Site |
Community
If you’re using Kickoff we’d love to hear about it; please e-mail us at [email protected]
Keep track of development and community news by following @TryKickoff on Twitter.
Contributing
Please read our contribution guidelines before contributing to Kickoff.
Versioning
For transparency into our release cycle and in striving to maintain backward compatibility, Kickoff is maintained under the Semantic Versioning guidelines. Sometimes we screw up, but we’ll adhere to those rules whenever possible.
Sponsored by
Kickoff was created by Ash and Zander while working at TMW. TMW continue to provide sponsorship for the development of the project as well as trykickoff.com domain renewals, stickers etc.