SCSS with iotaCSS added

32 files changed, 1152 insertions, 0 deletions

diff --git a/src/scss/base/_initialize.scss b/src/scss/base/_initialize.scss
new file mode 100644
index 0000000..6185613
--- /dev/null
+++ b/src/scss/base/_initialize.scss
@@ -0,0 +1,42 @@
+/**
+ * Global box sizing option
+ *
+ * Type: String
+ */
+
+$iota-base-initialize-box-sizing: 'border-box';
+
+
+/**
+ * Makes all heading tags ( h1 - h6 ) to be equal
+ * to your body size.  It forces you to use heading
+ * tags with focus on your semantics and not on the
+ * way they look.
+ *
+ * Type: Boolean
+ */
+
+$iota-base-initialize-heading-size: true;
+
+
+/**
+ * Enables normalize and resets for the HTML4 form
+ * elements
+ *
+ * Type: Boolean
+ */
+
+$iota-base-initialize-form-elements: false;
+
+
+/**
+ * Enables normalize and resets for the HTML5 form
+ * elements
+ *
+ * Type: Boolean
+ */
+
+$iota-base-initialize-html5-form-elements: false;
+
+
+@import 'node_modules/iotacss/base/initialize';
diff --git a/src/scss/main.scss b/src/scss/main.scss
new file mode 100644
index 0000000..c643b18
--- /dev/null
+++ b/src/scss/main.scss
@@ -0,0 +1,35 @@
+@import 'settings/core';
+
+//@import 'tools/core';
+//@import 'tools/breakpoint';
+//@import 'tools/ms';
+//@import 'tools/rtl';
+//@import 'tools/type';
+
+@import 'base/initialize';
+
+//@import 'objects/container';
+//@import 'objects/grid';
+//@import 'objects/list';
+//@import 'objects/media';
+//@import 'objects/type';
+
+//@import 'utilities/align-items';
+//@import 'utilities/align';
+//@import 'utilities/bgcolor';
+//@import 'utilities/clearfix';
+//@import 'utilities/color';
+//@import 'utilities/display';
+//@import 'utilities/flex-direction';
+//@import 'utilities/float';
+//@import 'utilities/justify-content';
+//@import 'utilities/margin';
+//@import 'utilities/opacity';
+//@import 'utilities/padding';
+//@import 'utilities/position';
+//@import 'utilities/pull';
+//@import 'utilities/push';
+//@import 'utilities/size';
+//@import 'utilities/text';
+//@import 'utilities/transform';
+//@import 'utilities/weight';
diff --git a/src/scss/objects/_container.scss b/src/scss/objects/_container.scss
new file mode 100644
index 0000000..2b28286
--- /dev/null
+++ b/src/scss/objects/_container.scss
@@ -0,0 +1,56 @@
+/**
+ * Allows you to change the default container name
+ * from .o-container.
+ *
+ * Type: String
+ */
+
+$iota-objs-container-namespace: 'container';
+
+
+/**
+ * Allows you to specify the default set of padding
+ * left and right of your container. You can use a
+ * map in case you would like to specify responsive
+ * gutter sizes.
+ *
+ * Type: Number / List / Map
+ */
+
+$iota-objs-container-gutter-default: $iota-global-gutter-default;
+
+
+/**
+ * Allows you to specify more sets of padding left and
+ * right of your container. You can use a nested map in
+ * case you would like to specify responsive gutter sizes.
+ *
+ * Type: Map
+ */
+
+$iota-objs-container-gutter-extra: ();
+
+
+/**
+ * Allows you to specify the default max-width of your
+ * container. You can use a map in case you would like
+ * to specify a responsive size.
+ *
+ * Type: String / Map
+ */
+
+$iota-objs-container-size-default: 1000px;
+
+
+/**
+ * Allows you to specify more sets of max-width for your
+ * container. You can use a nested map in case you would
+ * like to specify a responsive size.
+ *
+ * Type: Map
+ */
+
+$iota-objs-container-size-extra: ();
+
+
+@import 'node_modules/iotacss/objects/container';
diff --git a/src/scss/objects/_grid.scss b/src/scss/objects/_grid.scss
new file mode 100644
index 0000000..93a3c48
--- /dev/null
+++ b/src/scss/objects/_grid.scss
@@ -0,0 +1,81 @@
+/**
+ * Enable / Disable aligment modifiers.
+ * .o-grid--right : Align columns on right horizontally
+ * .o-grid--center : Align columns on center horizontally
+ * .o-grid--middle : Align columns on middle vertically
+ * .o-grid--bottom : Align columns on bottom vertically
+ *
+ * Type: Boolean
+ */
+
+$iota-objs-grid-aligned: false;
+
+
+/**
+ * Enable / Disable reversed modifier
+ * .o-grid--rev : Reverse columns order
+ *
+ * Type: Boolean
+ */
+
+$iota-objs-grid-rev: false;
+
+
+/**
+ * Default gutter size. Use a number for a single size or
+ * a map for a responsive size.
+ *
+ * Type: Number / Map 
+ */
+
+$iota-objs-grid-gutter-default: $iota-global-gutter-default;
+
+
+/**
+ * Extra gutters map. Each gutter size will be available as a
+ * modifier that will be named according to the gutter name.
+ * Each gutter size will be available as a modifier that will
+ * be named according to the gutter name.
+ * E.g. If $iota-objs-grid-gutter-extra: ('compact': '10px');
+ * then .o-grid--compact will be available for use.
+ *
+ * Type: Map
+ */
+
+$iota-objs-grid-gutter-extra: ();
+
+
+/**
+ * Enable / Disable flexbox on grid.
+ * 
+ * Type: Boolean
+ */
+
+$iota-objs-grid-flex: $iota-global-flex;
+
+
+/**
+ * Enable / Disable equal height modifier .o-grid--equal-height.
+ * Works only if $iota-obj-grid-flex is enabled.
+ *
+ * Type: Boolean
+ */
+
+$iota-objs-grid-equal-height: false;
+
+
+/**
+ * Namespace classes
+ *
+ * Type: String
+ */
+
+$iota-objs-grid-namespace         : 'grid';
+$iota-objs-grid-column-name       : 'col';
+$iota-objs-grid-align-right-name  : 'right';
+$iota-objs-grid-align-center-name : 'center';
+$iota-objs-grid-align-top-name    : 'top';
+$iota-objs-grid-namespace         : 'grid';
+
+
+@import 'node_modules/iotacss/objects/grid';
diff --git a/src/scss/objects/_list.scss b/src/scss/objects/_list.scss
new file mode 100644
index 0000000..7e91ef1
--- /dev/null
+++ b/src/scss/objects/_list.scss
@@ -0,0 +1,78 @@
+/**
+ * Enable / Disable aligment modifiers.
+ * .o-list--middle : Align list items on middle vertically
+ * .o-list--bottom : Align list items on bottom vertically
+ *
+ * Type: Boolean
+ */
+
+$iota-objs-list-aligned: false;
+
+
+/**
+ * Enable / Disable block modifier. .o-list--block : Each list
+ * item will have display block with a bottom margin.
+ *
+ * Type: Boolean
+ */
+
+$iota-objs-list-block: false;
+
+
+/**
+ * Enable / Disable inline modifier. .o-list--inline Each list
+ * item will have display inline-block with a right margin.
+ *
+ * Type: Boolean
+ */
+
+$iota-objs-list-inline: false;
+
+
+/**
+ * Enable / Disable span modifier. .o-list--span : Each list
+ * item will have display table-cell with a border spacing so
+ * that they never wrap to a new row.
+ *
+ * Type: Boolean
+ */
+
+$iota-objs-list-span: false;
+
+
+/**
+ * Default gutter size. Use a number for a single size or
+ * a map for a responsive size.
+ *
+ * Type: Number / Map
+ */
+
+$iota-objs-list-gutter-default: $iota-global-gutter-default;
+
+
+/**
+ * Extra gutters map. Each gutter size will be available
+ * as a modifier that will be named according to the gutter
+ * name. E.g. If $iota-objs-list-gutter-extra: ('compact': '10px');
+ * then .o-list--compact will be available for use.
+ *
+ * Type: Map
+ */
+
+$iota-objs-list-gutter-extra: ();
+
+
+/**
+ * Namespace classes
+ *
+ * Type: String
+ */
+
+$iota-objs-list-namespace   : 'list';
+$iota-objs-list-item-name   : 'item';
+$iota-objs-list-block-name  : 'block';
+$iota-objs-list-inline-name : 'inline';
+$iota-objs-list-span-name   : 'span';
+
+
+@import 'node_modules/iotacss/objects/list';
diff --git a/src/scss/objects/_media.scss b/src/scss/objects/_media.scss
new file mode 100644
index 0000000..2c52f87
--- /dev/null
+++ b/src/scss/objects/_media.scss
@@ -0,0 +1,89 @@
+/**
+ * Enable / Disable aligment modifiers.
+ * .o-media--middle Align columns at middle vertically
+ * .o-media--bottom Align columns at bottom vertically.
+ *
+ * Type: Boolean
+ */
+
+$iota-objs-media-aligned: false;
+
+
+/**
+ * Enable / Disable reversed modifier
+ * .o-media--rev Reverse columns order
+ *
+ * Type: Boolean
+ */
+
+$iota-objs-media-rev: false;
+
+
+/**
+ * Default gutter size. Use a number for a single size or
+ * a map for a responsive size.
+ *
+ * Type: Number / Map
+ */
+
+$iota-objs-media-gutter-default: $iota-global-gutter-default;
+
+
+/**
+ * Extra gutters map. Each gutter size will be available as
+ * a modifier that will be named according to the gutter name.
+ * Use a map for a single size or a nested map for a responsive
+ * size. E.g. If $iota-objs-media-gutter-extra: ('compact': '10px');
+ * then .o-media--compact will be available for use.
+ *
+ * Type: Map
+ */
+
+$iota-objs-media-gutter-extra: ();
+
+
+/**
+ * Enable / Disable flexbox
+ *
+ * Type: Boolean
+ */
+
+$iota-objs-media-flex: $iota-global-flex;
+
+
+/**
+ * Enable / Disable responsive modifier.
+ * .o-media--res Collapse fluid section bellow fixed one,
+ * at a specific max-width breakpoint.
+ *
+ * Type: Boolean
+ */
+
+$iota-objs-media-res: false;
+
+
+/**
+ * Specify max-width for breakpoint to collapse at.
+ *
+ * Type: Number
+ */
+
+$iota-objs-media-collapse-at: 767px;
+
+
+/**
+ * Namespace classes
+ *
+ * Type: String
+ */
+
+$iota-objs-media-namespace          : 'media';
+$iota-objs-media-fixed-name         : 'fixed';
+$iota-objs-media-fluid-name         : 'fluid';
+$iota-objs-media-reversed-name      : 'rev';
+$iota-objs-media-align-middle-name  : 'middle';
+$iota-objs-media-align-bottom-name  : 'bottom';
+$iota-objs-media-responsive-name    : 'res';
+
+
+@import 'node_modules/iotacss/objects/media';
diff --git a/src/scss/objects/_type.scss b/src/scss/objects/_type.scss
new file mode 100644
index 0000000..ed74bde
--- /dev/null
+++ b/src/scss/objects/_type.scss
@@ -0,0 +1,19 @@
+/**
+ * Allows you to change the default type name from .o-type-.
+ * 
+ * Type: String
+ */
+
+$iota-objs-type-namespace: 'type-';
+
+
+/**
+ * Allows you to specify typography sizes.
+ *
+ * Type: Map
+ */
+
+$iota-objs-type-sizes: ();
+
+
+@import 'node_modules/iotacss/objects/type';
diff --git a/src/scss/settings/_core.scss b/src/scss/settings/_core.scss
new file mode 100644
index 0000000..6f08294
--- /dev/null
+++ b/src/scss/settings/_core.scss
@@ -0,0 +1,97 @@
+/**
+ * Grid columns. This setting is shared between
+ * iotaCSS grid objects and size, pull & push
+ * utilities. You can change it also locally to
+ * each module.
+ *
+ * Type: Unitless Number / List
+ */
+
+$iota-global-columns: 2, 3, 6, 12;
+
+
+/**
+ * Global namespace for Objects, Components and
+ * Utilities
+ *
+ * Type: String
+ */
+
+$iota-global-objects-namespace    : 'o-';
+$iota-global-utilities-namespace  : 'u-';
+$iota-global-components-namespace : 'c-';
+
+
+/**
+ * Default gutters. This setting is shared between
+ * multiple objects and utilities as the default value
+ * for gutters. You can change it also locally to each
+ * module.
+ *
+ * Type: Number / List / Map
+ */
+
+$iota-global-gutter-default: 10px;
+
+
+/**
+ * Enables flexbox across the app. If you do not want
+ * all modules to use flexbox you can keep this value
+ * false and set it to true separately to each one of
+ * them locally.
+ *
+ * Type: Boolean
+ */
+
+$iota-global-flex: false;
+
+
+/**
+ * Enables rtl across the app. If you enable this setting
+ * the final CSS will be converted to RTL.
+ *
+ * Type: Boolean
+ */
+
+$iota-global-rtl: false;
+
+
+/**
+ * Default global breakpoints map. These are the
+ * default breakpoints map that will be shared across
+ * all iotaCSS modules. You can change it also locally
+ * to each module.
+ *
+ * Type: Map
+ */
+
+$iota-global-breakpoints: (
+  sm  : "screen and ( min-width: 768px )",
+  md  : "screen and ( min-width: 1000px )"
+);
+
+
+/**
+ * Global breakpoint suffix naming setting. All breakpoint
+ * specific styles have a '@breakpointName' suffix by default.
+ * The \ character is used to escape the @ character.
+ *
+ * Type: String
+ */
+
+$iota-global-breakpoint-separator: \@;
+
+
+/**
+ * Global delimiter naming setting for Size, Push and Pull
+ * utilities. By default it is '/' (.u-1/2) and you can change
+ * it for example to 'of' so that the generated HTML class will be
+ * 'u-1of2'.
+ *
+ * Type: String
+ */
+
+$iota-global-delimiter: \/;
+
+
+@import 'node_modules/iotacss/settings/core';
diff --git a/src/scss/tools/_breakpoint.scss b/src/scss/tools/_breakpoint.scss
new file mode 100644
index 0000000..bd51744
--- /dev/null
+++ b/src/scss/tools/_breakpoint.scss
@@ -0,0 +1 @@
+@import 'node_modules/iotacss/tools/breakpoint';
diff --git a/src/scss/tools/_core.scss b/src/scss/tools/_core.scss
new file mode 100644
index 0000000..0eaff75
--- /dev/null
+++ b/src/scss/tools/_core.scss
@@ -0,0 +1 @@
+@import 'node_modules/iotacss/tools/core';
diff --git a/src/scss/tools/_ms.scss b/src/scss/tools/_ms.scss
new file mode 100644
index 0000000..fcd1c84
--- /dev/null
+++ b/src/scss/tools/_ms.scss
@@ -0,0 +1,29 @@
+/**
+ * The base value the scale starts at.
+ *
+ * Number
+ */
+
+$iota-tools-ms-base: 15px;
+
+
+/**
+ * The ratio the scale is built on
+ *
+ * Unitless Number
+ */
+
+$iota-tools-ms-ratio: 1.2;
+
+
+/**
+ * Length of scale ( right part of the decimal
+ * point ) ms will be rounded to.
+ *
+ * Unitless Number
+ */
+
+$iota-tools-ms-scale: 3;
+
+
+@import 'node_modules/iotacss/tools/ms';
diff --git a/src/scss/tools/_rtl.scss b/src/scss/tools/_rtl.scss
new file mode 100644
index 0000000..d5994ba
--- /dev/null
+++ b/src/scss/tools/_rtl.scss
@@ -0,0 +1 @@
+@import 'node_modules/iotacss/tools/rtl';
diff --git a/src/scss/tools/_type.scss b/src/scss/tools/_type.scss
new file mode 100644
index 0000000..3b12f4c
--- /dev/null
+++ b/src/scss/tools/_type.scss
@@ -0,0 +1 @@
+@import 'node_modules/iotacss/tools/type';
diff --git a/src/scss/utilities/_align-items.scss b/src/scss/utilities/_align-items.scss
new file mode 100644
index 0000000..f74be1c
--- /dev/null
+++ b/src/scss/utilities/_align-items.scss
@@ -0,0 +1,31 @@
+/**
+ * Enable / Disable breakpoint specific classes
+ *
+ * Type: Boolean
+ */
+
+$iota-utils-align-items-res: false;
+
+
+/**
+ * Override breakpoints map only for align utility
+ *
+ * Type: Type: Map
+ */
+
+$iota-utils-align-items-breakpoints: $iota-global-breakpoints;
+
+
+/**
+ * Namespace classes
+ *
+ * Type: String
+ */
+
+$iota-utils-align-items-namespace     : 'ai-';
+$iota-utils-align-items-start-name    : 'start';
+$iota-utils-align-items-end-name      : 'end';
+$iota-utils-align-items-center-name   : 'center';
+
+
+@import 'node_modules/iotacss/utilities/align-items';
diff --git a/src/scss/utilities/_align.scss b/src/scss/utilities/_align.scss
new file mode 100644
index 0000000..631e839
--- /dev/null
+++ b/src/scss/utilities/_align.scss
@@ -0,0 +1,32 @@
+/**
+ * Enable / Disable breakpoint specific classes
+ *
+ * Type: Boolean
+ */
+
+$iota-utils-align-res: false;
+
+
+/**
+ * Override breakpoints map only for align utility
+ *
+ * Type: Type: Map
+ */
+
+$iota-utils-align-breakpoints: $iota-global-breakpoints;
+
+
+/**
+ * Namespace classes
+ *
+ * Type: String
+ */
+
+$iota-utils-align-namespace     : 'align-';
+$iota-utils-align-top-name      : 'top';
+$iota-utils-align-bottom-name   : 'bottom';
+$iota-utils-align-middle-name   : 'middle';
+$iota-utils-align-baseline-name : 'baseline';
+
+
+@import 'node_modules/iotacss/utilities/align';
diff --git a/src/scss/utilities/_bgcolor.scss b/src/scss/utilities/_bgcolor.scss
new file mode 100644
index 0000000..015e36f
--- /dev/null
+++ b/src/scss/utilities/_bgcolor.scss
@@ -0,0 +1,19 @@
+/**
+ * Background color names
+ *
+ * Type: Map
+ */
+
+$iota-utils-bgcolor-names: ();
+
+
+/**
+ * Namespace classes
+ *
+ * Type: String
+ */
+
+$iota-utils-bgcolor-namespace: 'bgcolor-';
+
+
+@import 'node_modules/iotacss/utilities/bgcolor';
diff --git a/src/scss/utilities/_clearfix.scss b/src/scss/utilities/_clearfix.scss
new file mode 100644
index 0000000..5aaa021
--- /dev/null
+++ b/src/scss/utilities/_clearfix.scss
@@ -0,0 +1,10 @@
+/**
+ * Namespace classes
+ *
+ * Type: String
+ */
+
+$iota-utils-clearfix-namespace: 'cf';
+
+
+@import 'node_modules/iotacss/utilities/clearfix';
diff --git a/src/scss/utilities/_color.scss b/src/scss/utilities/_color.scss
new file mode 100644
index 0000000..467a63b
--- /dev/null
+++ b/src/scss/utilities/_color.scss
@@ -0,0 +1,19 @@
+/**
+ * Color names
+ *
+ * Type: Map
+ */
+
+$iota-utils-color-names: ();
+
+
+/**
+ * Namespace classes
+ *
+ * Type: String
+ */
+
+$iota-utils-color-namespace: 'color-';
+
+
+@import 'node_modules/iotacss/utilities/color';
diff --git a/src/scss/utilities/_display.scss b/src/scss/utilities/_display.scss
new file mode 100644
index 0000000..ef16830
--- /dev/null
+++ b/src/scss/utilities/_display.scss
@@ -0,0 +1,33 @@
+/**
+ * Enables / Disables breakpoint specific classes
+ *
+ * Type: Boolean
+ */
+
+$iota-utils-display-res: false;
+
+
+/**
+ * Breakpoints map. Overrides the breakpoints map only
+ * for display utility.
+ *
+ * Type: Map
+ */
+
+$iota-utils-display-breakpoints: $iota-global-breakpoints;
+
+
+/**
+ * Namespace classes
+ *
+ * Type: String
+ */
+
+$iota-utils-display-namespace         : '';
+$iota-utils-display-block-name        : 'block';
+$iota-utils-display-hidden-name       : 'hidden';
+$iota-utils-display-inline-name       : 'inline';
+$iota-utils-display-inline-block-name : 'inline-block';
+
+
+@import 'node_modules/iotacss/utilities/display';
diff --git a/src/scss/utilities/_flex-direction.scss b/src/scss/utilities/_flex-direction.scss
new file mode 100644
index 0000000..620e15c
--- /dev/null
+++ b/src/scss/utilities/_flex-direction.scss
@@ -0,0 +1,32 @@
+/**
+ * Enable / Disable breakpoint specific classes
+ *
+ * Type: Boolean
+ */
+
+$iota-utils-flex-direction-res: false;
+
+
+/**
+ * Override breakpoints map only for align utility
+ *
+ * Type: Type: Map
+ */
+
+$iota-utils-flex-direction-breakpoints: $iota-global-breakpoints;
+
+
+/**
+ * Namespace classes
+ *
+ * Type: String
+ */
+
+$iota-utils-flex-direction-namespace            : 'fd-';
+$iota-utils-flex-direction-row-name             : 'row';
+$iota-utils-flex-direction-row-reverse-name     : 'rowrev';
+$iota-utils-flex-direction-column-name          : 'col';
+$iota-utils-flex-direction-column-reverse-name  : 'colrev';
+
+
+@import 'node_modules/iotacss/utilities/flex-direction';
diff --git a/src/scss/utilities/_float.scss b/src/scss/utilities/_float.scss
new file mode 100644
index 0000000..ca02761
--- /dev/null
+++ b/src/scss/utilities/_float.scss
@@ -0,0 +1,32 @@
+/**
+ * Enables / Disables breakpoint specific classes
+ *
+ * Type: Boolean
+ */
+
+$iota-utils-float-res: false;
+
+
+/**
+ * Breakpoints map. Overrides the breakpoints map only
+ * for float utility.
+ *
+ * Type: Map
+ */
+
+$iota-utils-float-breakpoints: $iota-global-breakpoints;
+
+
+
+/**
+ * Namespace classes
+ *
+ * Type: String
+ */
+
+$iota-utils-float-namespace   : 'float-';
+$iota-utils-float-left-name   : 'left';
+$iota-utils-float-right-name  : 'right';
+
+
+@import 'node_modules/iotacss/utilities/float';
diff --git a/src/scss/utilities/_justify-content.scss b/src/scss/utilities/_justify-content.scss
new file mode 100644
index 0000000..5dee6e8
--- /dev/null
+++ b/src/scss/utilities/_justify-content.scss
@@ -0,0 +1,31 @@
+/**
+ * Enable / Disable breakpoint specific classes
+ *
+ * Type: Boolean
+ */
+
+$iota-utils-justify-content-res: false;
+
+
+/**
+ * Override breakpoints map only for align utility
+ *
+ * Type: Type: Map
+ */
+
+$iota-utils-justify-content-breakpoints: $iota-global-breakpoints;
+
+
+/**
+ * Namespace classes
+ *
+ * Type: String
+ */
+
+$iota-utils-justify-content-namespace   : 'jc-';
+$iota-utils-justify-content-start-name  : 'start';
+$iota-utils-justify-content-end-name    : 'end';
+$iota-utils-justify-content-center-name : 'center';
+
+
+@import 'node_modules/iotacss/utilities/justify-content';
diff --git a/src/scss/utilities/_margin.scss b/src/scss/utilities/_margin.scss
new file mode 100644
index 0000000..4e08dc4
--- /dev/null
+++ b/src/scss/utilities/_margin.scss
@@ -0,0 +1,54 @@
+/**
+ * Margin default gutter. Use a number for a simple size
+ * and a map for responsive.
+ *
+ * Type: Number / Map
+ */
+
+$iota-utils-margin-default: $iota-global-gutter-default;
+
+
+/**
+ * Margin extra gutters.
+ *
+ * Type: Map
+ */
+
+$iota-utils-margin-extra: ();
+
+
+/**
+ * Enables / Disables responsive classes
+ *
+ * Type: Boolean
+ */
+
+$iota-utils-margin-res: false;
+
+
+/**
+ * Breakpoints map. Overrides the breakpoints map only
+ * for margin utility.
+ *
+ * Type: Map
+ */
+
+$iota-utils-margin-breakpoints: $iota-global-breakpoints;
+
+
+/**
+ * Namespace classes
+ *
+ * Type: String
+ */
+
+$iota-utils-margin-namespace        : 'm';
+$iota-utils-margin-top-name         : 't';
+$iota-utils-margin-right-name       : 'r';
+$iota-utils-margin-bottom-name      : 'b';
+$iota-utils-margin-left-name        : 'l';
+$iota-utils-margin-vertical-name    : 'v';
+$iota-utils-margin-horizontal-name  : 'h';
+
+
+@import 'node_modules/iotacss/utilities/margin';
diff --git a/src/scss/utilities/_opacity.scss b/src/scss/utilities/_opacity.scss
new file mode 100644
index 0000000..a01d95d
--- /dev/null
+++ b/src/scss/utilities/_opacity.scss
@@ -0,0 +1,19 @@
+/**
+ * Opacity sizes
+ *
+ * Type: Map
+ */
+
+$iota-utils-opacity-sizes: ();
+
+
+/**
+ * Namespace classes
+ *
+ * Type: String
+ */
+
+$iota-utils-opacity-namespace: 'opacity-';
+
+
+@import 'node_modules/iotacss/utilities/opacity';
diff --git a/src/scss/utilities/_padding.scss b/src/scss/utilities/_padding.scss
new file mode 100644
index 0000000..dc85f53
--- /dev/null
+++ b/src/scss/utilities/_padding.scss
@@ -0,0 +1,54 @@
+/**
+ * Padding default gutter. Use a number for a simple size
+ * and a map for responsive.
+ *
+ * Type: Number / Map
+ */
+
+$iota-utils-padding-default: $iota-global-gutter-default;
+
+
+/**
+ * Padding extra gutters.
+ *
+ * Type: Map
+ */
+
+$iota-utils-padding-extra: ();
+
+
+/**
+ * Enables / Disables responsive classes
+ *
+ * Type: Boolean
+ */
+
+$iota-utils-padding-res: false;
+
+
+/**
+ * Breakpoints map. Overrides the breakpoints map only
+ * for padding utility.
+ *
+ * Type: Map
+ */
+
+$iota-utils-padding-breakpoints: $iota-global-breakpoints;
+
+
+/**
+ * Namespace classes
+ *
+ * Type: String
+ */
+
+$iota-utils-padding-namespace        : 'p';
+$iota-utils-padding-top-name         : 't';
+$iota-utils-padding-right-name       : 'r';
+$iota-utils-padding-bottom-name      : 'b';
+$iota-utils-padding-left-name        : 'l';
+$iota-utils-padding-vertical-name    : 'v';
+$iota-utils-padding-horizontal-name  : 'h';
+
+
+@import 'node_modules/iotacss/utilities/padding';
diff --git a/src/scss/utilities/_position.scss b/src/scss/utilities/_position.scss
new file mode 100644
index 0000000..aff877d
--- /dev/null
+++ b/src/scss/utilities/_position.scss
@@ -0,0 +1,33 @@
+/**
+ * Enable / Disable breakpoint specific classes
+ * 
+ * Type: Boolean
+ */
+
+$iota-utils-position-res: false;
+
+
+/**
+ * Overrides breakpoints map only for position utility
+ *
+ * Type: Map
+ */
+
+$iota-utils-position-breakpoints: $iota-global-breakpoints;
+
+
+/**
+ * Namespace classes
+ *
+ * Type: String
+ */
+
+$iota-utils-position-namespace      : '';
+$iota-utils-position-absolute-name  : 'absolute';
+$iota-utils-position-fixed-name     : 'fixed';
+$iota-utils-position-relative-name  : 'relative';
+$iota-utils-position-static-name    : 'static';
+$iota-utils-position-sticky-name    : 'sticky';
+
+
+@import 'node_modules/iotacss/utilities/position';
diff --git a/src/scss/utilities/_pull.scss b/src/scss/utilities/_pull.scss
new file mode 100644
index 0000000..309db79
--- /dev/null
+++ b/src/scss/utilities/_pull.scss
@@ -0,0 +1,47 @@
+/**
+ * Namespace classes
+ *
+ * Type: String
+ */
+
+$iota-utils-pull-namespace: 'pull-';
+
+
+/**
+ * Size delimiter. Defaults to \/. Ex: .u-pull-1/3
+ *
+ * Type: String
+ */
+
+$iota-utils-pull-delimiter: $iota-global-delimiter;
+
+
+/**
+ * Columns to populate pull utility for
+ *
+ * Type: Unitless Number / List
+ */
+
+$iota-utils-pull-columns: $iota-global-columns;
+
+
+/**
+ * Enables / Disables breakpoint specific classes
+ *
+ * Type: Boolean
+ */
+
+$iota-utils-pull-res: false;
+
+
+/**
+ * Breakpoints map. Allows you to create breakpoints only
+ * for the pull responsive utility.
+ *
+ * Type: Map
+ */
+
+$iota-utils-pull-breakpoints: $iota-global-breakpoints;
+
+
+@import 'node_modules/iotacss/utilities/pull';
diff --git a/src/scss/utilities/_push.scss b/src/scss/utilities/_push.scss
new file mode 100644
index 0000000..c7f41a4
--- /dev/null
+++ b/src/scss/utilities/_push.scss
@@ -0,0 +1,47 @@
+/**
+ * Namespace classes
+ *
+ * Type: String
+ */
+
+$iota-utils-push-namespace: 'push-';
+
+
+/**
+ * Size delimiter. Defaults to \/. Ex: .u-push-1/3
+ *
+ * Type: String
+ */
+
+$iota-utils-push-delimiter: $iota-global-delimiter;
+
+
+/**
+ * Columns to populate push utility for
+ *
+ * Type: Unitless Number / List
+ */
+
+$iota-utils-push-columns: $iota-global-columns;
+
+
+/**
+ * Enables / Disables breakpoint specific classes
+ *
+ * Type: Boolean
+ */
+
+$iota-utils-push-res: false;
+
+
+/**
+ * Breakpoints map. Allows you to create breakpoints only
+ * for the push responsive utility.
+ *
+ * Type: Map
+ */
+
+$iota-utils-push-breakpoints: $iota-global-breakpoints;
+
+
+@import 'node_modules/iotacss/utilities/push';
diff --git a/src/scss/utilities/_size.scss b/src/scss/utilities/_size.scss
new file mode 100644
index 0000000..2f546f6
--- /dev/null
+++ b/src/scss/utilities/_size.scss
@@ -0,0 +1,47 @@
+/**
+ * Size utility delimiter. Default to \/. Ex: .u-1/3.
+ *
+ * Type: String
+ */
+
+$iota-utils-size-delimiter: \/;  
+
+
+/**
+ * Size utility columns list
+ *
+ * Type: List
+ */
+
+$iota-utils-size-columns: $iota-global-columns;
+
+
+/**
+ * Enables / Disables breakpoint specific classes
+ *
+ * Type: Boolean
+ */
+
+$iota-utils-size-res: false;
+
+  
+/**
+ * Breakpoints map. Overrides the breakpoints map only
+ * for margin utility.
+ *
+ * Type: Map
+ */
+
+$iota-utils-size-breakpoints: $iota-global-breakpoints;
+
+
+/**
+ * Namespace classes
+ * 
+ * Type: String
+ */
+
+$iota-utils-size-namespace: '';
+
+
+@import 'node_modules/iotacss/utilities/size';
diff --git a/src/scss/utilities/_text.scss b/src/scss/utilities/_text.scss
new file mode 100644
index 0000000..a417f1b
--- /dev/null
+++ b/src/scss/utilities/_text.scss
@@ -0,0 +1,31 @@
+/**
+ * Enables / Disables breakpoint specific classes
+ *
+ * Type: Boolean
+ */
+
+$iota-utils-text-res: false;
+
+
+/**
+ * Overrides breakpoints map only for position utility
+ * 
+ * Type: Map
+ */
+
+$iota-utils-text-breakpoints: $iota-global-breakpoints;
+
+
+/**
+ * Namespace classes
+ *
+ * Type: String
+ */
+
+$iota-utils-text-namespace    : 'text-';
+$iota-utils-text-left-name    : 'left';
+$iota-utils-text-right-name   : 'right';
+$iota-utils-text-center-name  : 'center';
+
+
+@import 'node_modules/iotacss/utilities/text';
diff --git a/src/scss/utilities/_transform.scss b/src/scss/utilities/_transform.scss
new file mode 100644
index 0000000..94ad183
--- /dev/null
+++ b/src/scss/utilities/_transform.scss
@@ -0,0 +1,32 @@
+/**
+ * Enables / Disables breakpoint specific classes
+ *
+ * Type: Boolean
+ */
+
+$iota-utils-transform-res: false;
+
+
+/**
+ * Breakpoints map. Overrides the breakpoints map only
+ * for margin utility.
+ *
+ * Type: Map
+ */
+
+$iota-utils-transform-breakpoints: $iota-global-breakpoints;
+
+
+/**
+ * Namespace classes
+ *
+ * Type: String
+ */
+
+$iota-utils-transform-namespace       : '';
+$iota-utils-transform-capitalize-name : 'capitalize';
+$iota-utils-transform-uppercase-name  : 'uppercase';
+$iota-utils-transform-lowercase-name  : 'lowercase';
+
+
+@import 'node_modules/iotacss/utilities/transform';
diff --git a/src/scss/utilities/_weight.scss b/src/scss/utilities/_weight.scss
new file mode 100644
index 0000000..8785357
--- /dev/null
+++ b/src/scss/utilities/_weight.scss
@@ -0,0 +1,19 @@
+/**
+ * Weight sizes
+ *
+ * Type: Map
+ */
+
+$iota-utils-weight-sizes: ();
+
+
+/**
+ * Namespace classes
+ *
+ * Type: String
+ */
+
+$iota-utils-weight-namespace: 'weight-';
+
+
+@import 'node_modules/iotacss/utilities/weight';