# 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](http://mootools.net/) has been completely dropped from Toolkit and will no longer be included. [jQuery 2.0](http://jquery.com/) 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](http://requirejs.org/). 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](http://gruntjs.com/) has been replaced with [Gulp](http://gulpjs.com/). 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](http://sass-lang.com/) minimum requirement is now 3.4 and [Compass](http://compass-style.org/) is 1.0.

## Testing suite ##

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

On top of that, an external [interactive demonstration suite](https://github.com/titon/toolkit-tests) 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.

## Themeless #

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.

* [Learn more about CSS namespacing.](../development/namespace.md)

<div class="notice is-info">
    This was changed to <code>namespace</code> in the 2.1 release.
</div>

## 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.

```html
<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>
        </div>

    </section>
</div>
```

* [Learn more about namespacing.](../development/js/component.md#namespaces)

## 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}"`.

```javascript
$('.js-modal').modal({
    animation: 'slide-in-top',
    groups: {
        static: {
            fullScreen: false
        },
        dynamic: {
            fullScreen: true
        }
    }
});
```

* [Learn more about option groups.](../development/js/component.md#option-groups)

## 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.

```javascript
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!
```

* [Learn more about classes.](../development/js/class.md)

## 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.

```javascript
element.toolkit('carousel').addHook('start', function() {
    // Do something
});
```

* [Learn more about hooks.](../development/js/base.md#hooks)

## 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.

```javascript
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`.

* [Learn more about the grid.](../components/grid.md)

## Changelog ##

[For a full list of changes, see the changelog.](../support/changelog.md)