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

@@ -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;
-    }
-}
+//COMPONENTS
+@import "components/c.button";
+
+//UTILITIES
+@import "utilities/u.coloring";
+@import "utilities/u.helpers";

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;
+}

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

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,

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;
+		}
+
+	}
+

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