2.1 Release

The first minor release of version 2 includes an array of improvements to existing functionality, a new component, and baked in RTL support.

Top

Flexbox support

A new flexbox based component, aptly named Flex, allows for the convenient building of layouts, grids, and structural elements through a concept known as regions and blocks. Furthermore, flexbox features like shrinking, growing, ordering, and alignment are baked directly into the component to easily handle most use cases.

<div class="region">
    <aside class="block span-3">...</aside>
    <main class="block span-6">...</main>
    <aside class="block span-3">...</aside>
</div>
Top

RTL support

Both CSS and JavaScript based components have been updated to support right-to-left (RTL) languages. A new CSS distribution file can be included and coupled with the <html> lang attribute to easily support RTL out of the box. That's all there is too it.

<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
    ...
    <link href="css/toolkit-rtl.min.css" rel="stylesheet">
</head>
</html>
Top

Component class split

The primary Component class has been split into 3 distinct classes -- Component, TemplateComponent, and CompositeComponent -- each with their own unique role depending on how the element pertaining to the component is used. The Component makes use of elements embedded in the DOM, while TemplateComponent renders and creates elements based on a template, and CompositeComponent, which renders and manages a collection of elements based on a template.

Top

Updated CSS namespacing

Previous versions of Toolkit supported a very rudimentary CSS namespacing system (prefixing classes) through the use of a "vendor prefix" (found in both the Sass and JavaScript layers). Version 2.1 took this concept a step further by integrating a new namespacing feature throughout every aspect of Toolkit. Making use of namespaces is as easy as modifying a few variables.

$namespace: "tk-";
Toolkit.namespace = 'tk-';
Top

Integrated BEM naming

BEM, a convention for naming CSS classes, has finally made its way to the JavaScript layer, and is automatically applied for every template. A new Toolkit.bem() function has been added to easily generate BEM compatible class names, as well as new variables in Sass and JavaScript to customize the separators.

$bem-element-separator: "__";
$bem-modifier-separator: "--";
Toolkit.bemSeparators = ['__', '--'];
Top

Lazy-loaded templates

Component templates can now be lazy-loaded by wrapping all declarations in a function. This function will defer execution until the template is rendered and has the added benefit of passing along the Toolkit.bem() function and Toolkit.namespace property as arguments. If you're using ES6, this functionality gets even better with template strings!

{
    template: function(bem, namespace) {
        return `<div class="${bem('modal')}">
            <div class="${bem('modal', 'outer')}">
                <div class="${bem('modal', 'inner')}" data-modal-content></div>
                <button class="${bem('modal', 'close')}" data-modal-close><span class="x"></span></button>
            </div>
        </div>`;
    }
}