The road to Kickoff version 4
Our focus with this release was to help make the framework more intuitive and more powerful. While we realise that Kickoff is probably not meant for beginners, it should still be easy to navigate and get to grips with.
As with all previous releases, we see this version of Kickoff as a starting point; designed to be easily modified dependant on the use-case. It is built to help you start projects quickly. If a framework gets in the way of your development, then it ceases to be useful.
Getting started with Kickoff
We know that it isn’t always obvious where to start when beginning to use a new framework. That is why we have created the getting started page.
Once you have cloned/downloaded Kickoff & installed the npm dependencies, running
grunt start from your terminal will open a new page in your browser explaining where to start when developing with Kickoff. It shows how one should edit the Sass variables & update the colour palette.
One of the main areas we wanted to simplify in version 4 of Kickoff was the grids.We realised that the splits and shunts were not being used, so they have been removed. They will still be a part of the Choreographic Grid, which is still being maintained by me, and can be easily dropped-in to replace the new grid system should you still want to use those features.
As Autoprefixer is now the standard in Kickoff (which means we no longer have to worry about writing vendor-prefixed code), we have added a Sass warning when you use a mixin that could be handled by Autoprefixer.
Sass variables have changed quite a lot as well. For example
$base-font-size is now
$base-font-family is now
$font-family-base. This then matches the CSS property needed when using the variable, e.g.
font-family: $font-family-base. It might seem like a small or needless change but we feel it is important when using the framework, day-in & day-out, that the naming conventions become more intuitive. It is now easier to remember the order of the words in the variable name as it reflects the native CSS property name.
- Swiftclick - Developed by our own Ivan Hayes, SwiftClick is a library created to eliminate the 300ms click event delay on touch devices.
- Trak.js - Developed by our own Zander Martineau, trak.js is a universal analytics event tracking API
- Cookies - Developed by Scott Hamper, Cookies is a great Cookie manipulation library
However, after playing around with integrating it, we felt that using Browserify should be kept as an optional addition to Kickoff – especially inkeeping with our design direction of keeping Kickoff as dependency–free and minimal as we can.
Instead, we will be maintaining a separate branch of Kickoff which includes a base setup of Browserify. This will be documented on the Kickoff docs site and be otherwise identical to the master branch of Kickoff.
If you’d like to find out more, the branch can be found at github.com/tmwagency/kickoff/tree/browserify
The grunt build tasks have changed quite dramatically, but again to make it more intuitive when editing them.
Each group of tasks have been extracted into their own separate file. For example,
config/css.js contains all the grunt tasks relating to CSS: Sass, Autoprefixer & CSSO. The
We feel having these tasks now separate makes it far easier to maintain your Grunt setup than having all of the configuration stored in one mammoth Gruntfile.
The Yeoman generator will be updated to reflect all these changes, plus there will be an option to use Browserify as well. Ideally, this generator should be the only way to install Kickoff in the future.
Take it for a spin now
What are you waiting for?! Grab a copy of Kickoff v4 and let us what you think or browse the codebase in the next branch.
We would love any and all feedback you have, so please leave a comment here or file an issue on Github.
git clone https://github.com/tmwagency/kickoff.git -b next ‘kickoff-next’