titon-toolkit 2.0.2 → 2.1.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 62c0a566cd9ceab0399e8ceab379ea9272a17858
-  data.tar.gz: d31d95015509d871420b8e3d5c87034ace3393eb
+  metadata.gz: 387633fc2dd478ef09acfb28b7a8ad8182719b7d
+  data.tar.gz: 7bf94d80fa6ce99780ed85723045af0a7fdc30ae
 SHA512:
-  metadata.gz: b9c29ff181b3d941458895f6182c9d4292ba73e4342fb65d4121a2e84294edab5a6a6fa11622e1d0431aad54ccf249694b81d9be11a8f1da76ffe4eab0b9fc6f
-  data.tar.gz: 5b8f9734732f3d63a7ada359acf08249e8068ad492ff442b75225ccb243681046f9744ccaf5addc241eefde0dd1a4121d156e67ca8da7d100df38ae14daa9e60
+  metadata.gz: 19e0da8d5d6d288eadf2a4390ae100919124c608e8e9f5a30e6941640f217c1c4abf9a403c314c3c3c71f96459aa986aa805686800231316344dc59d83255ba4
+  data.tar.gz: 7df8946cde0c2a98e17543d6568f0a8516a3776f6e407e18df68a1976f2741cab64aab444d90e9c231b6e0d6b7542d06d9b8757f42487a76fb4761f5c9a2ff43

data/changelog.md

@@ -2,199 +2,82 @@
 
 Older versions can be found in the documentation changelogs.
 
-## 2.0.2 ##
-* Updates and fixes for documentation.
+## 2.1.0 ##
 
-## 2.0.1 ##
-* Removed the grid placeholders `%row` and `%col` as they would be included in the CSS output multiple times (use the mixins instead)
-* Removed `grid` as a dependency for the `form` component
-
-## 2.0.0 ##
-This major release includes a rewritten class, event, hooks, and component layer. 
-It improves overall tooling, drops out dated technologies, introduces new concepts, and more. 
-Check out the release update for more information.
-
-* Dropped MooTools support
-* Dropped IE8 support
-* Upgraded to jQuery 2
-* Upgraded to Gulp from Grunt
-* Upgraded to libsass over Ruby Sass
-* Upgraded to Sass 3.4 and Compass 1.0
-* Upgraded to RequireJS for JS dependency management and compilation
-* Added a robust namespacing system which allows components to be nested within each other
-* Added unit tests for all components through Mocha, Chai, and PhantomJS
-* Added new `horizontalresize` and `verticalresize` events
-* Decoupled the CSS and JS layers so that CSS classes (excluding states) are no longer hardcoded
-* Refactored components to make more use of templates for DOM building
-* Renamed most instances of the word "component" to "plugin" to differentiate between components and behaviors,
-    with plugins being a top-level grouping of everything
-* Renamed `--components` to `--plugins` in the Gulp command line
-* Removed themes
+* Added the Flex component which supports flexbox based grids and layouts
+* Added right-to-left (RTL) support for all CSS and JS components
+* Added Travis CI integration for automatic build and testing
+* Added a Sass module exporting system
+* Improved BEM support on all JS components
+* Updated all JS templates to support functions for lazy-loaded rendering
 * Sass
-    * Added `$enable-small-size` and `$enable-large-size` to toggle size classes in CSS output
-    * Added `$enable-all-effects`, `$enable-all-modifiers`, and `$enable-all-animations` for easier styling
-    * Added `$breakpoint-range-xsmall`, `$breakpoint-range-small`, `$breakpoint-range-medium`, `$breakpoint-range-large`,
-        and `$breakpoint-range-xlarge` for responsive range breakpoints
-    * Added `$bem-element-separator` and `$bem-modifier-separator` to control the BEM class conventions
-    * Added `class-name()` and `bem()` for building CSS class names
-    * Added `full-screen()` mixin for full screen fixed positioning
-    * Added `in-range($range)` mixin that will accept a range of breakpoints and output the correct min/max width media query
-    * Added `in-xsmall()`, `in-xlarge()`, `if-xsmall()`, and `if-xlarge()` responsive mixins
-    * Fixed a bug in `join-classes()` when a class name doesn't start with a period
-    * Moved `.span-*` classes from the Grid component into the shared base file
-    * Updated all component CSS class names to use Sass variables for more configuration control
-    * Updated all modifiers to not use `@extend` to reduce CSS output (requires full class declarations now)
-    * Updated all modifiers to be toggleable through Sass variables
-    * Updated `:before` and `:after` pseudo elements to use double colon `::` syntax
-    * Updated `$size-*` and `$shape-*` variables to be prefixed by default with a `.`
-    * Refactored effects into their respective components that can be toggled through Sass variables
-    * Refactored the visual effects into modifiers for the Button component
-    * Removed `is-active()`, `is-disabled()`, and `is-*()` state mixins
-    * Removed `in-mobile()`, `in-tablet()`, `in-desktop()`, `if-mobile()`, `if-tablet()`, and `if-desktop()` responsive mixins
-    * Removed `.arrow-*` classes
-    * Removed `$breakpoint-*` variables and replaced with with range list variables
+    * Added `$text-direction` variable
+    * Added `export()`, `ltr()`, and `rtl()` mixins
+    * Added `gutter()` and `span-width()` functions
+    * Renamed `$vendor-prefix` to `$namespace`
+    * Renamed `remove-selector-char()` to `remove-selector()`
 * JavaScript
-    * Added a `Base` class layer that both `Component` and `Behavior` extend
-    * Added a new hook layer to `Base` that replaces the instance event layer
-    * Added `$.fn.toString()` which returns the elements markup as a string
-    * Added a debugging layer and a new `debug` option
-    * Improved the prototype inheritance layer by initializing a new class instead of extending objects
-    * Refactored the class layer so that constructors are passed as a property instead of an argument
-    * Refactored so that class properties are passed through an object instead of set through the constructor
-    * Removed `$.cookie()` and `$.removeCookie()` methods (use a third-party instead)
-    * Renamed `$.fn.addData()` to `$.fn.cache()`
-    * Updated `$.fn.conceal()` to set the element to display none when the transitions is complete
-    * Updated `$.fn.reveal()` to set the element to display block (or similar) before transitions occur
-    * Component
-        * Added `hiding`, `showing`, and `destroying` events
-        * Added option groups
-        * Added `namespace` property
-        * Added `ns()` method for generating namespace selectors
-        * Updated the `ajax` option to only be used for setting jQuery AJAX options
-        * Refactored the `requestData()` method
-            * Added `url`, `cache` (whether to cache in the class), and `settings` (AJAX settings) to the XHR object used by jQuery
-            * Removed the `before`, `done`, and `fail` arguments
-            * Moved the callbacks into `onRequestBefore`, `onRequestDone`, and `onRequestFail` methods
-        * Renamed the `hide` event to `hidden`
-        * Renamed the `show` event to `shown`
-        * Renamed the `destroy` event to `destroyed`
-        * Renamed the `component` property to `name`
-        * Renamed the `doDestroy` method to `destructor`
+    * Toolkit
+        * Added `isRTL` flag for detecting RTL support
+        * Added `bemSeparators` property for customizing BEM separators
+        * Added `bem()` function for generating BEM CSS class names
+        * Added `buildTemplate()` function for converting strings into usable templates
+        * Added `wrapperTemplate` option
+        * Renamed `create()` function to `createPlugin()`
+        * Renamed `vendor` property to `namespace`
+    * Base
+        * Removed the `runtime` property
 * Components
-    * Accordion
-        * The active class is now applied to the header instead of the parent `li`
-        * Added `calculate()` method for determining section heights
-        * Removed the `jump` event
-        * Renamed selectors `.accordion-header`, `.accordion-section` to `[data-accordion-header]`, `[data-accordion-section]`
-    * Blackout
-        * Added `loaderTemplate` and `showLoading` options for generating loader markup
-        * Removed `hideLoader` and `showLoader` events
-        * Removed `loader` and `waveCount` options in favor of `loaderTemplate`
-        * Renamed `Toolkit.Blackout.factory()` to `Toolkit.Blackout.instance()`
-    * Carousel
-        * Added a `calculate()` method that triggers on load/resize to determine carousel dimensions
-        * Added a `swipe` option for toggling swipe events
-        * Added `cycling`, `cycled`, `jumping` and `jumped` events
-        * Removed `cycle` and `jump` events
-        * Renamed selectors `.carousel-items ul`, `.carousel-tabs`, `.carousel-next`, `.carousel-prev`, `.carousel-start`, `.carousel-stop` to
-            `[data-carousel-items]`, `[data-carousel-tabs]`, `[data-carousel-next]`, `[data-carousel-prev]`, `[data-carousel-start]`, `[data-carousel-stop]`
-        * Removed `.carousel-prev`, `.carousel-next`, and `.carousel-tabs` styles
-    * Divider
-        * Improved the divider to support longer strings of text and multiline text
+    * Component
+        * Split the `Component` class into 3 classes with different roles: 
+            `Component` for embedded elements, `TemplateComponent` for templates rendered into elements, 
+            and `CompositeComponent` which is a collection of rendered elements
+        * Moved `elements` and `nodes` properties to `CompositeComponent`
+        * Moved `createElement()` method to `TemplateComponent`
+        * Added `render()` for converting templates into elements
+        * Removed the `created` property
     * Drop
-        * All drop menus will now require a `data-drop-menu` attribute
+        * Updated to extend the `CompositeComponent`
+        * Added the menu and node as arguments to the `hiding` and `showing` events
+        * Removed the `hideOpened` option (will happen automatically now)
+    * Flex
+        * Added `flex-span()` function
+        * Added `flex-region()`, `flex-region-align()`, `flex-region-orientation()`, `flex-region-wrap()`, `flex-block()`, `flex-block-align()`, `flex-block-order()`, `flex-block-grow()`, and `flex-block-shrink()` mixins
+        * Added 17 `$flex-*` variables
     * Flyout
-        * Added `headingTemplate` option
-        * Renamed selectors `.flyout` to `[data-flyout-menu]`
-    * Form
-        * Improved disabled state across inputs
-        * Normalized `fieldset` and `legend` when used in an inline form
+        * Updated to extend the `CompositeComponent`
+        * Added a `wrapperClass` option
+        * Renamed the `current` property to `url`
+        * Renamed the `menus` property to `elements`
+        * Renamed the `.push-left` class to `.push-opposite`
+        * Refactored `_buildMenu()` to handle the composite functionality
+        * Removed the `isVisible()`, `_getMenu()`, and `_getTarget()` methods
     * Grid
-        * Added new `xsmall` and `xlarge` (disabled by default) column sizes
-        * Added `$grid-sizes` map for associating sizes to breakpoints and column counts
-        * Added `$grid-columns-xsmall` and `$grid-columns-xlarge` for new column counts
-        * Added `$grid-class-end` to change the `.end` class
-        * Changed `$grid-columns-small` from `6` to `12`
-        * Fixed a bug where `.push-*` and `.pull-*` classes were being generated if `$grid-push-pull` was disabled
-        * Removed the `mobile`, `tablet`, and `desktop` column sizes
-        * Removed `$grid-columns-mobile`, `$grid-columns-tablet`, and `$grid-columns-desktop`
-    * Icon
-        * Added a `$icon-sizes` list variable to control the CSS output
-    * Input
-        * Added a `filterClasses` option which can be used in conjunction with `copyClasses`
-        * Added `template`, `checkboxTemplate`, `radioTemplate`, `selectTemplate`, `optionsTemplate`, `headingTemplate`, and `descTemplate`
-        * Renamed `arrowContent` to `arrowTemplate`
-        * Renamed selectors `.select-options`, `.select-label`, `.select-arrow` to
-            `[data-select-options]`, `[data-select-label]`, `[data-select-arrow]`
-    * Lazy Load
-        * Added `loading` and `loaded` events
-        * Added a `lazyClass` option that defaults to `.lazy-load`
-        * Added a `timer` property
-        * Fixed a bug where `shutdown` event was being called twice
-        * Removed `load` event
-    * Mask
-        * Added `template` and `messageTemplate` options
-        * Renamed `.mask-target` to `.is-maskable`
-        * Renamed selectors `.mask`, `.mask-message` to `[data-mask]`, `[data-mask-message]`
-    * Matrix
-        * Added `appending`, `prepending`, `removing`, `rendering`, and `rendered` events
-        * Improved the deferred image rendering process and item fade in animation
-        * Removed `render` event
-        * Updated to no longer automatically set `.matrix` on the container
+        * Renamed `grid-gutter()` to `gutter()`
+    * LazyLoad  
+        * Renamed the `elements` property to `items`
     * Modal
-        * Added a `clickout` option for toggling clickout events
-        * IDs can now be passed as the 2nd argument to `show()`
-        * Removed the `ajax` option (handled by `loadContent()`)
-        * Renamed selectors `.modal-inner`, `.modal-hide`, `.modal-submit` to
-            `[data-modal-content]`, `[data-modal-close]`, `[data-modal-submit]`
-    * Off Canvas
-        * Added a `swipe` option
-        * Renamed selectors `.on-canvas`, `.off-canvas` to `[data-offcanvas-content]`, `[data-offcanvas-sidebar]`
-        * Updated so that `[data-offcanvas-sidebar]` defines the default side orientation
-        * Updated to no longer automatically set `.off-canvas` on the sidebar
-    * Pagination
-        * Updated to only support `ol` lists
-    * Pin
-        * Updated to have position absolute by default for `.pin`
-        * Updated to no longer automatically set `.pin` on the element
+        * Updated to extend the `TemplateComponent`
     * Popover
-        * Updated so that an `.is-active` class is toggled on the target node
-        * Updated the `follow` attribute to `false` always
-        * Removed the `delay` option
-        * Renamed selectors `.popover-head`, `.popover-body` to `[data-popover-header]`, `[data-popover-content]`
+        * Added a `wrapperClass` option
+        * Removed the `elementHead` and `elementBody` properties
     * Responsive
-        * Added `.show-xsmall`, `.show-xlarge`, `.hide-xsmall`, and `.hide-xlarge` classes
-        * Removed `.show-mobile`, `.show-tablet`, `.show-desktop`, `.hide-mobile`, `.hide-tablet`, and `.hide-desktop` classes
-        * Removed `$responsive-size` variable
+        * Moved the `.fluid` class to the base CSS
     * Showcase
-        * Added a `swipe` option for toggling swipe events
-        * Added a `clickout` option for toggling clickout events
-        * Added `jumping` and `jumped` events
-        * Removed `jump` event
-        * Removed `.showcase-prev`, `.showcase-next`, and `.showcase-tabs` styles
-        * Renamed selectors `.showcase-items`, `.showcase-tabs`, `.showcase-next`, `.showcase-prev`, `.showcase-hide`, `.showcase-caption` to
-            `[data-showcase-items]`, `[data-showcase-tabs]`, `[data-showcase-next]`, `[data-showcase-prev]`, `[data-showcase-close]`, `[data-showcase-caption]`
-    * Stalker
-        * Added `activating`, `activated`, `deactivating`, and `deactivated` events
-        * Removed the `applyToParent` option
-        * Removed `activate` and `deactivate` events
-        * Updated to no longer automatically set `.stalker`, `.stalker-target`, and `.stalker-marker`
-    * Switch
-        * The `.pill` and `.round` classes have moved to `.switch-bar` from `.switch`
-    * Tabs
-        * Has been renamed to `Tab` and all files and references have been changed
-        * Option `preventDefault` now applies to both cookie and fragment persistence
-        * Option `ajax` has changed to `false` by default
-        * Fixed a bug trying to determine the index to show on load
-        * Renamed selectors `.tab-nav`, `.tab-section` to `[data-tab-nav]`, `[data-tab-section]`
-        * Updated the `is-active` state to be set on the tab, instead of the parent `li`
+        * Updated to extend the `TemplateComponent`
+        * Fixed a bug where captions would disappear
+        * Fixed a bug where the blackout loader would not disappear
     * Toast
-        * Added a `toastTemplate` property
-        * Added a `reset()` method to reset the tooltip state
+        * Updated to extend the `CompositeComponent`
+        * Added a `wrapperClass` option
+        * Renamed `template` to `wrapperTemplate`
+        * Renamed `toastTemplate` to `template`
     * Tooltip
-        * Removed the `ajax` option (handled by `loadContent()`)
-        * Removed the `delay` option
-        * Renamed selectors `.tooltip-head`, `.tooltip-body` to `[data-tooltip-header]`, `[data-tooltip-content]`
-    * Type Ahead
-        * Added `shadowTemplate`, `titleTemplate`, `descTemplate`, `highlightTemplate`, and `headingTemplate` options
-        * The `matcher` function now accepts the item object as the 1st argument
+        * Updated to extend the `CompositeComponent`
+        * Added a `wrapperClass` option
+        * Updated to toggle `is-active` classes on the activating node
+        * Added the title as a second argument to the `load` event
+        * Removed the `elementHead` and `elementBody` properties
+        * Removed the `reset()` method and runtime options
+    * TypeAhead
+        * Updated to extend the `TemplateComponent`

data/readme.md

@@ -1,12 +1,20 @@
 ```
- ______  ______  ______  __      __  __   __  ______
-/\__  _\/\  __ \/\  __ \/\ \    /\ \/ /_ /\ \/\__  _\
-\/_/\ \/\ \ \/\ \ \ \/\ \ \ \___\ \  _  \\ \ \/_/\ \/
-   \ \_\ \ \_____\ \_____\ \_____\ \_\ \_\\ \_\ \ \_\
-    \/_/  \/_____/\/_____/\/_____/\/_/\/_/ \/_/  \/_/
+ ______   ______   ______   __       __  __   __   ______
+/\__  _\ /\  __ \ /\  __ \ /\ \     /\ \/ /_ /\ \ /\__  _\
+\/_/\ \/ \ \ \/\ \\ \ \/\ \\ \ \____\ \  _  \\ \ \\/_/\ \/
+   \ \_\  \ \_____\\ \_____\\ \_____\\ \_\ \_\\ \_\  \ \_\
+    \/_/   \/_____/ \/_____/ \/_____/ \/_/\/_/ \/_/   \/_/
 ```
 
-# Toolkit v2.0.2 - Gallant Golem #
+# Titon Toolkit v2.1.0 #
+[![Project Titon](https://img.shields.io/badge/project-titon-82667d.svg?style=flat)](http://titon.io)
+[![Build Status](https://img.shields.io/travis/titon/toolkit.svg?style=flat)](https://travis-ci.org/titon/toolkit)
+[![NPM Version](https://img.shields.io/npm/v/titon-toolkit.svg?style=flat)](https://npmjs.com/package/titon-toolkit)
+[![Total Downloads](https://img.shields.io/npm/dm/titon-toolkit.svg?style=flat)](https://npmjs.com/package/titon-toolkit)
+[![Gem Version](https://img.shields.io/gem/v/titon-toolkit.svg?style=flat)](https://rubygems.org/gems/titon-toolkit)
+[![Total Downloads](https://img.shields.io/gem/dt/titon-toolkit.svg?style=flat)](https://rubygems.org/gems/titon-toolkit)
+[![Bower Version](https://img.shields.io/bower/v/toolkit.svg?style=flat)](http://bower.io/search/?q=toolkit)
+[![License](https://img.shields.io/packagist/l/titon/toolkit.svg?style=flat)](https://github.com/titon/toolkit/blob/master/license.md)
 
 Titon Toolkit is a collection of very powerful user interface components and utility classes
 for the responsive, mobile, and modern web. Each component represents encapsulated HTML, CSS,
@@ -16,7 +24,8 @@ Toolkit makes use of the latest and greatest technology. This includes HTML5 for
 CSS3 for animations and styles, Sass for CSS pre-processing, Gulp for task and package management,
 and powerful new browser APIs for the JavaScript layer.
 
-* [Release Notes](https://github.com/titon/toolkit/blob/master/docs/en/releases/2.0.md)
+* [Release Notes - 2.1](https://github.com/titon/toolkit/blob/master/docs/en/releases/2.1.md)
+* [Migration Guide - 2.1](https://github.com/titon/toolkit/blob/master/docs/en/migrations/2.1.md)
 * [Official Website](http://titon.io/toolkit)
 * [Features](http://titon.io/toolkit#features)
 * [Components](http://titon.io/toolkit#components)
@@ -28,4 +37,4 @@ and powerful new browser APIs for the JavaScript layer.
 * [Getting Started](https://github.com/titon/toolkit/blob/master/docs/en/setup/getting-started.md)
 * [Downloading & Installing](https://github.com/titon/toolkit/blob/master/docs/en/setup/installing.md)
 * [Custom Builds](https://github.com/titon/toolkit/blob/master/docs/en/setup/custom-builds.md)
-* [Browser Compatibility](https://github.com/titon/toolkit/blob/master/docs/en/support/compatibility.md)
+* [Browser Compatibility](https://github.com/titon/toolkit/blob/master/docs/en/support/compatibility.md)

data/roadmap.md

@@ -2,25 +2,27 @@
 
 All releases will contain bug fixing and polishing for current features.
 
-### 2.1 ###
-* RTL support.
-* Flex - A grid component that uses flex box instead of floats.
-
 ### 3.x ###
-* Remove jQuery dependency and go straight vanilla?
-* Switch to Less (removes sass/compass/ruby dependencies).
-* Implement custom elements / components - http://w3c.github.io/webcomponents/explainer/
-* Separate component transitions into a stand alone layer that can be used anywhere.
-* Use `calc()` in CSS.
+* Rewrite the JS layer using ES6: classes, modules, arrow funcs, etc.
+* Remove jQuery as a dependency. Make use of new ES6 features.
+* Remove RequireJS and use ES6 modules instead.
+* Integrate a template rendering layer instead of using DOM manipulation. Possibly with ES6 template strings.
+* Integrate Webpack as a build system.
+* Add Less support (possibly through a Sass -> Less converter?)
+* Add behaviors as a new plugin type.
+
+### Future ###
+* Support web components - http://w3c.github.io/webcomponents/explainer/
+* Support React components
 
 ### Components ###
 * Dialog - A component that prompts the user for an action. Sister to the modal component.
 * Guide - A component that displays introduction guides (popovers) in a sequential order. Useful for show casing new features and functionality.
-* Drag & Drop - Provides a drag and drop system.
 
 ### Behaviors ###
 * Form Validator - Provides form validation.
 * Data Binding - Provides 2 way data binding.
+* Drag & Drop - Provides a drag and drop system.
 
 ### Misc ###
-* Take Google fundamentals into consideration - https://developers.google.com/web/fundamentals/
+* Take Google fundamentals into consideration - https://developers.google.com/web/fundamentals/

data/scss/toolkit.scss

@@ -12,6 +12,8 @@
 @import "toolkit/components/typography";
 @import "toolkit/components/form";
 @import "toolkit/components/code";
+@import "toolkit/components/flex";
+@import "toolkit/components/grid";
 
 // Basic UI styles
 @import "toolkit/components/breadcrumb";
@@ -19,7 +21,6 @@
 @import "toolkit/components/button-group";
 @import "toolkit/components/divider";
 @import "toolkit/components/drop";
-@import "toolkit/components/grid";
 @import "toolkit/components/icon";
 @import "toolkit/components/input";
 @import "toolkit/components/input-group";
@@ -51,4 +52,4 @@
 @import "toolkit/components/type-ahead";
 
 // Responsive should be last to override previous styles
-@import "toolkit/components/responsive";
+@import "toolkit/components/responsive";

data/scss/toolkit/_common.scss

@@ -2,7 +2,7 @@
 
 //-------------------- Toolkit --------------------//
 
-$vendor-prefix: "" !default;
+$namespace: "" !default; // Without "."
 $size-small-class: ".small" !default;
 $size-large-class: ".large" !default;
 $shape-round-class: ".round" !default;
@@ -15,6 +15,14 @@ $enable-large-size: true !default;
 $enable-all-effects: false !default;
 $enable-all-modifiers: false !default;
 $enable-all-animations: false !default;
+$enable-all-modules: false !default;
+
+$modules-excluded: ("flex") !default;
+$modules-exported: () !global;
+
+@if ($enable-all-modules) {
+    $modules-excluded: ();
+}
 
 //-------------------- Colors --------------------//
 
@@ -39,6 +47,17 @@ $default-transition: .3s !default;
 $bem-element-separator: "-" !default;
 $bem-modifier-separator: "--" !default;
 
+//-------------------- Text Direction --------------------//
+
+$text-direction: ltr !default;
+$align-direction: left;
+$align-opposite-direction: right;
+
+@if ($text-direction == rtl) {
+    $align-direction: right;
+    $align-opposite-direction: left;
+}
+
 //-------------------- Spacing --------------------//
 
 $padding: .75rem !default;
@@ -146,13 +165,13 @@ $button-class-modifier-popout: bem($button-class, "", "popout") !default;
 $button-modifiers: () !default; // Nothing by default
 
 @if ($enable-all-modifiers) {
-    $button-modifiers: ("glare", "reflect", "gloss", "popout") !global;
+    $button-modifiers: ("glare", "reflect", "gloss", "popout");
 }
 
 $button-effects: () !default; // Nothing by default
 
 @if ($enable-all-effects) {
-    $button-effects: ("oval", "pill", "skew") !global;
+    $button-effects: ("oval", "pill", "skew");
 }
 
 //-------------------- Button Group --------------------//
@@ -164,13 +183,13 @@ $buttonGroup-class-modifier-justified: bem($buttonGroup-class, "", "justified")
 $buttonGroup-modifiers: ("vertical", "justified") !default;
 
 @if ($enable-all-modifiers) {
-    $buttonGroup-modifiers: ("vertical", "justified") !global;
+    $buttonGroup-modifiers: ("vertical", "justified");
 }
 
 $buttonGroup-effects: () !default; // Nothing by default
 
 @if ($enable-all-effects) {
-    $buttonGroup-effects: ("pill", "skew") !global;
+    $buttonGroup-effects: ("pill", "skew");
 }
 
 //-------------------- Carousel --------------------//
@@ -186,7 +205,7 @@ $carousel-class-modifier-square: bem($carousel-class, "", "square") !default;
 $carousel-modifiers: ("wide", "square") !default;
 
 @if ($enable-all-modifiers) {
-    $carousel-modifiers: ("wide", "square") !global;
+    $carousel-modifiers: ("wide", "square");
 }
 
 $carousel-opacity: $default-opacity !default;
@@ -209,11 +228,41 @@ $drop-class-modifier-right: bem($drop-class, "", "right") !default;
 $drop-modifiers: ("down", "up", "left", "right") !default;
 
 @if ($enable-all-modifiers) {
-    $drop-modifiers: ("down", "up", "left", "right") !global;
+    $drop-modifiers: ("down", "up", "left", "right");
 }
 
 $drop-transition: $default-transition !default;
 
+//-------------------- Flex --------------------//
+
+$flex-class-region: class-name("region") !default;
+$flex-class-block: class-name("block") !default;
+$flex-class-modifier-grid: bem($flex-class-region, "", "grid") !default;
+$flex-class-modifier-wrap: bem($flex-class-region, "", "wrap") !default;
+$flex-class-modifier-horizontal: bem($flex-class-region, "", "horizontal") !default;
+$flex-class-modifier-vertical: bem($flex-class-region, "", "vertical") !default;
+
+$flex-modifiers: ("horizontal", "vertical", "wrap", "grid") !default;
+
+$flex-width: 100% !default;
+$flex-gutter: false !default;
+$flex-grid-gutter: 1rem !default;
+$flex-order-count: 6 !default;
+
+$flex-blocks-xsmall: 6 !default;
+$flex-blocks-small: 12 !default;
+$flex-blocks-medium: 12 !default;
+$flex-blocks-large: 12 !default;
+$flex-blocks-xlarge: 18 !default;
+
+$flex-sizes: (
+    xsmall: ($flex-blocks-xsmall, $breakpoint-range-xsmall),
+    small:  ($flex-blocks-small, $breakpoint-range-small),
+    medium: ($flex-blocks-medium, $breakpoint-range-medium),
+    // Remove the max as we have no xlarge size and want the large value to be open ended
+    large:  ($flex-blocks-large, (nth($breakpoint-range-large, 1), null)),
+) !default;
+
 //-------------------- Flyout --------------------//
 
 $flyout-class: class-name("flyout") !default;
@@ -240,14 +289,14 @@ $form-class-modifier-horizontal: bem($form-class, "", "horizontal") !default;
 $form-modifiers: ("inline", "horizontal") !default;
 
 @if ($enable-all-modifiers) {
-    $form-modifiers: ("inline", "horizontal") !global;
+    $form-modifiers: ("inline", "horizontal");
 }
 
 //-------------------- Grid --------------------//
 
 $grid-class: class-name("grid") !default;
-$grid-class-column: class-name("col", "") !default;
-$grid-class-end: class-name("end", "") !default;
+$grid-class-column: class-name("col") !default;
+$grid-class-end: class-name("end") !default;
 
 $grid-columns-xsmall: 6 !default;
 $grid-columns-small: 12 !default;
@@ -281,7 +330,7 @@ $icon-sizes: (12, 16, 24, 32, 64) !default;
 $icon-modifiers: ("90deg", "180deg", "270deg", "flip", "flip-vert") !default;
 
 @if ($enable-all-modifiers) {
-    $icon-modifiers: ("90deg", "180deg", "270deg", "flip", "flip-vert") !global;
+    $icon-modifiers: ("90deg", "180deg", "270deg", "flip", "flip-vert");
 }
 
 //-------------------- Input --------------------//
@@ -311,7 +360,7 @@ $label-class-modifier-arrow-right: bem($label-class, "", "arrow-right") !default
 $label-modifiers: ("badge", "ribbon-left", "ribbon-right", "arrow-left", "arrow-right") !default;
 
 @if ($enable-all-modifiers) {
-    $label-modifiers: ("badge", "ribbon-left", "ribbon-right", "arrow-left", "arrow-right") !global;
+    $label-modifiers: ("badge", "ribbon-left", "ribbon-right", "arrow-left", "arrow-right");
 }
 
 //-------------------- Lazy Load --------------------//
@@ -361,7 +410,7 @@ $modal-class-foot: bem($modal-class, "foot") !default;
 $modal-animations: ("fade", "from-above", "from-below", "slide-in-top", "slide-in-right", "slide-in-bottom", "slide-in-left") !default;
 
 @if ($enable-all-animations) {
-    $modal-animations: ("fade", "from-above", "from-below", "slide-in-top", "slide-in-right", "slide-in-bottom", "slide-in-left") !global;
+    $modal-animations: ("fade", "from-above", "from-below", "slide-in-top", "slide-in-right", "slide-in-bottom", "slide-in-left");
 }
 
 $modal-mobile-breakpoint: nth($breakpoint-range-xsmall, 2) !default; // iOS5
@@ -384,7 +433,7 @@ $offCanvas-class-modifier-right: bem($offCanvas-class, "", "right") !default;
 $offCanvas-animations: ("push", "push-reveal", "push-down", "reverse-push", "reveal", "on-top", "squish") !default;
 
 @if ($enable-all-animations) {
-    $offCanvas-animations: ("push", "push-reveal", "push-down", "reverse-push", "reveal", "on-top", "squish") !global;
+    $offCanvas-animations: ("push", "push-reveal", "push-down", "reverse-push", "reveal", "on-top", "squish");
 }
 
 $offCanvas-left-width: 20% !default;
@@ -402,13 +451,13 @@ $pagination-class-modifier-grouped: bem($pagination-class, "", "grouped") !defau
 $pagination-modifiers: ("grouped") !default;
 
 @if ($enable-all-modifiers) {
-    $pagination-modifiers: ("grouped") !global;
+    $pagination-modifiers: ("grouped");
 }
 
 $pagination-effects: () !default; // Nothing by default
 
 @if ($enable-all-effects) {
-    $pagination-effects: ("oval", "pill", "skew") !global;
+    $pagination-effects: ("oval", "pill", "skew");
 }
 
 //-------------------- Pin --------------------//
@@ -427,7 +476,7 @@ $popover-class-arrow: bem($popover-class, "arrow") !default;
 $popover-tooltip-animation: ("fade", "from-above", "from-below", "flip-rotate") !default;
 
 @if ($enable-all-animations) {
-    $popover-tooltip-animation: ("fade", "from-above", "from-below", "flip-rotate") !global;
+    $popover-tooltip-animation: ("fade", "from-above", "from-below", "flip-rotate");
 }
 
 $popover-arrow-width: 8 !default;
@@ -442,7 +491,7 @@ $progress-transition: .5s !default;
 $progress-effects: ("pill") !default;
 
 @if ($enable-all-effects) {
-    $progress-effects: ("pill") !global;
+    $progress-effects: ("pill");
 }
 
 //-------------------- Responsive --------------------//
@@ -478,13 +527,13 @@ $switch-class-modifier-stacked: bem($switch-class, "", "stacked") !default;
 $switch-modifiers: ("stacked") !default;
 
 @if ($enable-all-modifiers) {
-    $switch-modifiers: ("stacked") !global;
+    $switch-modifiers: ("stacked");
 }
 
 $switch-effects: ("pill") !default;
 
 @if ($enable-all-effects) {
-    $switch-effects: ("pill") !global;
+    $switch-effects: ("pill");
 }
 
 $switch-transition: $default-transition !default;
@@ -499,7 +548,7 @@ $tab-class-modifier-horizontal: bem($tab-class, "", "horizontal") !default;
 $tab-modifiers: ("horizontal") !default;
 
 @if ($enable-all-modifiers) {
-    $tab-modifiers: ("horizontal") !global;
+    $tab-modifiers: ("horizontal");
 }
 
 //-------------------- Table --------------------//
@@ -516,7 +565,7 @@ $toast-class-wrapper: class-name("toasts") !default;
 $toast-animations: ("fade", "slide-up", "slide-down", "slide-left", "slide-right") !default;
 
 @if ($enable-all-animations) {
-    $toast-animations: ("fade", "slide-up", "slide-down", "slide-left", "slide-right") !global;
+    $toast-animations: ("fade", "slide-up", "slide-down", "slide-left", "slide-right");
 }
 
 $toast-position: ("top-left", "top-center", "top-right", "center-left", "center-right", "bottom-left", "bottom-center", "bottom-right") !default;
@@ -556,5 +605,6 @@ $h6-size: 1.2rem !default;
 @import "mixins/unit";
 @import "mixins/layout";
 @import "mixins/grid";
+@import "mixins/flex";
 @import "mixins/responsive";
 @import "mixins/components";