SCSS with iotaCSS added

5 files changed, 323 insertions, 0 deletions

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';