2.0 Release

The second major release of Toolkit is jam-packed with new features, major refactors, and extensive changes. This marks the path for Toolkit's bright future.


Unsupported and dropped features

MooTools has been completely dropped from Toolkit and will no longer be included. jQuery 2.0 is now the primary library.

Internet Explorer 8 has also been dropped.

If either of these are required, please use Toolkit 1.x.


Improved tooling

The entire JavaScript code base has been reorganized for RequireJS. All components, extensions, and features have been individually packaged into their own JS files with their own dependencies. This greatly improved efficiency, made it easier to maintain, reduced the output file size, and allowed custom builds to only require the necessary dependencies.

On that note, Grunt has been replaced with Gulp. It's multitudes faster and easier to configure.

Furthermore, we decided to switch from Ruby Sass to libsass, as it is multitudes faster. The Sass minimum requirement is now 3.4 and Compass is 1.0.


Testing suite

An extensive testing suite that provides over 300 unit tests has been included that utilizes Mocha and Chai. Tests can be run by calling gulp test in the project root (requires PhantomJS) or by opening test/runner.html in the browser.

On top of that, an external interactive demonstration suite has been created. This suite provides in-browser implementations that help in testing functionality that can not be unit tested, as well as validating visually how a component looks and works.



Themes have been completely removed from Toolkit. This reduces the CSS filesize while encouraging custom styling.


Customizable class names

All CSS component class names are now customizable through Sass variables. BEM element and modifier separators are also supported. The list of variables can be found on each respective component documentation page.


Decoupled CSS and JS

CSS component class names are no longer hardcoded in the JavaScript layer (excluding state classes and templates). Instead, data attributes in the format of data-{component}[-{element}] are now used for element traversal, children detection, and event binding.

To change the class names found within JavaScript templates, you will need to override the template option(s) manually.


Automatic class prefixing

Class prefixing is now automatically applied to all CSS class names in the Sass layer and within JavaScript templates. The prefix can be defined through the Toolkit.vendor JS property and $vendor-prefix Sass variable.

This was changed to namespace in the 2.1 release.

Component namespacing

Embedded components now support a concept of namespacing, which allows components to be nested within components. The major issues in 1.x was components getting confused between the parent and child when binding events and detecting child elements. Namespaces solve all issues with the only minor inconvenience of requiring a bit more markup.

To utilize namespacing, simply add a unique value to all relevant data attributes.

<div class="tabs" data-tab="parent">
    <nav class="tab-nav" data-tab-nav="parent">...</nav>

    <section class="tab-section" data-tab-section="parent">...</section>
    <section class="tab-section" data-tab-section="parent">
        <div class="tabs" data-tab="child">
            <nav class="tab-nav" data-tab-nav="child">...</nav>

            <section class="tab-section" data-tab-section="child">...</section>
            <section class="tab-section" data-tab-section="child">...</section>


Option groups

Initializing multiple plugins of the same type over and over again can be quite cumbersome. Defining granular data attributes per option can be quite tedious. To solve these scenarios, we've added option groups. Option groups allow multiple options to be defined and grouped by a unique key, which can be declared on an element through data-{component}-group="{key}".

    animation: 'slide-in-top',
    groups: {
        static: {
            fullScreen: false
        dynamic: {
            fullScreen: true

Robust class layer

The class layer has been completely refactored from the ground up. It now supports proper inheritance, custom constructors, destructors, static options, and an automatic UID system.

var SuperHero = Toolkit.Class.extend({
    name: '',
    constructor: function(name) {
        this.name = name;
    smash: function() {
        console.log(this.name + ' smash!');

var hulk = new SuperHero('Hulk');
    hulk.smash(); // Hulk smash!

Hook into components

Class instance events have been replaced by hooks, which will be executed during fireEvent() alongside DOM events. Hooks can be added to an instance through methods or constructor options.

element.toolkit('carousel').addHook('start', function() {
    // Do something

New DOM events

New custom events horizontalresize and verticalresize have been added to help in scenarios where resize is too problematic for mobile and touch devices.

element.on('horizontalresize', function() {
    // Browser width has changed

Integrated debugging

A rudimentary debugging layer has been integrated into all components. Debugging can be enabled on the global level by setting Toolkit.debug to true, or by passing a debug option to a plugins constructor. The debugger will log to the console for every event that's fired from a component.


Easier templating

All DOM building in the JavaScript layer has been extracted into templates that can be defined through options. This allows very granular control on the markup being generated by components. Check out the documentation for each component for a list of all possible template options.


Updated grid breakpoints

The responsive and mobile web is constantly changing, and because of this, the grid had to change accordingly. The old size and device sizing options are now obsolete. In its place is a new uniform grid with updated responsive breakpoints that cover a vast selection of modern day mobile and desktop devices. These new sizes are xsmall, small, medium, and large.