# 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.
## Flexbox support ##
A new flexbox based component, aptly named [Flex](../components/flex.md), 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.
```html
...
```
* [Learn more about Flex.](../components/flex.md)
## 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 `` `lang` attribute to easily support RTL out of the box. That's all there is too it.
```html
...
```
* [Learn more about RTL.](../development/rtl.md)
## 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.
* [Learn more about components.](../development/js/component.md)
## 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.
```scss
$namespace: "tk-";
```
```javascript
Toolkit.namespace = 'tk-';
```
* [Learn more about CSS namespacing.](../development/namespace.md)
## 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.
```scss
$bem-element-separator: "__";
$bem-modifier-separator: "--";
```
```javascript
Toolkit.bemSeparators = ['__', '--'];
```
* [Learn more about BEM.](../development/bem.md)
## 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!
```javascript
{
template: function(bem, namespace) {
return `
`;
}
}
```
* [Learn more about templating.](../development/js/component.md#templates)