add flex-direction, align-items and justify content utilities / add a…

…ligned option to list

app/templates/main.scss

@@ -14,12 +14,15 @@
 @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';

app/templates/objects/_list.scss

@@ -1,3 +1,14 @@
+/**
+ * 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.

app/templates/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';

app/templates/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';

app/templates/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';