Kickoff 7 released 🎉

Published in

Kickoff

4 min readJun 28, 2016

Version 7 of Kickoff might not seem like a massive difference from version 6, but in the ~6 months between the two releases a lot has happened. Below I will highlight some of the major changes and upgrades that the framework has had.

Javascript

We updated our JS to use the new ES6/ES2015 syntax which is transpiled using Babel (specifically the babelify Browserify transform). This means we get all the benefits of writing ES2015 code without losing browser support.

We switched from using jshint & jscs to ESLint to lint our code. ESLint is now the defactor tool for most developers and it made sense to use one instead of two tools to lint our code. Our config is custom but heavily based on Airbnb’s ESLint style guides.

Polyfill.io now used instead of shimly for all browser shims

Scss

Ashley Nolan completely replaced the existing grid with a new, flexbox-based grid. This grid is particularly special because we are still able to support non-flexbox supporting browsers by using a Modernizr feature-detect and some conditional css. Learn more about the grid here.

Type variables are now in $type Sass map and reduced the number of items in the list.

$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
);

Breakpoint variables are now in the $breakpoints Sass map. The $bp-single-col var has also been removed.

$breakpoints: (
 narrow : 400px,
 mid    : 750px,
 wide   : 1000px,
 huge   : 1250px
);

The respond-* mixins were also improved to be more flexible, they now allow for different types of arguments, either: a keyword that matches the a named breakpoint in the $breakpoints map (mid); a pixel value (300px); or a unitless integer that is effectively a pixel value (300). See the examples below:

@include respond-min(mid)   { }@include respond-min(500)   { }@include respond-min(400px) { }

Tooling

Commitizen was added to help enforce consistent git commits. To make use of it, simply run npm run commit after you have staged your files in git.

Run npm run info to show information about all our npm run scripts. This uses the npm-scripts-info package

Grunt was updated to version 1.0.1. This means that you no longer need a globally installed version of grunt-cli!

Grunticon has been removed. We felt that having a specific solution there was too prescriptive especially as some devs often chose competing solutions for there icons. We plan to provide instructions on how to add a better system soon.

HTML

The Styleguide has been overhauled too. it now includes a lot of useful information and will update immediately if any variables are changed. Preview the default styleguide on Codepen.

As mentioned earlier, polyfill.io is now what we use to shim browser features. This means that the cutting-the-mustard check was removed (we have not completely removed it though, see this gist), which alongside the grunticon removal, the <head> of our html is much more lean.

Browser Support

We finally dropped support for Internet Explorer 8. If you still need it, we have kept it as an option in the Yeoman generator. Expect Kickoff to drop support for IE 9–11 within 6–12 months.

Contributor Covenant Code of Conduct

We also added a code of conduct for developers contributors to the project, read it here. This has been copied from contributor-covenant.org.

All of this information, and more can be found in our release notes.

Yeoman Generator

The generator was also updated to include all the latest from version 7 of Kickoff, but it also included a few other nice features that set it apart from the main repo.

2 new generator sub tasks

After you have setup a Kickoff project, you can now run two useful commands that create new scss or js modules.

Run yo kickoff:component componentName will create a new scss file: assets/src/scss/components/_componentName.scss and will add a Sass import statement (@import “components/_componentName”) into assets/src/scss/_dependencies.scss.

$ yo kickoff:component componentName

Run yo kickoff:module moduleName will create a new javascript file in assets/src/js/modules/moduleName.js. Unlike the scss command, this command does not add any import statements to any files because it could be added to any file.

$ yo kickoff:module moduleName

New questions

Our new questions allow users to be more specific and the greater level of details allows them to include only what they want when starting new projects. See the questions below:

Project name
Description
What is the git repo url for this project?
Team members
Features

Include Kickoff’s styleguide?
Use Kickoff Statix for static templating and rapid prototyping?
Provide Flexbox feature-detect? Needed if you use our grid in non-flexbox supporting browsers
Support IE8?

Which Javascript libraries would you like to use?

lodash
lazysizes — High performance (jankfree) lazy loader for images (including responsive images)
Axios — Promise based HTTP client
Flickity carousel — Touch, responsive, flickable galleries
attach.js — Attaches JavaScript to HTML without messy selectors
dominus — Lean DOM Manipulation
jQuery
trak.js — Universal event tracking API
Swiftclick — Eliminates the 300ms click event delay on touch devices
Modernizr

Fin

This release has been a massive team effort and it could not have been done without the help of key people like Nic Bell and Ashley Nolan.