Skip to content

v4.0.0
Compare
Choose a tag to compare
@mrmartineau mrmartineau released this 16 Oct 12:00
· 682 commits to master since this release
4.0.0
4f21384

Version 4.0.0

Our documentation site has had a massive overhaul. Please visit it to find out any information about Kickoff: http://tmwagency.github.io/kickoff/

Typography

  • Font sizes use a modular scale throughout (but can easily be overridden)
  • Sass vars fonts etc are shorter and more intuitive to use - hopefully they'll be easier to remember when developing.
  • Added simple responsive type to reduce the font size on smaller viewports. Modify $font-size-base-narrow in scss/_variables.css to change this.

Sass

  • All of the CSS3 mixins have been removed because we use Autoprefixer
  • Global Sass vars (_variables.css)
    • Breakpoint vars have been shortened from $breakpoint-* to $bp-*
    • Some of the grid vars have been moved to the more generic, $layout-* because they are not explicitly to do with the grid.
    • Other minor tweaks have also been made, so please read through this file to understand them.

Javascript

  • We have removed many of the old 'helper' files and plugins, instead opting for dependencies found on the Bower registry.
  • Bower dependencies are installed to bower_modules. To change this, edit the .bowerrc file. The default dependencies that we suggest are Swiftclick, Trak.js, jQuery and Cookies
  • Shimly, a grunt plugin by Nic Bell is being used to generate a file of javascript shims. Have a look at _grunt-configs/javascript.js to find the Shimly settings.

Grunt & tooling

  • Livereload & grunt-contrib-connect have been dropped (but still included) in favour of BrowserSync (which handles both without a browser extension) for our live CSS updating and simple server needs. Running grunt serve will fire up a simple server and watch for changes, with the added benefits of BrowserSync's many features.
  • All grunt tasks have been moved into grouped separate files in the _grunt-configs folder. For example, _grunt-configs/css.js contains all the grunt tasks relating to CSS: Sass, Autoprefixer & CSSO (for minifying CSS. The _grunt-configs/javascript.js file contains the uglify (for concatenating and minfying js), shimly (for generating a javascript shims file), jshint and jQuery (for generating a custom jQuery build).
  • Extra grunt tasks have been added to help development. For example, running grunt icons will rebuild all the icons generated by Grunticon. grunt start will bring up a browser window with our 'getting started' guide, it also contains the simple styleguide for your project.
  • We have integrated a simple visual regression testing task, grunt-photobox, to help prevent deployment of broken code. See this for more info.
Assets 2
Loading