Kickoff Versions Save

This release has been in development for a long time. We finally moved on from using Grunt

💫 New

• Sass dependencies can now be installed from npm, this means we can update and maintain them independently from the main kickoff repo. Some of our components and utilities have been extracted out into separate npm modules: Find out more
  • Ours:
    • mixins & functions
    • fluid video component
    • the grid
  • 3rd party:
    • media-queries using include-media
    • normalize.css
• Form themes: we now have standard and material themes
• Gulp + webpack is used for the build tasks. See more about this below.

👍 Improved

• Tooling: Now using Gulp + webpack v2.2.0 to compile/compress etc. All build config has moved to the .kickoff directory in the root of the project. Find out more
  • The tooling config file (config.js) has been updated and added to.
• Add more npm run tasks so we have a consistent build API in the future. The idea is to keep these commands consistent while the values can change. For example, should we move completely to webpack, we can just switch-out the values and the same task e.g. npm run compile:all will be the same regardless.
• SVG icons. Now using gulp-svgstore & svg4everybody so that we can have better icon/graphics workflow. Find out more
• Sass linting with stylelint. Find out more
• Styleguide has had an upgrade. See https://codepen.io/mrmartineau/pen/RKbGPO for an example
• The Babel, xo & stylelint config is now all in the package.json file in an effort to remove as many dotfiles as possible.

👎 Removed

• Media element scss component. The new grid is a much better alternative for this pattern, see here
• Grunt as a build tool. Browserify as a javascript module bundler.

👍 Updated

• Webpack updated to version 2.2.0 [89e618f]
• SCSS: use shorthand modular-scale function in _variables.scss [ae62ba7]
• Add some more npm run scripts [87c245]

This is virtually the same as rc1 but with a much cleaner history. It is likely that this branch will be merged with master for the v8 release.

💫 New

• Updated docs can be found at https://trykickoff.now.sh/. This site will overwrite the existing site when v8 is published.
• Sass dependencies can now be installed from npm, this means we can update and maintain them independently from the main kickoff repo. Some of our components and utilities have been extracted out into separate npm modules:
  • Ours:
    • mixins & functions
    • fluid video component
    • the grid
  • 3rd party:
    • media-queries using include-media
    • normalize.css
• Form themes: we now have standard and material themes
• Gulp + webpack is used for the build tasks. See more about this below.

👍 Improved

• Tooling: Now using Gulp + webpack to compile/compress etc. All build config has moved to the .kickoff directory in the root of the project.
  • The tooling config file (config.js) has been updated and added to.
• Add more npm run tasks so we have a consistent build API in the future. The idea is to keep these commands consistent while the values can change. For example, should we move completely to webpack, we can just switch-out the values and the same task e.g. npm run compile:all will be the same regardless.
• SVG icons. Now using gulp-svgstore & svg4everybody so that we can have better icon/graphics workflow
• Sass linting with stylelint
• Styleguide has had an upgrade. See https://codepen.io/mrmartineau/pen/RKbGPO for an example
• The Babel, xo & stylelint config is now all in the package.json file in an effort to remove as many dotfiles as possible.

👎 Removed

• Media element scss component. The new grid is a much better alternative for this pattern, see here
• Grunt as a build tool. Browserify as a javascript module bundler.

💫 New

• Updated docs can be found at https://trykickoff.now.sh/. This site will overwrite the existing site.
• Sass dependencies can now be installed from npm, this means we can update and maintain them independently from the main kickoff repo. Some of our components and mixins have been extracted out into separate npm modules:
  • Ours:
    • mixins & functions
    • fluid video component
    • the grid
  • 3rd party:
    • media-queries using include-media
    • normalize.css
• Form themes: we now have standard and material themes
• Webpack javascript build

👍 Improved

• Tooling: Now using Gulp + webpack to compile/compress etc. All build config has moved to the .kickoff directory in the root of the project.
• Add more npm run tasks so we have a consistent build API in the future. The idea is to keep these commands consistent while the values can change. For example, should we move completely to webpack, we can just switch-out the values and the same task e.g. npm run compile:all will be the same regardless.
• SVG icons. Now using gulp-svgstore & svg4everybody so that we can have better icon/graphics workflow
• Sass linting with stylelint
• Styleguide has had an upgrade. See https://codepen.io/mrmartineau/pen/RKbGPO for an example

👎 Removed

• Media element
• Grunt as a build tool. Browserify as a javascript module bundler.

[7.1.0] - 10/08/2016

Switch javascript linting rules to use XO rules instead of AirBnB's rules. This was done to allow developers to enforce a strict code style with the minimal config. See below for the new js linting rules.

XO Default code style

Any of these can be overridden if necessary. See our package.json for all XO config.

• Tab indentation
• Semicolons
• Single-quotes
• No unused variables
• Space after keyword if (condition) {}
• Always === instead of ==

Javascript

• Updated js to use ES6/ES2015 syntax to be transpiled using Babel (babelify Browserify transform)
• Switched from jshint & jscs to ESLint. ESLint config is custom but heavily based on Airbnb's ESLint style guides.
• Trak.js and Swiftclick not installed by default anymore
• Included double-dollar to make life a little easier when looping over DOM elements
• Polyfill.io now used instead of shimly for all browser shims [9eb6a83]

Scss

• Type vars are now in $type Sass map and reduced the number of items in the list.
• Replaced the existing grid with a flexbox-based grid with fallbacks for browsers that do not support flexbox. Learn about the grid here
• Removed $bp-single-col and moved all other breakpoint variables into a Sass map. The respond-* mixins were also improved to allow for different types of arguments, e.g. @include respond-min(mid) {...} or @include respond-min(500) {...} or @include respond-min(400px) {...}
• Updated to [email protected]
• Fixed an IE Print bug [111c0ce]
• Add hypehenate helper class [c09b3d2]

Tooling

• Added Commitizen to help enforce consistent git commits.
• Run npm run info to show information about all our npm run scripts. [413b191]
• grunt checks task renamed to grunt test
• Updated to latest version of all npm dependencies that comply with our browser support requirements
• Updated to [email protected]
• Removed Grunticon. Currently there is no icon replacement but we will provide instructions on how to add a better system soon
• Update .editorconfig, .gitattributes & .gitignore

HTML

• Changed #mainContent ID to be #main
• Styleguide had some minor updates

Browser Support

• Dropped support for Internet Explorer 8. Expect Kickoff to drop support for IE 9-11 within 6-12 months. [e70ab08]

Misc

• Added a code of conduct [0a276de]

Changed

Javascript

• Switched to use Browserify as the way to bundle all our javascript. If you would like to continue using the old style, please use either our Yeoman generator or the Grunt config from Kickoff v5.0.0. See the discussion about the change here

CSS/Scss

• Ref #53 - Move all components from scss/partials/components/*.scss to scss/components
• The media object has been updated to ensure that it doesn't stack it's columns on skinny viewports by default but by the use of modifier classes. See the code here
• Block grids have had many improvements thanks to @nicbell. There are now different modifier classes for each breakpoint, for example: <ul class="l-blockGrid l-blockGrid--4 l-blockGrid--2--narrow l-blockGrid--6--wide">
• The custom form elements have been refactored & separated into their own files so that individual items can be imported instead of all of them.
  • the custom select element now allows :focus styles
  • custom checkboxes don't depend on SVGs and a tick variant has been added
• Create new _links.scss and remove relevant code from _typography.scss
• move (un)ordered & definition lists into _lists.scss
• Simplified tables – now has sensible default values rather than classes as they are usually used as content

Tooling

• add grunt-filesizegzip to show file size and gzipped file size on save
• Removed a few rarely-used grunt plugins
  • Grunt Photobox

This release focuses on improving the UX of the framework. Files are now in more intuitive places and grunt configs are clearer as well.

• Completely restructured the static files directories.
  • Moved all CSS, images & js into the ./assets directory
    • The ./assets/src directory for source files (SCSS, javascript, images & grunticon)
    • The ./assets/dist directory for all compiled files (CSS, images & JS) is at ./assets/dist
    • Grunticon's folders are now in more intuitive places. Uncompressed SVGs, jpgs & PNGs should be saved to ./assets/src/grunticon/source. They will then be compressed to ./assets/temp/icons before Grunticon does it's thing and compiles them to ./assets/dist/img/icons.
• Grunt & build tasks - Much has been streamlined.
  • Connect has been removed & BrowserSync is now the only way to serve a static site & reload changes. Run grunt serve to test this.
  • Our config variables are now in their own file at ./_grunt-configs/config.js & have been made more intuitive
  • Images now are automatically compressed by grunt-contrib-imagemin & are delivered to ./assets/dist/img
• Sass updates
  • Many style rules have been removed with a primary focus on making the framework leaner & more useful.
• The styleguide has had a massive improvement & the start page has been removed. The styleguide has been moved to .styleguide/index.html
• Running npm run kickoff now installs all package dependencies, including Grunt if you don't have it, and is a great way to start a Kickoff project
• Removed 404
• Removed ./js/helpers.js as redundant. Have provided some info if you need those files again.
• Added HTML Validation check to the checks performed when running grunt checks task.
  • This outputs the results of the check to your terminal as well as to a JSON file located at ./testing/validation/validation-results.json

As node-sass has been updated to v2, we can now use grunt-sass with Kickoff. It is faster and removes the dependency on Ruby from Kickoff.

Fixes a strange bug with our media-query mixins. Apparently em-based media-queries do not calculate correctly if the font-size differs from the user's default — usually 16px. At this point, we have hard-coded 16 into our media-query mixins until we can find a better solution.