diff --git a/README.md b/README.md
new file mode 100644
index 0000000..4ee8abc
--- /dev/null
+++ b/README.md
@@ -0,0 +1,29 @@
+# SCAFFOLD
+----
+This scaffold depends on bower, so you better get it.
+
+## Bower
+Just `bower install` it!
+
+#### Bower with Rails
+If on a Rails application we need to tell asset pipeline where to get bower_components
+
+1. Add `.bowerrc` and point the target
+
+```JSON
+
+{
+  "directory": "vendor/assets/bower_components"
+}
+```
+
+1. Tell asset pipeline where the components are, in `config/application.rb`
+
+```Ruby
+
+# tell asset pipeline where bower components are
+config.assets.paths << Rails.root.join('vendor', 'assets', 'bower_components')
+``
+
+----
+# Whitesmith ™
\ No newline at end of file
diff --git a/application.css.scss b/application.css.scss
new file mode 100644
index 0000000..f2edf7a
--- /dev/null
+++ b/application.css.scss
@@ -0,0 +1,86 @@
+/*!
+ _    _ _     _ _                      _ _   _     
+| |  | | |   (_) |                    (_) | | |    
+| |  | | |__  _| |_ ___  ___ _ __ ___  _| |_| |__  
+| |/\| | '_ \| | __/ _ \/ __| '_ ` _ \| | __| '_ \ 
+\  /\  / | | | | ||  __/\__ \ | | | | | | |_| | | |
+ \/  \/|_| |_|_|\__\___||___/_| |_| |_|_|\__|_| |_|
+                                                  
+	
+	WEB:  https://whitesmith.co
+	MAIL: info@whitesmith.co                                           
+*/
+
+/*
+    APPLICATION.SCSS
+    ----------------
+
+    the SASS manifest. Import all needed partials and other manifestos here
+    Mind the order, from low to hight specificity:
+
+    1. VENDOR, EXTERNAL LIBRARYS
+    2. SETTINGS
+    3. TOOLS
+    4. BASE
+    5. OBJECTS
+    6. COMPONENTS
+    7. UTILITIES
+
+
+    Notes:
+    For .sass, .scss files use import and not require
+    for .css files you can use both *= require or @import, but require must be bellow this section
+    On components, import from more atomic to molecule ones
+
+    Requires:
+
+    //*="require lib path without quotes"
+	*= normalize-css/normalize
+	*= flexboxgrid/dist/flexboxgrid
+*/
+
+/* VENDOR */
+@import
+    "normalize-css/normalize",
+    "sassy-maps/sass/sassy-maps",
+    "flexboxgrid/dist/flexboxgrid",
+    "mappy-breakpoints/_mappy-breakpoints";
+
+
+/* SETTINGS */
+@import "settings/s.globals";
+
+
+/* TOOLS */
+@import
+    "tools/t.functions",
+    "tools/t.mixins";
+
+
+/* BASE */
+@import
+ 	"base/b.reset",
+	"base/b.box-sizing",
+	"base/b.fonts",
+	"base/b.page",
+	"base/b.html-elements";
+  
+
+/* OBJECTS */
+@import
+    "objects/o.media",
+    "objects/o.layout",
+    "objects/o.main",
+    "objects/o.container";
+
+
+/* COMPONENTS */
+@import
+    "components/c.bar",
+
+
+/* UTILITIES*/
+@import
+    "utilities/helpers",
+    "utilities/colorize";
+
diff --git a/base/_b.box-sizing.scss b/base/_b.box-sizing.scss
new file mode 100644
index 0000000..5adbc01
--- /dev/null
+++ b/base/_b.box-sizing.scss
@@ -0,0 +1,19 @@
+/*
+    BASE.BOX-SIZING
+    ----
+   
+    More sensible default box-sizing:
+	css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice 
+==================================================== */
+
+html {
+  box-sizing: border-box;
+}
+
+* {
+	&,
+	&:before,
+	&:after {
+		box-sizing: inherit;
+	}
+}
diff --git a/base/_b.fonts.scss b/base/_b.fonts.scss
new file mode 100644
index 0000000..1611e48
--- /dev/null
+++ b/base/_b.fonts.scss
@@ -0,0 +1,13 @@
+/*
+    BASE.FONTS
+    ----
+    
+    Importing Custom Fonts here
+==================================================== */
+
+
+// @mixin font-face($font-family, $file-path, $font-weight, $font-style, $RoR: false);
+
+body {
+    font: normal 1rem/$base-line-height "Helvetica Neue", -apple-system, BlinkMacSystemFont,"Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell,"Open Sans", sans-serif;
+}
\ No newline at end of file
diff --git a/base/_b.html-elements.scss b/base/_b.html-elements.scss
new file mode 100644
index 0000000..be37d03
--- /dev/null
+++ b/base/_b.html-elements.scss
@@ -0,0 +1,81 @@
+/*
+    BASE.HTML-ELEMENTS
+    ----
+    
+    Resets that aren't on reset :p
+    We should probably break this into a partial
+    per element, but it seems too much work
+==================================================== */
+
+
+/*
+    Default Headings 
+    ----
+
+    h1,h2,h3,h4,h5,h6
+*/
+@for $i from 1 to 7 {
+    h#{$i} { 
+        margin: 0;
+        // font-size: 1em; 
+        // font-weight: getFontWeight('semibold');
+    }
+}
+
+
+/* Links */
+a,
+a:hover {
+    color: inherit;
+    text-decoration: none;
+}
+
+
+
+/*
+  TABLE
+  ----
+
+  Ensure tables fill up as much space as possible.
+*/
+table {
+  width: 100%;
+}
+
+
+/*
+	IMAGES
+	----
+
+	From inuit.css
+	1. Fluid images for responsive purposes.
+	2. Offset `alt` text from surrounding copy.
+	3. Setting `vertical-align` removes the whitespace that appears under `img`
+	  elements when they are dropped into a page as-is. Safer alternative to
+	  using `display: block;`.
+*/
+img {
+  max-width: 100%; /* [1] */
+  font-style: italic; /* [2] */
+  vertical-align: middle; /* [3] */
+}
+
+
+/**
+ * 1. If a `width` and/or `height` attribute have been explicitly defined, let’s
+ *    not make the image fluid.
+ */
+img[width], /* [1] */
+img[height] {  /* [1] */
+  max-width: none;
+}
+
+
+hr{
+  margin: 0 auto;
+  width: 100%;
+  height: 1px;
+  background: currentColor;
+  opacity: 0.18;
+  padding: 8px 0px;
+}
\ No newline at end of file
diff --git a/base/_b.page.scss b/base/_b.page.scss
new file mode 100644
index 0000000..828171b
--- /dev/null
+++ b/base/_b.page.scss
@@ -0,0 +1,33 @@
+/*
+    BASE.PAGE
+    ----
+    
+    High-level, page-level styling.
+    Based on inuit.css framework
+
+     1. Force scrollbars to always be visible to prevent awkward ‘jumps’ when
+       navigating between pages that do/do not have enough content to produce
+       scrollbars naturally.
+    2. Ensure the page always fills at least the entire height of the viewport.
+    3. Prevent certain mobile browsers from automatically zooming fonts.
+    4. Fonts on OSX will look more consistent with other systems that do not
+       render text using sub-pixel anti-aliasing.
+       
+==================================================== */
+
+
+html {
+    font-size: 100%;
+    // overflow-y: scroll; /* [1] */
+    height: 100%; /* [2] */
+    -webkit-text-size-adjust: 100%; /* [3] */
+        -ms-text-size-adjust: 100%; /* [3] */
+    -moz-osx-font-smoothing: grayscale; /* [4] */
+     -webkit-font-smoothing: antialiased; /* [5] */
+}
+
+html,
+body {
+    width: 100%;
+    height: 100%;
+}
diff --git a/base/_b.reset.scss b/base/_b.reset.scss
new file mode 100644
index 0000000..b000d86
--- /dev/null
+++ b/base/_b.reset.scss
@@ -0,0 +1,40 @@
+/*
+    BASE.RESET
+    ----
+    
+    Based on inuit.css
+    A very simple reset that sits on top of Normalize.css.
+==================================================== */
+
+body,
+h1, h2, h3, h4, h5, h6,
+p, blockquote, pre,
+dl, dd, ol, ul,
+fieldset, legend,
+figure,
+hr {
+  margin:  0;
+  padding: 0;
+}
+
+
+/**
+ * Remove trailing margins from nested lists.
+ */
+li > {
+
+  ul,
+  ol {
+    margin-bottom: 0;
+  }
+
+}
+
+
+/**
+ * Remove default table spacing.
+ */
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
\ No newline at end of file
diff --git a/bower.json b/bower.json
new file mode 100644
index 0000000..a3c9df7
--- /dev/null
+++ b/bower.json
@@ -0,0 +1,26 @@
+{
+  "name": "Project-name",
+  "homepage": "https://github.com/whitesmith/repo-name",
+  "authors": [
+    "Whitesmith <info@whitesmith.co>"
+  ],
+  "description": "",
+  "main": "",
+  "private": true,
+  "ignore": [
+    "**/.*",
+    "node_modules",
+    "bower_components",
+    "vendor/assets/components",
+    "test",
+    "tests"
+  ],
+  "devDependencies": {
+    "sassy-maps": "^0.4.0",
+    "mappy-breakpoints": "^0.2.3",
+  },
+  "dependencies": {
+    "normalize-css": "^4.1.1",
+    "flexboxgrid": "^6.3.0",
+  }
+}
diff --git a/components/_c.bar.scss b/components/_c.bar.scss
new file mode 100644
index 0000000..11693c3
--- /dev/null
+++ b/components/_c.bar.scss
@@ -0,0 +1,81 @@
+/*
+    COMPONENTS.BAR
+    ----
+    
+    Horizonal bars, usefull for headers, footers,
+    headers in windows, overlay bars in cards you
+    name it.
+==================================================== */
+
+$bar-height-maps:(
+	primary: (
+		base: 56px;
+		lg: 64px;
+	),
+	secondary:(
+		base: 48px;
+		lg: 56px;
+	),
+	tab: (
+		base: 44px;
+	)
+)
+
+.c-bar{
+	position: relative;
+	display: flex;
+	width: 100%;
+
+	&--primary{
+		height: 56px;
+
+		@include mappy-bp(lg){
+			height: 64px;
+		}
+	}
+
+	&--secondary{
+		height: 48px;
+
+		@include mappy-bp(lg){
+			height: 56px;
+		}
+	}
+
+	
+
+}
+
+
+	/* inner bits */
+	.c-bar__block{
+		display: flex;
+    	align-items: center;
+
+    	&:not(:only-child){
+    		padding: 0 8px;
+    	}
+    	&--shy-right{ margin-left: auto; }
+    	&--shy-left{ margin-right: auto; }
+	}
+
+
+	.c-bar__title{
+		position: relative;
+		@include font-size(16px, 1);
+		
+
+		@include mappy-bp(sm){
+			@include font-size(18px);
+		}
+		
+		.c-bar__block:first-child & {
+			margin-left: 16px;
+		}
+
+		.c-bar--nightly & {
+			color: white;
+		}
+
+	}
+		
\ No newline at end of file
diff --git a/components/_c.button.scss b/components/_c.button.scss
new file mode 100644
index 0000000..396ba85
--- /dev/null
+++ b/components/_c.button.scss
@@ -0,0 +1,74 @@
+/*
+    COMPONENTS.BUTTON
+    ----
+    
+==================================================== */
+
+/* Buttons config */
+$button-color-maps: (
+    primary:(
+        bgColor: (
+            normal:    white,
+            hover:     #000,
+            focus:     #000,
+            disabled:  white
+        ),
+        textColor: (
+            normal:    #000,
+            hover:     white,
+            focus:     white,
+            disabled:  #000,
+        ),
+    ),
+    secondary: (
+        bgColor: (
+            normal:    white,
+            hover:     red,
+            focus:     red,
+            disabled:  white
+        ),
+        textColor: (
+            normal:    red,
+            hover:     #000,
+            focus:     #000,
+            disabled:  gray,
+        ),
+        borderColor: (
+            normal:    red,
+            hover:     red,
+            focus:     red,
+            disabled:  red
+        )
+    )
+);
+
+
+
+/* 
+	BUTTON.BASE
+*/
+.c-button {
+    @include resetAppearance(); //reset default browser btn appearance
+
+    position: relative;
+    display: inline-block;
+    padding: 0;
+
+    color: inherit;
+	
+}
+
+
+	.c-button__icon,
+	.c-button__text{
+		vertical-align: middle;
+	}
+
+	
+	.c-button__text{
+		margin-left: 0.5rem;
+	}
+	
+	.c-button__icon{
+		margin-top: -1px;
+	}
diff --git a/components/_c.drawer.scss b/components/_c.drawer.scss
new file mode 100644
index 0000000..c6c75dd
--- /dev/null
+++ b/components/_c.drawer.scss
@@ -0,0 +1,60 @@
+/*
+    COMPONENTS.DRAWER
+    ----
+    
+==================================================== */
+
+$drawer-size-map:(
+	base: 304px,
+	sm: 320px,
+)
+
+
+.c-drawer{
+	display: flex;
+	flex-direction: column;
+	position: fixed;
+	top:0;
+	left: 0;
+	height: 100vh;
+	width: map-get($drawer-size-map, 'base');
+	
+
+	//responsive sizes, just add mappy bp and desire sizes for more
+	@each $key, $value in $drawer-size-map{
+		@if $key != "base" {
+			@include mappy-bp($key{
+				width: $value;
+			}
+		}
+
+		@return false;
+	}
+}
+
+
+.c-drawer__header,
+.c-drawer__footer{
+	flex: none;
+}
+	
+	.c-drawer__header{
+
+	}
+
+	.c-drawer__body{
+	    flex:1;
+	    display: flex;
+	    flex-direction: column;
+	    justify-content: flex-start;
+	    align-items: center;
+	    overflow-x: hidden;
+	    overflow-y: scroll;
+	    -webkit-overflow-scrolling: touch;
+	}
+
+	.c-drawer__footer{
+		
+	}
+
+
diff --git a/objects/_o.block.scss b/objects/_o.block.scss
new file mode 100644
index 0000000..1c3db4e
--- /dev/null
+++ b/objects/_o.block.scss
@@ -0,0 +1,46 @@
+/*
+    OBJECTS.FILE
+    ----
+    
+
+    stacked object layout
+
+    common uses: icon + text feature
+
+    <div class="o-block">
+	    <img src="/path/to/image.png" alt="" class="o-block__img" />
+	    <div class="o-block__body">
+	        <p>Text-like content goes here.</p>
+	    </div>
+	</div>
+==================================================== */
+
+
+.o-block,
+.o-block__img,
+.o-block__body {
+	display: block;
+}
+
+
+.o-block{
+	
+	&--center{
+		text-align: center;
+	}
+}
+
+
+	.o-block__img {
+		margin-bottom: 1rem;
+
+		.o-block--center & {
+			max-width: 100%;
+			margin: 0 auto;
+		}
+	}
+
+	.o-block__body{
+		margin-bottom: 1rem;
+	}
+
diff --git a/objects/_o.box.scss b/objects/_o.box.scss
new file mode 100644
index 0000000..d75c4f4
--- /dev/null
+++ b/objects/_o.box.scss
@@ -0,0 +1,9 @@
+/*
+    OBJECTS.BOX
+    ----
+    
+
+    That's it, for creating spaced boxes
+    yeis! you can use responsive spacings if 
+    you wan
+==================================================== */
\ No newline at end of file
diff --git a/objects/_o.container.scss b/objects/_o.container.scss
new file mode 100644
index 0000000..69b469e
--- /dev/null
+++ b/objects/_o.container.scss
@@ -0,0 +1,37 @@
+/*
+    OBJECTS.CONTAINER
+    ----
+    
+
+    Wrapping content, to a limited size or now
+==================================================== */
+
+$container-sizes:(
+	sm: 700px,
+	lg: 1024px,
+	xl: 1280px,
+	xxl: 1440px 
+);
+
+
+.o-container{
+	display: block;
+	width: 100%;
+
+	@each $breakpoint, $size in $container-sizes{
+		@include mappy-bp($breakpoint){
+			max-width: $size;
+		}
+	}
+
+
+
+	&--flex{
+		display: flex;
+	}
+
+	&--flex-v{
+		display: flex;
+		flex-direction: column;
+	}
+}
\ No newline at end of file
diff --git a/objects/_o.list.scss b/objects/_o.list.scss
new file mode 100644
index 0000000..151c6cf
--- /dev/null
+++ b/objects/_o.list.scss
@@ -0,0 +1,7 @@
+/*
+    OBJECTS.LIST
+    ----
+    
+
+
+==================================================== */
diff --git a/objects/_o.main.scss b/objects/_o.main.scss
new file mode 100644
index 0000000..6b0cb02
--- /dev/null
+++ b/objects/_o.main.scss
@@ -0,0 +1,23 @@
+/*
+    OJECTS.MAIN
+    ----
+    
+
+    App wrappers, because on non static projects
+    like react and rails you proably need them
+==================================================== */
+
+//For react
+.o-app{
+	width: 100%;
+	height: 100%;
+}
+
+/*
+	Use for main oject
+
+	<main class="o-main"></main>
+*/
+.o-main{
+	
+}
\ No newline at end of file
diff --git a/objects/_o.media.scss b/objects/_o.media.scss
new file mode 100644
index 0000000..39e386f
--- /dev/null
+++ b/objects/_o.media.scss
@@ -0,0 +1,67 @@
+/*
+    OBJECTS.MEDIA
+    ----
+
+    The holy grail of layout. 
+    Double check if you can't achieve it with the media object variations,
+    there's a great probability that you can.
+    
+    more:
+    https://philipwalton.github.io/solved-by-flexbox/demos/media-object/
+    http://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code/
+
+
+    1. Wrapper powered by flexbox
+        1.1. Layout modifiers: order, horizontal and vertical alignment
+             This will modify it's direct descendents descend
+    2. This elements must be direct childs of [1].
+    3. The `o-media__figure` class could be use directly on <img> tags. 
+       Ifimage is more complex like a figure with caption or a complex avatar use as wrapper
+    4. As the with the figure class, `.o-media__body` could be use directly
+       on a text wrapper elemtent like <p>, for more complex structure use as wrapper.
+
+*/
+
+/* [1] */ 
+.o-media {
+    position: relative;
+    z-index: 2; //dealing possible parent with pseudo-elements;
+    display: flex;
+    
+    /* [1.1] */
+    &--middle   { align-items: center; }
+    &--bottom   { align-items: flex-end; }
+    &--baseline { align-items: baseline; }
+
+    &--center   { justify-content: center; }
+    &--inverse  { flex-direction: row-reverse; }
+    &--inline   { display: inline-flex; }
+}
+
+
+    /* [2], [3] */
+    .o-media__figure {
+        margin-right: 1em;
+
+        /* Context Modifiers */
+        .o-media--inverse & {
+            margin-right: 0;
+            margin-left: 1em;
+        }
+    }
+
+    
+    /* [2], [4] */
+    .o-media__body {
+        flex: 1;
+        
+        /* Context Modifiers */
+        .o-media--center & {
+            flex: 0 0 auto;
+        }
+
+        .o-media--inverse & {
+            display: flex;
+            justify-content: flex-end; //align items to right not text
+        }
+    }
diff --git a/objects/flex-layout-attribute/flex-layout-attribute.scss b/objects/flex-layout-attribute/flex-layout-attribute.scss
new file mode 100644
index 0000000..00d3263
--- /dev/null
+++ b/objects/flex-layout-attribute/flex-layout-attribute.scss
@@ -0,0 +1,16 @@
+/*
+    OBJECTS.FLA
+    ----
+    
+    Repo: https://github.com/StefanKovac/flex-layout-attribute
+    Docs: http://progressivered.com/fla/?d=0&v=1&h=1&s=0&i=000&a=000
+==================================================== */
+
+@import 'flex-layout-attribute/_vars';
+@import 'flex-layout-attribute/_reset';
+@import 'flex-layout-attribute/_layout';
+@import 'flex-layout-attribute/_self';
+
+/* Optional additional features — (un)comment to include/exclude */
+@import 'flex-layout-attribute/_layout-responsive';
+@import 'flex-layout-attribute/_self-responsive';
diff --git a/objects/flex-layout-attribute/flex-layout-attribute/_layout-responsive.scss b/objects/flex-layout-attribute/flex-layout-attribute/_layout-responsive.scss
new file mode 100644
index 0000000..b6fd4c8
--- /dev/null
+++ b/objects/flex-layout-attribute/flex-layout-attribute/_layout-responsive.scss
@@ -0,0 +1,50 @@
+// Adjust media-queries to match your needs
+
+@include mappy-bp(max lg){
+    [#{$LAYOUT}*="lg-row"] {
+        flex-direction: row;
+    }
+
+    [#{$LAYOUT}*="lg-column"] {
+        flex-direction: column;
+    }
+
+    [#{$LAYOUT}*="lg-rows"],
+    [#{$LAYOUT}*="lg-columns"] {
+        flex-wrap: wrap;
+    }
+}
+
+
+
+@include mappy-bp(max md){
+    [#{$LAYOUT}*="md-row"] {
+        flex-direction: row;
+    }
+
+    [#{$LAYOUT}*="md-column"] {
+        flex-direction: column;
+    }
+
+    [#{$LAYOUT}*="md-rows"],
+    [#{$LAYOUT}*="md-columns"] {
+        flex-wrap: wrap;
+    }
+}
+
+
+
+@include mappy-bp(max sm){
+    [#{$LAYOUT}*="sm-row"] {
+        flex-direction: row;
+    }
+
+    [#{$LAYOUT}*="sm-column"] {
+        flex-direction: column;
+    }
+
+    [#{$LAYOUT}*="sm-rows"],
+    [#{$LAYOUT}*="sm-columns"] {
+        flex-wrap: wrap;
+    }
+}
\ No newline at end of file
diff --git a/objects/flex-layout-attribute/flex-layout-attribute/_layout.scss b/objects/flex-layout-attribute/flex-layout-attribute/_layout.scss
new file mode 100644
index 0000000..5afc96f
--- /dev/null
+++ b/objects/flex-layout-attribute/flex-layout-attribute/_layout.scss
@@ -0,0 +1,170 @@
+
+/*
+==========================================================
+                  GENERAL DEFINITIONS
+==========================================================
+*/
+
+[#{$LAYOUT}] {
+    display: flex;
+}
+
+[#{$LAYOUT}*="row"],
+[#{$LAYOUT}*="column"] {
+    width: 100%;
+    max-width: 100%;
+}
+
+[#{$LAYOUT}^="row"] {
+    flex-direction: row;
+}
+
+[#{$LAYOUT}^="column"] {
+    flex-direction: column;
+}
+
+[#{$LAYOUT}*="row"][#{$LAYOUT}*="reverse"] {
+    flex-direction: row-reverse;
+}
+
+[#{$LAYOUT}*="column"][#{$LAYOUT}*="reverse"] {
+    flex-direction: column-reverse;
+}
+
+[#{$LAYOUT}*="rows"],
+[#{$LAYOUT}*="columns"] {
+    flex-wrap: wrap;
+}
+
+[#{$LAYOUT}="none"] {
+    flex: none;
+}
+
+
+
+
+
+/*
+==========================================================
+                  MAIN AXIS ALIGNMENT
+==========================================================
+*/
+
+[#{$LAYOUT}*="column"][#{$LAYOUT}*="top-"],
+[#{$LAYOUT}*="row"][#{$LAYOUT}*="-left"] {
+    justify-content: flex-start;
+}
+
+//[#{$LAYOUT}=""],
+[#{$LAYOUT}~="centered"],
+[#{$LAYOUT}*="column"][#{$LAYOUT}*="center-"],
+[#{$LAYOUT}*="row"][#{$LAYOUT}*="-center"]{
+    justify-content: center;
+}
+
+[#{$LAYOUT}*="column"][#{$LAYOUT}*="bottom-"],
+[#{$LAYOUT}*="row"][#{$LAYOUT}*="-right"] {
+    justify-content: flex-end;
+}
+
+[#{$LAYOUT}*="column"][#{$LAYOUT}*="spread-"],
+[#{$LAYOUT}*="row"][#{$LAYOUT}*="-spread"]{
+    justify-content: space-around;
+}
+
+[#{$LAYOUT}*="column"][#{$LAYOUT}*="justify-"],
+[#{$LAYOUT}*="row"][#{$LAYOUT}*="-justify"]{
+    justify-content: space-between;
+}
+
+
+
+/*
+==========================================================
+                CROSS AXIS ALIGNMENT
+==========================================================
+*/
+
+[#{$LAYOUT}*="column"][#{$LAYOUT}*="-left"],
+[#{$LAYOUT}*="row"][#{$LAYOUT}*="top-"] {
+    align-items: flex-start;
+}
+
+[#{$LAYOUT}~="centered"],
+[#{$LAYOUT}*="column"][#{$LAYOUT}*="-center"],
+[#{$LAYOUT}*="row"][#{$LAYOUT}*="center-"] {
+    align-items: center;
+}
+
+[#{$LAYOUT}*="column"][#{$LAYOUT}*="-right"],
+[#{$LAYOUT}*="row"][#{$LAYOUT}*="bottom-"] {
+    align-items: flex-end;
+}
+
+[#{$LAYOUT}*="column"][#{$LAYOUT}*="-stretch"],
+[#{$LAYOUT}*="row"][#{$LAYOUT}*="stretch-"]{
+    align-items: stretch;
+}
+
+
+
+
+/*
+==========================================================
+               MULTI-LINE ALIGNMENT
+==========================================================
+*/
+
+[#{$LAYOUT}*="rows"][#{$LAYOUT}*="top-"],
+[#{$LAYOUT}*="columns"][#{$LAYOUT}*="-left"] { align-content: flex-start }
+
+
+[#{$LAYOUT}*="rows"][#{$LAYOUT}*="bottom-"],
+[#{$LAYOUT}*="columns"][#{$LAYOUT}*="-right"]{ align-content: flex-end }
+
+
+[#{$LAYOUT}*="rows"][#{$LAYOUT}*="center-"],
+[#{$LAYOUT}*="columns"][#{$LAYOUT}*="-center"] { align-content: center}
+
+
+[#{$LAYOUT}*="rows"][#{$LAYOUT}*="justify-"],
+[#{$LAYOUT}*="columns"][#{$LAYOUT}*="-justify"] { align-content: space-between}
+
+
+[#{$LAYOUT}*="rows"][#{$LAYOUT}*="spread-"],
+[#{$LAYOUT}*="columns"][#{$LAYOUT}*="-spread"] { align-content: space-around }
+
+
+[#{$LAYOUT}*="rows"][#{$LAYOUT}*="stretch-"],
+[#{$LAYOUT}*="columns"][#{$LAYOUT}*="-stretch"]{ align-content: stretch }
+
+
+
+/*
+==========================================================
+                       IE10+ HACKS
+==========================================================
+*/
+
+@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
+
+    // Prevents horizontal overflow of content
+    [#{$LAYOUT}*="column"]:not([#{$LAYOUT}*="row"]) > * {
+        max-width: auto;
+    }
+
+    // hack to prevent text overflow on long text articles in IE
+    [#{$LAYOUT}*="column"][#{$SELF}*="top"] {
+        height: auto !important;
+    }
+
+    // for justified or spaced column items to prevent vertical overflow
+    [#{$SELF}~="size-"] > * {
+        height: auto;
+    }
+
+
+}
+
+
+
diff --git a/objects/flex-layout-attribute/flex-layout-attribute/_reset.scss b/objects/flex-layout-attribute/flex-layout-attribute/_reset.scss
new file mode 100644
index 0000000..19e5af6
--- /dev/null
+++ b/objects/flex-layout-attribute/flex-layout-attribute/_reset.scss
@@ -0,0 +1,6 @@
+html {
+    box-sizing: border-box;
+}
+*, *:before, *:after {
+    box-sizing: inherit;
+}
\ No newline at end of file
diff --git a/objects/flex-layout-attribute/flex-layout-attribute/_self-responsive.scss b/objects/flex-layout-attribute/flex-layout-attribute/_self-responsive.scss
new file mode 100644
index 0000000..d68fe6b
--- /dev/null
+++ b/objects/flex-layout-attribute/flex-layout-attribute/_self-responsive.scss
@@ -0,0 +1,68 @@
+// Adjust media-queries to match your needs and/or add more rules
+
+@include mappy-bp(max lg){
+    [#{$SELF}*="lg-full"] {
+        flex: 1 1 100% !important;
+        width: 100%;
+        max-width: 100%;
+    }
+
+    [#{$SELF}*="lg-half"] {
+        flex: 1 1 50% !important;
+        width: 50%;
+        max-width: 50%;
+    }
+
+    [#{$SELF}~="lg-first"] { order: -1;}
+    [#{$SELF}~="lg-last"]  { order: 999;}
+
+    [#{$SELF}~="lg-hide"] { display: none;}
+    [#{$SELF}~="lg-show"] { display: inherit;}
+}
+
+
+
+
+@include mappy-bp(max md){
+    [#{$SELF}*="md-full"] {
+        flex: 1 1 100% !important;
+        width: 100%;
+        max-width: 100%;
+    }
+
+    [#{$SELF}*="md-half"] {
+        flex: 1 1 50% !important;
+        width: 50%;
+        max-width: 50%;
+    }
+
+    [#{$SELF}~="md-first"] { order: -1;}
+    [#{$SELF}~="md-last"]  { order: 999;}
+
+    [#{$SELF}~="md-hide"] { display: none;}
+    [#{$SELF}~="md-show"] { display: inherit;}
+}
+
+
+
+@include mappy-bp(max sm)
+    [#{$SELF}*="sm-full"] {
+        flex: 1 1 100% !important;
+        width: 100%;
+        max-width: 100%;
+    }
+
+    [#{$SELF}*="sm-half"] {
+        flex: 1 1 50% !important;
+        width: 50%;
+        max-width: 50%;
+    }
+
+    [#{$SELF}~="sm-first"] { order: -1;}
+    [#{$SELF}~="sm-last"]  { order: 999;}
+
+    [#{$SELF}~="sm-hide"] { display: none;}
+    [#{$SELF}~="sm-show"] { display: inherit;}
+}
+
+
diff --git a/objects/flex-layout-attribute/flex-layout-attribute/_self.scss b/objects/flex-layout-attribute/flex-layout-attribute/_self.scss
new file mode 100644
index 0000000..1462afc
--- /dev/null
+++ b/objects/flex-layout-attribute/flex-layout-attribute/_self.scss
@@ -0,0 +1,127 @@
+/*
+==========================================================
+                    SELF ALIGNMENT
+==========================================================
+*/
+
+//[#{$SELF}*="left"],
+[#{$LAYOUT}*="column"]:not([#{$LAYOUT}*="row"]) [#{$SELF}*="left"],
+[#{$LAYOUT}*="row"]:not([#{$LAYOUT}*="column"]) [#{$SELF}*="top"] {
+//[#{$LAYOUT}*="row"] [#{$SELF}*="top"] {
+    align-self: flex-start;
+}
+
+[#{$SELF}~="center"]{
+    align-self: center;
+}
+
+//[#{$SELF}*="right"],
+//[#{$LAYOUT}=""] [#{$SELF}*="right"],
+[#{$LAYOUT}*="column"]:not([#{$LAYOUT}*="row"]) [#{$SELF}*="right"],
+[#{$LAYOUT}*="row"]:not([#{$LAYOUT}*="column"]) [#{$SELF}*="bottom"] {
+    align-self: flex-end;
+}
+
+[#{$SELF}*="stretch"] {
+    align-self: stretch;
+}
+
+
+
+/* ALIGN VIA MARGINS
+========================================================== */
+
+/* Container: */
+[#{$LAYOUT}][#{$SELF}*="center"] {
+    margin-left:  auto;
+    margin-right: auto;
+}
+
+[#{$LAYOUT}][#{$SELF}*="right"]{
+    margin-right: 0;
+}
+
+[#{$LAYOUT}][#{$SELF}*="left"]{
+    margin-left: 0;
+}
+
+
+/* Items: */
+[#{$LAYOUT}*="column"] [#{$SELF}*="bottom"] { margin-top: auto; }
+[#{$LAYOUT}*="column"] [#{$SELF}*="top"]    { margin-bottom: auto; }
+
+[#{$LAYOUT}*="row"] [#{$SELF}*="left"]      { margin-right: auto; }
+[#{$LAYOUT}*="row"] [#{$SELF}*="right"]     { margin-left: auto; }
+
+
+
+
+
+
+/*
+==========================================================
+                      SELF SIZE
+==========================================================
+*/
+
+/* Relative size */
+[#{$SELF}~="size-1of5"] { width: 20%;  }
+[#{$SELF}~="size-1of4"] { width: 25%;  }
+[#{$SELF}~="size-1of3"] { width: 33.33333%;  }
+[#{$SELF}~="size-2of5"] { width: 40% ; }
+[#{$SELF}~="size-1of2"] { width: 50%; }
+[#{$SELF}~="size-3of5"] { width: 60%; }
+[#{$SELF}~="size-2of3"] { width: 66.6666%; }
+[#{$SELF}~="size-3of4"] { width: 75%; }
+[#{$SELF}~="size-4of5"] { width: 80%; }
+[#{$SELF}~="size-1of1"] { width: 100% ; }
+
+
+
+/* Proportional size*/
+[#{$LAYOUT}*="row"][#{$LAYOUT}*="-stretch"] > *:not([#{$SELF}*="size-"]),    // <-- hack!! making children equal width in rows
+[#{$LAYOUT}*="column"][#{$LAYOUT}*="stretch-"] > *:not([#{$SELF}*="size-"]), // <-- hack!! making children equal height in rows
+[#{$SELF}~="size-x1"] { flex : 1 0 0% !important; }
+[#{$SELF}~="size-x2"] { flex : 2 0 0% !important; }
+[#{$SELF}~="size-x3"] { flex : 3 0 0% !important; }
+[#{$SELF}~="size-x4"] { flex : 4 0 0% !important; }
+[#{$SELF}~="size-x5"] { flex : 5 0 0% !important; }
+[#{$SELF}~="size-x6"] { flex : 6 0 0% !important; }
+[#{$SELF}~="size-x7"] { flex : 7 0 0% !important; }
+[#{$SELF}~="size-x8"] { flex : 8 0 0% !important; }
+[#{$SELF}~="size-x9"] { flex : 9 0 0% !important; }
+
+[#{$SELF}*="size-auto"] { flex: 1 1 auto; }
+[#{$SELF}*="size-x0"]   { flex: 0 0 auto; }
+
+
+/* Fixed max-width size */
+[#{$SELF}~="size-xxlarge"] { max-width: 1440px ; width:100% }
+[#{$SELF}~="size-xlarge"]  { max-width: 1200px ; width:100% }
+[#{$SELF}~="size-large"]   { max-width: 960px ;  width:100%  }
+[#{$SELF}~="size-larger"]  { max-width: 840px ;  width:100% }
+[#{$SELF}~="size-medium"]  { max-width: 720px ;  width:100% }
+[#{$SELF}~="size-smaller"] { max-width: 600px ;  width:100% }
+[#{$SELF}~="size-small"]   { max-width: 480px ;  width:100% }
+[#{$SELF}~="size-xsmall"]  { max-width: 360px ;  width:100% }
+[#{$SELF}~="size-xxsmall"] { max-width: 240px ;  width:100% }
+
+
+// BUG FIX: https://github.com/philipwalton/flexbugs#1-minimum-content-sizing-of-flex-items-not-honored
+[#{$SELF}*="size-x"]:not([#{$SELF}*="small"]):not([#{$SELF}*="large"]) {
+    flex-shrink: 1;
+}
+
+
+// ITEMS ORDER
+[#{$SELF}~="first"]     { order: -1;}
+[#{$SELF}~="order-1"]   { order: 1;}
+[#{$SELF}~="order-2"]   { order: 2;}
+[#{$SELF}~="order-3"]   { order: 3;}
+[#{$SELF}~="last"]      { order: 999;}
+
+
+[#{$LAYOUT}*="column"]:not([#{$LAYOUT}*="row"]) > * {
+    flex-shrink: 0;
+    flex-basis: auto; // <-- Force elements natural height
+}
diff --git a/objects/flex-layout-attribute/flex-layout-attribute/_vars.scss b/objects/flex-layout-attribute/flex-layout-attribute/_vars.scss
new file mode 100644
index 0000000..5b7bf56
--- /dev/null
+++ b/objects/flex-layout-attribute/flex-layout-attribute/_vars.scss
@@ -0,0 +1,3 @@
+// FLA attribute names
+$LAYOUT : "data-layout";
+$SELF   : "data-self";
\ No newline at end of file
diff --git a/settings/_s.app-colors.scss b/settings/_s.app-colors.scss
new file mode 100644
index 0000000..b388344
--- /dev/null
+++ b/settings/_s.app-colors.scss
@@ -0,0 +1,29 @@
+/*
+    SETTINGS.COLORS
+    ----
+    
+    App wide colors united on sexy sass map
+    Use getAppColor() function to extract color and
+    tints and shades
+
+    Notes: you can put single variables here if
+    doesn't fit the getAppColor() pattern
+==================================================== */
+
+
+$app-color-maps: (
+    brand: (
+        light: #333,
+        base: #222,
+        dark: #111,
+    ),
+    primary:(
+    	base: green;
+    )
+    secondary: (
+    	base: red;
+    ),
+    text: (
+		base: #434343,
+    )
+);
diff --git a/settings/_s.globals.scss b/settings/_s.globals.scss
new file mode 100644
index 0000000..8620d2d
--- /dev/null
+++ b/settings/_s.globals.scss
@@ -0,0 +1,15 @@
+/*
+    SETTINGS.GLOBALS
+    ----
+
+    App-wide variables
+==================================================== */
+
+
+@import "s.mappy-breakpoints"; // mappy breakpoints
+@import "s.app-colors"; // app colors
+@import "s.transitions"; // cool bezier transitions
+
+
+$base-font-size: 16px;
+$base-line-height: 1.5;
\ No newline at end of file
diff --git a/settings/_s.mappy-breakpoints.scss b/settings/_s.mappy-breakpoints.scss
new file mode 100644
index 0000000..8f8847b
--- /dev/null
+++ b/settings/_s.mappy-breakpoints.scss
@@ -0,0 +1,22 @@
+/*
+    SETTTING.MAPPY-BREAKPOINTS
+    ----
+    
+    Using mappy breakpoints Awesome mixin
+    https://github.com/zellwk/mappy-breakpoints
+
+    How to use: Checkout the readme.
+    Don't worry, it will convert values to ems
+==================================================== */
+
+$breakpoints: (
+    'xxs':  480px,
+    'xs':   640px,
+    'sm':   768px,
+    'md':   992px,
+    'mdl':  1024px,
+    'lg':   1200px,
+    'xl':   1440px,
+    'xxl':  1650px,
+    'hd':   1920px
+);
\ No newline at end of file
diff --git a/settings/_s.social-media-colors.scss b/settings/_s.social-media-colors.scss
new file mode 100644
index 0000000..1ca6812
--- /dev/null
+++ b/settings/_s.social-media-colors.scss
@@ -0,0 +1,33 @@
+/*
+    SETTINGS.SOCIAL-MEDIA-COLORS.SCSS
+    ----
+    
+
+
+==================================================== */
+
+
+$social-media-color-maps: (
+	bandcamp: #4e9bac,
+	delicious: #248cff,
+	facebook: (
+		base: #3b5998,
+		secondary: #3b5998
+	),
+	ficly: #b51c2c,
+	flickr: #0063db,
+	github: #4183c4,
+	googleplus: #dd4b39,
+	instagram: #517fa4,
+	kickstarter: #76cc1e,
+	lanyrd: #152e51,
+	lastfm: #d51007,
+	linkedin: #007bb6,
+	photodrop: #cdb6e3,
+	pinterest: #cb2027,
+	rdio: #0088da,
+	soundcloud: #f60,
+	twitter: #00aced,
+	vimeo: #aad450,
+ 	youtube: #b00
+);
\ No newline at end of file
diff --git a/settings/_s.transitions.scss b/settings/_s.transitions.scss
new file mode 100644
index 0000000..d5e149d
--- /dev/null
+++ b/settings/_s.transitions.scss
@@ -0,0 +1,14 @@
+/*
+    SETTINGS.TRANSITIONS
+    ----
+    
+
+     Use getTransition(key) function to extract or
+     just use map-get($transitions-map, 'key');
+==================================================== */
+
+
+$transitions-map: (
+	smooth: "cubic-bezier(0.1, 0.82, 0.25, 1)",
+	bounce: "cubic-bezier(0.1, 0.82, 0.25, 1)"
+);
\ No newline at end of file
diff --git a/tools/_t.functions.scss b/tools/_t.functions.scss
new file mode 100644
index 0000000..e8f9cfc
--- /dev/null
+++ b/tools/_t.functions.scss
@@ -0,0 +1,82 @@
+/*
+    TOOLS.FUNCTIONS
+    ----
+
+    Global, app-wide helper functions
+    Some are just shortcuts to avoid verbosity
+    and remember map names.
+==================================================== */
+
+
+
+/*
+    getAppColor()
+    ----
+
+    retrives a color from the app-color-maps defined at _global.scss
+    tone defaults to base, i want another, pass as second argument.
+    Plicas are optional.
+
+    Depends on:
+    	sassy-maps
+        _s.colors.scss
+       
+
+    How to use:
+    getAppColor('primary') === getColor('primary', 'base')
+    getAppColor('primary', 'light') retrieves light variation
+*/
+
+@function getAppColor($color, $tone: "base") {
+    @if map-has-key($app-color-maps, $color) {
+        @return map-get-deep($app-color-maps, $color, $tone);
+    }
+
+    @if map-has-key($color, $tone){
+        //Is single value
+        @return map-get-deep($app-color-maps, $color, $tone);
+    } @else {
+        //Is single value
+        @return map-get($app-color-maps, $color);
+    }
+    //else
+    @error "`#{$color}` is not in $app-color-maps. Check _global.scss";
+    @return false;
+}
+
+
+@function getSocialMediaColor($name, $tone: "base"){
+    @if map-has-key($social-media-color-maps, $name) {
+
+        @if map-has-key($name, $tone){
+            @return map-get-deep($social-media-color-maps, $color, $tone);
+        } @else {
+            //Is single value
+            @return map-get($social-media-color-maps, $name);
+        }
+       
+    }
+    //else
+    @error "`#{$color}` is not in $app-color-maps. Check _global.scss";
+    @return false;
+}
+
+
+
+
+/*
+    getTransition()
+    ----
+	
+	just to avoid verbosity of map-get($transition-map-name);
+
+*/
+
+@function getTransition($map: $transitions-map, $transition: 'smooth') {
+    @if map-has-key($map, $transition) {
+        @return map-get($transitions-map, $transition);
+    }
+    //else
+    @error "`#{$transition}` is not in #{$map}. Check settings folder, maybe you mispelled a key";
+ }
+
diff --git a/tools/_t.mixins.scss b/tools/_t.mixins.scss
new file mode 100644
index 0000000..6122146
--- /dev/null
+++ b/tools/_t.mixins.scss
@@ -0,0 +1,237 @@
+/*
+    TOOLS.MIXINS
+    ----
+
+    Global, app-wide helper mixins
+
+    types, check near the name.
+    [1] direct mixin, @include mixinName(); prints code takes no arguments
+    [2] @content mixin, @include mixinName { property(ies): value(s)}
+    [3] argument mixin, @include mixinName(requiredArguments);
+
+==================================================== */
+
+/*
+    REM font-sizing, converts pixels to rems
+    From aleut.css
+    https://github.com/aleutcss/tools.mixins/blob/master/_tools.mixins.scss
+*/
+@mixin font-size($mixin-font-size, $mixin-line-height: auto) {
+    font-size: $mixin-font-size;
+    font-size: ($mixin-font-size / $base-font-size) * 1rem;
+
+    @if $mixin-line-height == auto {
+        line-height: ceil($mixin-font-size / $base-line-height) * ($base-line-height / $mixin-font-size);
+    }
+
+    @else {
+
+        @if (type-of($mixin-line-height) == number or $mixin-line-height == inherit or $mixin-line-height == normal) {
+            line-height: $mixin-line-height;
+        }
+
+        @elseif ($mixin-line-height != none and $mixin-line-height != false) {
+            @warn "D’oh! ‘#{$mixin-line-height}’ is not a valid value for `line-height`."
+        }
+
+    }
+
+}
+
+
+
+
+
+/* 
+    FONT-FACE
+
+    Steve Hickey
+    http://codepen.io/javasteve99/pen/hDxpn
+*/
+@mixin font-face($font-family, $file-path, $font-weight, $font-style, $RoR: false) {
+    
+    $url-prefix: 'url';
+    @if $RoR == true {
+        $url-prefix = 'font-url';
+    }
+
+
+      @font-face {
+        font-family: $font-family;
+          src: $url-prefix('#{$file-path}.eot');
+          src: $url-prefix('#{$file-path}.eot?#iefix') format('embedded-opentype'),
+               $url-prefix('#{$file-path}.woff') format('woff'),
+               $url-prefix('#{$file-path}.woff') format('woff2'),
+               $url-prefix('#{$file-path}.ttf') format('truetype'),
+               $url-prefix('#{$file-path}.svg##{$font-family}') format('svg');
+        font-weight: $font-weight;
+        font-style:  $font-style;
+      }
+
+  // Chrome for Windows rendering fix: http://www.adtrak.co.uk/blog/font-face-chrome-rendering/
+  // @media screen and (-webkit-min-device-pixel-ratio: 0) {
+  //   @font-face {
+  //     font-family: $font-family;
+  //       src: url('#{$file-path}.svg##{$font-family}') format('svg');
+  //   }
+  // }
+}
+
+
+
+
+
+/*
+    RESET APPEARANCE [1]
+    ----
+
+    reset browser defaults on interactive elements
+    links, buttons, inputs
+*/
+@mixin resetAppearance() {
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+    background: none;
+    outline: none;
+    box-shadow: none;
+    border: 0;
+    //user-select: none;
+    border-radius: 0;
+}
+
+
+
+
+
+/*
+    TRUNCATE [1]
+    ----
+    
+    Yup that's it.    
+*/
+@mixin truncate() {
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+
+
+
+
+/*
+    INPUT PLACEHOLDER MIXIN [2]
+    ----
+
+    styles for inputs placeholders, cross-browser way
+*/
+@mixin inputPlaceholder {
+    &::-webkit-input-placeholder {
+        @content;
+    }
+
+    &:-moz-placeholder { /* Firefox 18- */
+        @content;
+    }
+
+    &::-moz-placeholder {  /* Firefox 19+ */
+        @content;
+    }
+
+    &:-ms-input-placeholder {
+        @content;
+    }
+}
+
+
+
+
+
+
+/*
+    CLEARFIX
+    ----
+
+    Mixin to drop micro clearfix into a selector. Further reading:
+    http://www.cssmojo.com/the-very-latest-clearfix-reloaded/
+*/
+@mixin clearfix() {
+
+    &:after {
+        content: " " !important;
+        display: block !important;
+        clear: both !important;
+    }
+
+}
+
+
+
+
+
+/*
+    HOCUS
+    ----
+
+    Generate `:hover` and `:focus` styles in one go.
+    https://github.com/inuitcss/inuitcss/
+*/
+@mixin hocus() {
+    &:hover,
+    &:focus {
+        @content;
+    }
+}
+
+
+
+/*
+    HOCUS
+    ----
+
+    Mixin to quickly apply accessible hiding to elements.
+    https://github.com/inuitcss/inuitcss/
+*/
+@mixin hidden-visually() {
+    border: 0 !important;
+    clip: rect(0 0 0 0) !important;
+    height: 1px !important;
+    margin: -1px !important;
+    overflow: hidden !important;
+    padding: 0 !important;
+    position: absolute !important;
+    width: 1px !important;
+}
+
+
+
+
+
+/*
+    CUSTOM SCROLLBAR STYLES [3] (Work in Progress)
+
+    -webkit only
+
+    https://css-tricks.com/wp-content/uploads/2011/05/scrollbarparts.png
+*/
+@mixin customScrollBarStyle($size: 6px, $thumbColor: #002339, $trackBgColor: rgba(255,255,255,.1)){
+
+
+    /* 1 */
+    &::-webkit-scrollbar              { width: $size !important;  }
+    &::-webkit-scrollbar:horizontal   { height: $size !important; }
+    /* 2 */
+    &::-webkit-scrollbar-button       {  }
+    /* 3 */
+    &::-webkit-scrollbar-track        { background: $trackBgColor; }
+    /* 4 */
+    &::-webkit-scrollbar-track-piece  {  }
+    /* 5 */
+    &::-webkit-scrollbar-thumb        { background-color: $thumbColor; }
+    /* 6 */
+    &::-webkit-scrollbar-corner       {  }
+    /* 7 */
+    &::-webkit-resizer                {  }
+}
+
diff --git a/utilities/_u.coloring.scss b/utilities/_u.coloring.scss
new file mode 100644
index 0000000..d79c15b
--- /dev/null
+++ b/utilities/_u.coloring.scss
@@ -0,0 +1,33 @@
+/*
+    UTILITIE.COLORING
+    ----
+    
+
+    classes for quickly add that social color 
+    to links text or backgrounds
+	Use this only for static elements,
+	ie not interactive ones.
+
+
+	https://www.viget.com/articles/sass-maps-are-awesome
+==================================================== */
+
+
+
+/*
+	APP COLOR UTILITY CLASSES
+
+	depends on getAppColor() function
+*/
+	@each $color-map, $tone in $app-color-maps {
+		.u-color--#{$color-map}-#{$tone}   { color:            getAppColor($color-map, $tone) }
+		.u-bgcolor--#{$color-map}-#{$tone} { background-color: getAppColor($color-map, $tone) }
+	}
+
+/* 
+	SOCIAL NETWORKS COLORING CLASSES
+*/
+@each $network, $color in $social-media-color-maps {
+	.u-color--#{$profile}   { color:            $color; }
+	.u-bgcolor--#{$profile} { background-color: $color; }
+}
\ No newline at end of file
diff --git a/utilities/_u.helpers.scss b/utilities/_u.helpers.scss
new file mode 100644
index 0000000..9123368
--- /dev/null
+++ b/utilities/_u.helpers.scss
@@ -0,0 +1,21 @@
+/*
+    UTILITIES.HELPERS
+    ----
+    
+==================================================== */
+
+/* FLOAT CLEARANCE*/
+.u-cf {
+	@include clearfix();
+}
+
+
+/* 
+	SCREEN READERS ONLY
+
+	visually hide text but kepp it accessible to screen readers 
+*/
+
+.u-sr-only {
+	@include hidden-visually();
+}
\ No newline at end of file