From 4533f8ee0417f81b296bcd9b9fd13be2c5e5c0c4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Renato=20de=20Le=C3=A3o?= <renatodeleao@gmail.com>
Date: Thu, 6 Oct 2016 05:01:42 +0100
Subject: [PATCH] Tha real SASSQIT

- Included all necessary tools and function
- boilerplates for settings files
- included resets and base files
- included global objects => those who appear on every site
- included sample components => because why not
- included sample helpers
---
 app/stylesheets/application.scss              |  45 ++--
 app/stylesheets/base/_b.fonts.scss            |  13 -
 app/stylesheets/base/_b.typography.scss       |  20 ++
 app/stylesheets/components/_c.bar.scss        |  81 ------
 app/stylesheets/components/_c.button.scss     |  57 +++--
 app/stylesheets/components/_c.drawer.scss     |   1 +
 app/stylesheets/objects/_o.bar.scss           |  89 +++++++
 app/stylesheets/objects/_o.container.scss     |   2 +-
 app/stylesheets/objects/_o.grid.scss          | 228 +++++++++++++++++
 app/stylesheets/objects/_o.list.scss          |  59 ++++-
 app/stylesheets/objects/_o.main.scss          |  13 +-
 app/stylesheets/settings/_s.app-colors.scss   |  44 +++-
 app/stylesheets/settings/_s.globals.scss      |  17 +-
 .../settings/_s.mappy-breakpoints.scss        |   8 +-
 .../settings/_s.social-media-colors.scss      |  33 ---
 app/stylesheets/settings/_s.transitions.scss  |   6 +-
 app/stylesheets/settings/_s.typescale.scss    |  19 ++
 app/stylesheets/tools/_t.functions.scss       |  66 +++--
 app/stylesheets/tools/_t.mixins.scss          | 231 +++++++++---------
 app/stylesheets/utilities/_u.coloring.scss    |  54 ++--
 app/stylesheets/utilities/_u.helpers.scss     |  24 +-
 app/views/layouts/default.html                |   3 +-
 app/views/pages/index.html                    |  16 +-
 app/views/partials/application/_header.html   |   2 +-
 24 files changed, 750 insertions(+), 381 deletions(-)
 delete mode 100644 app/stylesheets/base/_b.fonts.scss
 create mode 100644 app/stylesheets/base/_b.typography.scss
 delete mode 100644 app/stylesheets/components/_c.bar.scss
 create mode 100644 app/stylesheets/objects/_o.bar.scss
 create mode 100644 app/stylesheets/objects/_o.grid.scss
 delete mode 100644 app/stylesheets/settings/_s.social-media-colors.scss
 create mode 100644 app/stylesheets/settings/_s.typescale.scss

diff --git a/app/stylesheets/application.scss b/app/stylesheets/application.scss
index c0eb4e3..9772ba8 100644
--- a/app/stylesheets/application.scss
+++ b/app/stylesheets/application.scss
@@ -25,26 +25,41 @@
     5. OBJECTS
     6. COMPONENTS
     7. UTILITIES
+*/
 
+//VENDOR
+@import "node_modules/normalize.css/normalize";
 
-    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
+//SETTINGS
+@import "settings/s.mappy-breakpoints";
+@import "settings/s.globals";
+@import "settings/s.app-colors";
+@import "settings/s.transitions";
+@import "settings/s.typescale";
 
-    Requires:
+// Functions & Mixins
+@import "node_modules/mappy-breakpoints/mappy-breakpoints";
+@import "tools/t.functions";
+@import "tools/t.mixins";
 
-    //*="require lib path without quotes"
-	*= normalize-css/normalize
-	*= flexboxgrid/dist/flexboxgrid
-*/
 
+//BASE
+@import "base/b.reset";
+@import "base/b.box-sizing";
+@import "base/b.page";
+@import "base/b.html-elements";
+
+
+//OBJECTS
+@import "objects/o.main";
+@import "objects/o.container";
+@import "objects/o.grid";
 @import "objects/o.media";
 
-body{
-    background: red;
 
-    h1{
-        color: white;
-    }
-}
\ No newline at end of file
+//COMPONENTS
+@import "components/c.button";
+
+//UTILITIES
+@import "utilities/u.coloring";
+@import "utilities/u.helpers";
diff --git a/app/stylesheets/base/_b.fonts.scss b/app/stylesheets/base/_b.fonts.scss
deleted file mode 100644
index 1611e48..0000000
--- a/app/stylesheets/base/_b.fonts.scss
+++ /dev/null
@@ -1,13 +0,0 @@
-/*
-    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/app/stylesheets/base/_b.typography.scss b/app/stylesheets/base/_b.typography.scss
new file mode 100644
index 0000000..d74eac3
--- /dev/null
+++ b/app/stylesheets/base/_b.typography.scss
@@ -0,0 +1,20 @@
+/*
+    BASE.FONTS
+    ----
+    
+* ==================================================== */
+
+/* Use mixin to include desired font, one mixin per weight/style pair */
+//@include font-face($font-family: 'FontNAME', $file-path: 'fontPath', $font-weight: '500', $font-style: 'normal', $RoR: false);
+
+html{
+	font-size: $s-base-font-size;
+}
+
+body{
+	font: normal 1rem/1.5 "Helvetica Neue", -apple-system, BlinkMacSystemFont,"Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell,"Open Sans", sans-serif;
+	letter-spacing: -0.01px;
+	font-weight: 500;
+	color: getAppColor('grayscale', 'base');
+	background: white;
+}
\ No newline at end of file
diff --git a/app/stylesheets/components/_c.bar.scss b/app/stylesheets/components/_c.bar.scss
deleted file mode 100644
index 11693c3..0000000
--- a/app/stylesheets/components/_c.bar.scss
+++ /dev/null
@@ -1,81 +0,0 @@
-/*
-    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/app/stylesheets/components/_c.button.scss b/app/stylesheets/components/_c.button.scss
index 396ba85..1c6c006 100644
--- a/app/stylesheets/components/_c.button.scss
+++ b/app/stylesheets/components/_c.button.scss
@@ -5,6 +5,7 @@
 ==================================================== */
 
 /* Buttons config */
+$button-base-size: 40px;
 $button-color-maps: (
     primary:(
         bgColor: (
@@ -44,31 +45,51 @@ $button-color-maps: (
 
 
 
-/* 
-	BUTTON.BASE
+/*
+    BUTTON.BASE
 */
-.c-button {
+
+@mixin buttonBase{
     @include resetAppearance(); //reset default browser btn appearance
 
     position: relative;
     display: inline-block;
-    padding: 0;
-
+    vertical-align: middle;
     color: inherit;
-	
+    text-align: center;
+    white-space: nowrap;
+
+    transition: background 0.15s, color 0.15s, border 0.15s;
+    will-change: background, color, border;
+}
+
+@mixin buttonSkeleton{
+    border-radius: $button-radius;
+    padding: 0 1rem;
+    height: $button-base-size;
+    font-weight: 700;
+    @include font-size(14px, $button-base-size);
+}
+
+.c-button{
+    @include buttonBase;
 }
 
+    .c-button__icon,
+    .c-button__text{
+        vertical-align: middle;
+    }
+
+    .c-button__text:first-child{
+        margin-right: 0.5rem;
+    }
+
+    .c-button__text:last-child{
+        margin-left: 0.5rem;
+    }
 
-	.c-button__icon,
-	.c-button__text{
-		vertical-align: middle;
-	}
+    .c-button__icon{
+        margin-top: -1px;
+        // transition: fill 0.15s, color 0.15s;
+    }
 
-	
-	.c-button__text{
-		margin-left: 0.5rem;
-	}
-	
-	.c-button__icon{
-		margin-top: -1px;
-	}
diff --git a/app/stylesheets/components/_c.drawer.scss b/app/stylesheets/components/_c.drawer.scss
index c6c75dd..cc61ed9 100644
--- a/app/stylesheets/components/_c.drawer.scss
+++ b/app/stylesheets/components/_c.drawer.scss
@@ -4,6 +4,7 @@
     
 ==================================================== */
 
+//key names must match s.mappy-breakpoints keys
 $drawer-size-map:(
 	base: 304px,
 	sm: 320px,
diff --git a/app/stylesheets/objects/_o.bar.scss b/app/stylesheets/objects/_o.bar.scss
new file mode 100644
index 0000000..83ac83f
--- /dev/null
+++ b/app/stylesheets/objects/_o.bar.scss
@@ -0,0 +1,89 @@
+/*
+    OBJECTS.BAR
+    ----
+    
+    Horizonal bars, usefull for headers, footers,
+    headers in windows, overlay bars in cards you
+    name it.
+* ==================================================== */
+
+$bar-height-maps:(
+	primary: (
+		base: 56px,
+		md: 70px
+	),
+	secondary:(
+		base: 48px,
+		md: 56px
+	)
+);
+
+.o-bar{
+	position: relative;
+	display: flex;
+	width: 100%;
+
+	&--primary{
+		height: map-deep-get($bar-height-maps, primary, base);
+
+		@include mappy-bp(md){
+			height: map-deep-get($bar-height-maps, primary, md);
+		}
+	}
+
+	&--secondary{
+		height: map-deep-get($bar-height-maps, secondary, base);
+
+		@include mappy-bp(md){
+			height: map-deep-get($bar-height-maps, secondary, md);
+		}
+	}
+}
+
+	/* inner bits */
+	.o-bar__block{
+		display: flex;
+    	align-items: center;
+    	padding: 0 8px;
+		
+		&:only-child,
+    	.o-bar--collapse & {
+    		padding: 0;
+    	}
+		
+
+		.o-bar--collapse\@md &{
+			&:first-child{
+    			@include mappy-bp(md){
+    				padding-left:0;
+	    		}
+	    	}
+
+	    	&:last-child{
+	    		@include mappy-bp(md){
+	    			padding-right:0;
+	    		}
+	    	}
+		}
+   
+
+    	&--shy-right{ margin-left: auto; }
+    	&--shy-left{ margin-right: auto; }
+	}
+
+
+	.o-bar__title{
+		position: relative;
+		@include font-size(16px, 1);
+		
+
+		@include mappy-bp(sm){
+			@include font-size(18px, 1);
+		}
+		
+		.o-bar__block:first-child & {
+			margin-left: 16px;
+		}
+
+	}
+		
\ No newline at end of file
diff --git a/app/stylesheets/objects/_o.container.scss b/app/stylesheets/objects/_o.container.scss
index 69b469e..509de31 100644
--- a/app/stylesheets/objects/_o.container.scss
+++ b/app/stylesheets/objects/_o.container.scss
@@ -17,6 +17,7 @@ $container-sizes:(
 .o-container{
 	display: block;
 	width: 100%;
+	margin: 0 auto;
 
 	@each $breakpoint, $size in $container-sizes{
 		@include mappy-bp($breakpoint){
@@ -25,7 +26,6 @@ $container-sizes:(
 	}
 
 
-
 	&--flex{
 		display: flex;
 	}
diff --git a/app/stylesheets/objects/_o.grid.scss b/app/stylesheets/objects/_o.grid.scss
new file mode 100644
index 0000000..2fbf631
--- /dev/null
+++ b/app/stylesheets/objects/_o.grid.scss
@@ -0,0 +1,228 @@
+/*
+    OBJECTS.GRID
+    ----
+
+
+    an float free, inline-block grid,
+    with an optional flexbox flavour.
+
+    usage:
+
+    <div class="o-grid">
+		<div class="o-grid__row">
+			<div class="o-grid__item o-grid__iteridm--@xs10-@sm6-@md4-@lg5"></div>
+		</div>
+	</div>rid
+
+	requires:
+		border-box box-sizing or it will horizonal
+		overflow;
+
+* ==================================================== */
+
+$grid-columns: 12;
+$grid-gutter: 30px;
+
+.o-grid,
+.o-grid__row,
+.o-grid__item{
+	box-sizing: border-box;
+}
+
+.o-grid{
+	position: relative;
+	width: 100%;
+	display: block;
+
+	&--fluid{
+		position: relative;
+		padding: 0 $grid-gutter / 2;
+	}
+
+	&--no-rows,
+	&--collapse{
+		padding: 0;
+	}
+	
+	//no rows = single, contained = inside container wrapper div
+	&--single-contained{
+		font-size: 0px; //remove inline block whitespace
+		width: auto;
+		margin:{
+			left: -($grid-gutter/2);
+			right: -($grid-gutter/2);
+		};
+	}
+}
+
+
+	/*
+		GRID ROWS
+	*/
+	.o-grid__row {
+		position: relative;
+		display: block;
+		margin:{
+			left: -($grid-gutter/2);
+			right: -($grid-gutter/2);
+		};
+
+		.o-grid--collapse & {
+			margin:{
+				left: 0;
+				right: 0;
+			};
+		}
+
+		.o-grid:not(.o-grid--flex) & {
+			font-size: 0px; //remove inline block whitespace
+		}
+
+		.o-grid--flex & {
+			display: flex;
+			flex: 0 1 auto;
+			flex-direction: row;
+			flex-wrap: wrap;
+
+			&[data-layout*="reverse"]{
+				flex-direction: row-reverse
+			}
+		}
+
+		&[data-layout]{
+			width: auto;
+		}
+	}
+
+	ul.o-grid__row{
+		margin-top: 0px;
+		margin-bottom: 0px;
+		list-style: none;
+		padding:0;
+	}
+
+
+
+	/*
+		GRID ITEMS
+	*/
+	.o-grid__item {
+		position: relative;
+		display: inline-block;
+		vertical-align: top;
+		font-size: 1rem;
+		width: 100%;
+		padding: 0 $grid-gutter / 2;
+
+		.o-grid--collapse & {
+			padding: {
+				left: 0;
+				right: 0;
+			};
+		}
+
+		// Flex flavor
+		.o-grid--flex & {
+		  	flex: 0 0 auto;
+		  	display: flex;
+		}
+	}
+
+
+	/* Generate columns and offsets*/
+	// Column sizingi mobile-first based on presence of class responsive strings
+		@for $i from 1 through $grid-columns {
+			$widthCalc:  100% * $i / $grid-columns;
+		  	.o-grid__item[class*="\@xs#{$i}"] {
+		  		width: $widthCalc;
+
+		  		.o-grid--flex & {
+		  			flex-basis: $widthCalc;
+					max-width:  $widthCalc;
+		  		}
+		  	}
+
+		  	.o-grid__item--\@xs-offset-#{$i}{
+				margin-left: $widthCalc;
+			}
+		}
+
+		// sm breakpoint
+		@include mappy-bp(sm){
+			@for $i from 1 through $grid-columns {
+				$widthCalc:  100% * $i / $grid-columns;
+
+			  	.o-grid__item[class*="\@sm#{$i}"] {
+			  		width: $widthCalc;
+
+			  		.o-grid--flex & {
+			  			flex-basis: $widthCalc;
+						max-width:  $widthCalc;
+			  		}
+			  	}
+
+			  	.o-grid__item--\@sm-offset-#{$i}{
+					margin-left: $widthCalc;
+			  	}
+			}
+		}
+
+		// md breakpoint
+		@include mappy-bp(md){
+			@for $i from 1 through $grid-columns {
+				$widthCalc:  100% * $i / $grid-columns;
+
+			  	.o-grid__item[class*="\@md#{$i}"] {
+			  		width: $widthCalc;
+
+			  		.o-grid--flex & {
+			  			flex-basis: $widthCalc;
+						max-width:  $widthCalc;
+			  		}
+			  	}
+
+			  	.o-grid__item--\@md-offset-#{$i}{
+					margin-left: $widthCalc;
+			  	}
+
+			}
+		}
+
+		//lg breakpoint
+		@include mappy-bp(lg){
+			@for $i from 1 through $grid-columns {
+				$widthCalc:  100% * $i / $grid-columns;
+
+			  	.o-grid__item[class*="\@lg#{$i}"] {
+			  		width: $widthCalc;
+
+			  		.o-grid--flex & {
+			  			flex-basis: $widthCalc;
+						max-width:  $widthCalc;
+			  		}
+			  	}
+
+			  	.o-grid__item--\@lg-offset-#{$i}{
+					margin-left: $widthCalc;
+			  	}
+		  	}
+		}
+
+
+.is-first-\@xs-down{
+	@include mappy-bp(max sm){
+		order: -1;
+	}
+}
+
+.is-last-\@xs-down{
+	@include mappy-bp(max sm){
+		order: 9999;
+	}
+}
+
+.is-last-\@sm-down{
+	@include mappy-bp(max sm){
+		order: 9999;
+	}
+}
\ No newline at end of file
diff --git a/app/stylesheets/objects/_o.list.scss b/app/stylesheets/objects/_o.list.scss
index 151c6cf..d76f871 100644
--- a/app/stylesheets/objects/_o.list.scss
+++ b/app/stylesheets/objects/_o.list.scss
@@ -2,6 +2,63 @@
     OBJECTS.LIST
     ----
     
+	Order and unordered list of items
+* ==================================================== */
 
 
-==================================================== */
+.o-list{
+	margin: 0; //reset default margins;
+	margin-bottom: $s-baseline;
+}
+
+.o-list--unstyled{
+	list-style: none;
+	padding: 0;
+}
+
+
+	.o-list__item{
+		margin-bottom: $s-baseline;
+
+		.o-list--tight & {
+			margin-bottom: $s-baseline / 2;
+		}
+		
+		.o-list--xs &{
+			@include font-size(12px, 14px);
+		} 
+
+		.o-list--xxs & {
+			@include font-size(10px, 12px);
+			margin-bottom: $s-baseline / 4;
+		}
+
+		&:last-child{
+			margin-bottom: 0;
+		}
+	}
+
+
+.o-list--horizontal{
+	list-style: none;
+	padding-left: 0;
+
+	> .o-list__item{
+		margin-bottom: 0;
+		display: inline-block;
+		vertical-align: middle;
+
+		&:not(:last-child){
+			margin-right: $s-baseline / 2;
+		}
+	}
+}
+
+
+
+//inherits the spacing for the current font-size/leading ration
+.o-list--baseline{
+	.o-list__item{
+		margin-bottom: 0;
+	}
+}
\ No newline at end of file
diff --git a/app/stylesheets/objects/_o.main.scss b/app/stylesheets/objects/_o.main.scss
index 6b0cb02..73ac397 100644
--- a/app/stylesheets/objects/_o.main.scss
+++ b/app/stylesheets/objects/_o.main.scss
@@ -1,23 +1,28 @@
 /*
     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%;
+	display: flex;
+	flex-direction: column;
 }
 
+
+.o-app__header,
+.o-app__header {
+	flex: none;
+}
 /*
 	Use for main oject
-
 	<main class="o-main"></main>
 */
 .o-main{
-	
+	flex: 1 0 auto;
+	width: 100%;
 }
\ No newline at end of file
diff --git a/app/stylesheets/settings/_s.app-colors.scss b/app/stylesheets/settings/_s.app-colors.scss
index b388344..62e74ce 100644
--- a/app/stylesheets/settings/_s.app-colors.scss
+++ b/app/stylesheets/settings/_s.app-colors.scss
@@ -1,29 +1,47 @@
 /*
     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: (
+$app-colors-maps: (
     brand: (
-        light: #333,
-        base: #222,
-        dark: #111,
+        lighter: #FDE9D7,
+        light: #F9A01B,
+        base: #ED760A
     ),
     primary:(
-    	base: green;
-    )
-    secondary: (
-    	base: red;
+        light: mix(#50B4F3, white, 80%),
+    	base: #50B4F3,
+        dark: #4A90E2,
+        darker: #3072E0
+    ),
+    grayscale:(
+        heaven: #F8F8F8,
+        lightsmoke: #F1F1F1,
+        smoke: #EBEBEB,
+        darksmoke: #e1e1e1,
+        lightest: #999999,
+        lighter: #555555,
+        light: #333333,
+		base: #161616
     ),
-    text: (
-		base: #434343,
-    )
+    danger: #EC465B,
+    success: #00C766,
+    info: #6A9EBE,
+    warning: #F9A01B
+);
+
+
+$social-media-colors-map: (
+    facebook: #365899,
+    github: #333,
+    twitter: #00aced,
 );
diff --git a/app/stylesheets/settings/_s.globals.scss b/app/stylesheets/settings/_s.globals.scss
index 8620d2d..89f4c9a 100644
--- a/app/stylesheets/settings/_s.globals.scss
+++ b/app/stylesheets/settings/_s.globals.scss
@@ -1,15 +1,10 @@
 /*
     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
+$s-base-font-family: "Helvetica Neue", Arial, -apple-system, BlinkMacSystemFont,"Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell,"Open Sans", sans-serif;
+$s-base-font-size: 18px;
+$s-base-font-line-height: 26px;
+$s-baseline: $s-base-font-line-height;
\ No newline at end of file
diff --git a/app/stylesheets/settings/_s.mappy-breakpoints.scss b/app/stylesheets/settings/_s.mappy-breakpoints.scss
index 8f8847b..9b5a40b 100644
--- a/app/stylesheets/settings/_s.mappy-breakpoints.scss
+++ b/app/stylesheets/settings/_s.mappy-breakpoints.scss
@@ -5,9 +5,11 @@
     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
-==================================================== */
+    Note: it will convert values to ems for consintent
+    performance in most browsers
+
+    http://zellwk.com/blog/media-query-units/
+* ==================================================== */
 
 $breakpoints: (
     'xxs':  480px,
diff --git a/app/stylesheets/settings/_s.social-media-colors.scss b/app/stylesheets/settings/_s.social-media-colors.scss
deleted file mode 100644
index 1ca6812..0000000
--- a/app/stylesheets/settings/_s.social-media-colors.scss
+++ /dev/null
@@ -1,33 +0,0 @@
-/*
-    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/app/stylesheets/settings/_s.transitions.scss b/app/stylesheets/settings/_s.transitions.scss
index d5e149d..10ec5b5 100644
--- a/app/stylesheets/settings/_s.transitions.scss
+++ b/app/stylesheets/settings/_s.transitions.scss
@@ -5,10 +5,10 @@
 
      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)"
+	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/app/stylesheets/settings/_s.typescale.scss b/app/stylesheets/settings/_s.typescale.scss
new file mode 100644
index 0000000..961d53d
--- /dev/null
+++ b/app/stylesheets/settings/_s.typescale.scss
@@ -0,0 +1,19 @@
+/*
+    SETTINGS.TYPESCALE
+    ----
+    
+* ==================================================== */
+
+// size, leading pairs
+$s-typescale: (
+	giga: (60px, 72px),
+	mega: (48px, 57px),
+	kilo: (32px, 1.1875),
+	1:    (24px, 29px),
+	2:    (18px, 24px),
+	3:    (16px, 22px),
+	4:    (14px, 1.4285),
+	5:    (13px, 15px),
+	6:    (12px, 16px),
+	micro: (10px, 12px)
+);
diff --git a/app/stylesheets/tools/_t.functions.scss b/app/stylesheets/tools/_t.functions.scss
index e8f9cfc..6081c47 100644
--- a/app/stylesheets/tools/_t.functions.scss
+++ b/app/stylesheets/tools/_t.functions.scss
@@ -5,7 +5,21 @@
     Global, app-wide helper functions
     Some are just shortcuts to avoid verbosity
     and remember map names.
-==================================================== */
+* ==================================================== */
+
+
+/// Map deep get
+/// @author Hugo Giraudel
+/// @access public
+/// @param {Map} $map - Map
+/// @param {Arglist} $keys - Key chain
+/// @return {*} - Desired value
+@function map-deep-get($map, $keys...) {
+    @each $key in $keys {
+        $map: map-get($map, $key);
+    }
+    @return $map;
+}
 
 
 
@@ -13,57 +27,34 @@
     getAppColor()
     ----
 
-    retrives a color from the app-color-maps defined at _global.scss
+    retrives a color from the app-colors-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
+    	map-deep-get()
+        _s.app-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);
-        }
-       
-    }
+    @if map-has-key($app-colors-maps, $color) {
+        @if (type-of(map-get($app-colors-maps, $color)) == 'color' )  {
+            @return map-get($app-colors-maps, $color);
+        } @else {
+           @return map-deep-get($app-colors-maps, $color, $tone); // it's a map, get tone
+        }    
+    } 
     //else
-    @error "`#{$color}` is not in $app-color-maps. Check _global.scss";
+    @error "`#{$color}` is not in $app-colors-maps. Check _s.app-colors.scss";
     @return false;
 }
 
 
 
-
 /*
     getTransition()
     ----
@@ -72,11 +63,12 @@
 
 */
 
-@function getTransition($map: $transitions-map, $transition: 'smooth') {
-    @if map-has-key($map, $transition) {
+@function getTransition($transition: 'smooth') {
+    @if map-has-key($transitions-map, $transition) {
         @return map-get($transitions-map, $transition);
     }
     //else
     @error "`#{$transition}` is not in #{$map}. Check settings folder, maybe you mispelled a key";
+    @return false;
  }
 
diff --git a/app/stylesheets/tools/_t.mixins.scss b/app/stylesheets/tools/_t.mixins.scss
index 6e75643..21347aa 100644
--- a/app/stylesheets/tools/_t.mixins.scss
+++ b/app/stylesheets/tools/_t.mixins.scss
@@ -9,19 +9,21 @@
     [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
+    Base on 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;
+@mixin font-size($mixin-font-size, $mixin-line-height: auto, $legacyBrowsers: false) {
+    @if $legacyBrowsers == true {
+        font-size: $mixin-font-size;
+    }
+    font-size: ($mixin-font-size / $s-base-font-size) * 1rem;
 
     @if $mixin-line-height == auto {
-        line-height: ceil($mixin-font-size / $base-line-height) * ($base-line-height / $mixin-font-size);
+        line-height: ceil($mixin-font-size / $s-base-font-line-height) * ($s-base-font-line-height / $mixin-font-size);
     }
 
     @else {
@@ -39,48 +41,90 @@
 }
 
 
+/* 
+    Mixin for quicker typesetting 
+    
+    depends on @font-size mixin to convert
+    values to REM
+*/
+
+@mixin typeScale($scale: 4){
+    $font-size: nth(map-get($s-typescale, $scale), 1);
+    $leading: nth(map-get($s-typescale, $scale), 2);
+    
+    @include font-size($font-size, $leading);
+}
+
 
 
 
 /* 
     FONT-FACE
 
-    Steve Hickey
+    Base on 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';
-    }
-
+    .. but on steroids
+    You can cover all modern browsers, plus IE>9
+    with only woff formats.
+*/
+@mixin font-face($font-family, $file-path, $font-weight, $font-style, $RoR: false, $legacy: false){
+
+    @if $legacy == true {
+        @font-face {
+            font-family: $font-family;
+            @if $RoR == true {
+                src: font-url('#{$file-path}.eot');
+                src: font-url('#{$file-path}.eot?#iefix') format('embedded-opentype'),
+                     font-url('#{$file-path}.woff') format('woff'),
+                     font-url('#{$file-path}.ttf') format('truetype'),
+                     font-url('#{$file-path}.svg#{$font-family}') format('svg');
+            } @else {
+                src: url('#{$file-path}.eot');
+                src: url('#{$file-path}.eot?#iefix') format('embedded-opentype'),
+                     url('#{$file-path}.woff') format('woff'),
+                     url('#{$file-path}.ttf') format('truetype'),
+                     url('#{$file-path}.svg#{$font-family}') format('svg');
+            }
+
+            font-weight: unquote($font-weight);
+            font-style:  unquote($font-style);
+        }
 
-      @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');
-  //   }
-  // }
+        // 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;
+                 @if $RoR == true {
+                    src: font-url('#{$file-path}.svg##{$font-family}') format('svg');
+                } @else {
+                    src: url('#{$file-path}.svg##{$font-family}') format('svg');
+                }
+                
+                font-weight: unquote($font-weight);
+                font-style:  unquote($font-style);
+            }
+        }
+    } 
+    @else {
+        @font-face {
+            font-family: $font-family;
+            @if $RoR == true {
+                src: font-url('#{$file-path}.woff') format('woff'),
+                     font-url('#{$file-path}.woff2') format('woff2');
+            } @else {
+                src: font-url('#{$file-path}.woff') format('woff'),
+                 font-url('#{$file-path}.woff2') format('woff2');   
+            }
+            font-weight: unquote($font-weight);
+            font-style:  unquote($font-style);
+        }
+    }
 }
 
 
 
 
-
 /*
     RESET APPEARANCE [1]
     ----
@@ -104,22 +148,6 @@
 
 
 
-/*
-    TRUNCATE [1]
-    ----
-    
-    Yup that's it.    
-*/
-@mixin truncate() {
-  text-overflow: ellipsis;
-  overflow: hidden;
-  white-space: nowrap;
-}
-
-
-
-
-
 /*
     INPUT PLACEHOLDER MIXIN [2]
     ----
@@ -146,48 +174,8 @@
 
 
 
-
-
-
 /*
-    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
+    Hidden visually
     ----
 
     Mixin to quickly apply accessible hiding to elements.
@@ -205,33 +193,50 @@
 }
 
 
+/*
+    bg-cover
+    ----
 
+   Because I find myself repeating this 
+   3 lines too often
+*/
+@mixin bg-cover($postion: center center){
+    background-size: cover;
+    background-position: $postion;
+    background-repeat: no-repeat;
+}
 
 
-/*
-    CUSTOM SCROLLBAR STYLES [3] (Work in Progress)
 
-    -webkit only
+/*
+    Fontawesome
+    ----
 
-    https://css-tricks.com/wp-content/uploads/2011/05/scrollbarparts.png
+    for inline css icons through unicode
 */
-@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                {  }
+
+@mixin FontAwesome(){
+    display: inline-block;
+    font: normal normal normal 14px/1 FontAwesome;
+    font-size: inherit;
+    text-rendering: auto;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    transform: translate(0, 0);
 }
 
+
+/*
+    Clearfix
+    ----
+
+    clear all floats
+    http://cssmojo.com/the-very-latest-clearfix-reloaded/
+*/
+@mixin clearfix(){
+    &:after {
+        content:" ";
+        display:block;
+        clear:both;
+    }
+}
\ No newline at end of file
diff --git a/app/stylesheets/utilities/_u.coloring.scss b/app/stylesheets/utilities/_u.coloring.scss
index d79c15b..425dfda 100644
--- a/app/stylesheets/utilities/_u.coloring.scss
+++ b/app/stylesheets/utilities/_u.coloring.scss
@@ -1,33 +1,37 @@
 /*
-    UTILITIE.COLORING
+    UTILITIES.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
-==================================================== */
 
+    Atomic classes for give color to html elemtns
+    Use only on static elements, not interactive
 
+* ==================================================== */
 
 /*
-	APP COLOR UTILITY CLASSES
-
-	depends on getAppColor() function
+	generates
+    .u-color-@colorname-@tone for each color in colorshceme
 */
-	@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
+@each $color, $tone in $app-colors-maps {
+  @if type-of($tone) == 'map' {
+    $tones: map-keys($tone);
+
+    @for $i from 1 through length($tones){
+    	.u-color-#{$color}--#{nth($tones, $i)} {
+    	    color: map-get($tone, nth($tones, $i ));
+    	}
+
+      .u-bg-color-#{$color}--#{nth($tones, $i)} {
+          background-color: map-get($tone, nth($tones, $i ));
+      }
+    }
+  } @else {
+    .u-color-#{$color}{
+      color: map-get($app-colors-maps, $color);
+    }
+
+    .u-bg-color-#{$color}{
+      background-color: map-get($app-colors-maps, $color);
+    }
+  }
+}
diff --git a/app/stylesheets/utilities/_u.helpers.scss b/app/stylesheets/utilities/_u.helpers.scss
index 9123368..061817c 100644
--- a/app/stylesheets/utilities/_u.helpers.scss
+++ b/app/stylesheets/utilities/_u.helpers.scss
@@ -15,7 +15,27 @@
 
 	visually hide text but kepp it accessible to screen readers 
 */
-
 .u-sr-only {
 	@include hidden-visually();
-}
\ No newline at end of file
+}
+
+
+/*
+	TEXT ALIGNMENT
+	----
+*/
+.u-text-center{ text-align: center; }
+
+//default is mobile first, so propagate from small up
+.u-text-center--\@sm {
+	@include mappy-bp(sm) {
+		text-align: center;
+	}
+}
+
+//-down suffix indicate a specif style for a reduced breakpoint case
+.u-text-center--\@sm-down {
+	@include mappy-bp(max sm) {
+		text-align: center;
+	}
+}
diff --git a/app/views/layouts/default.html b/app/views/layouts/default.html
index 19348f4..74dc36e 100644
--- a/app/views/layouts/default.html
+++ b/app/views/layouts/default.html
@@ -3,8 +3,7 @@
   <head>
     {{> _head}}
   </head>
-  <body>
-
+  <body data-context="{{page}}">
     <div class="o-app" id="app">
         <!--app header-->
 		{{> _header }}
diff --git a/app/views/pages/index.html b/app/views/pages/index.html
index f0b369d..7417892 100644
--- a/app/views/pages/index.html
+++ b/app/views/pages/index.html
@@ -1,11 +1,17 @@
-<header>
-	<h1>Page Title</h1>
+<header class="c-hero">
+	<div class="o-container">
+		<h1>A page Header</h1>
+	</div>
 </header>
 
-<section>
-	Page Section
+<section class="u-bg-color-grayscale--heaven">
+	<div class="o-container">
+		<h2>A page section</h2>
+	</div>
 </section>
 
 <footer>
-Page footer
+	<div class="o-container">
+		Page footer
+	</div>
 </footer>
\ No newline at end of file
diff --git a/app/views/partials/application/_header.html b/app/views/partials/application/_header.html
index e388557..f7dc556 100644
--- a/app/views/partials/application/_header.html
+++ b/app/views/partials/application/_header.html
@@ -1,3 +1,3 @@
-<header>
+<header class="o-app__header">
 	<h1>App header</h1>
 </header>
\ No newline at end of file