Stop being a n00b update

css/_vars.scss

@@ -15,6 +15,10 @@ $h4-font-size: 							18;
 $h5-font-size: 							16;
 $h6-font-size: 							16;
 
+// Media Queries
+
+$mobile:                    640px;
+
 // Lists
 
 $list-margin-left:					24;

css/generic/_mixins.scss

@@ -1,57 +1,13 @@
-@mixin breakpoint($point) {
-  @if $point == mobile {
-    @media screen and (max-width: 640px)  { @content; }
-  }
-  @else if $point == tablet-portrait {
-    @media screen and (max-width: 768px)  { @content; }
-  }
-  @else if $point == tablet-landscape {
-    @media screen and (max-width: 1024px) { @content; }
-  }
-  @else if $point == desktop {
-    @media screen and (max-width: 1200px) { @content; }
-  }
-}
-
-@mixin border-radius ($radius: 5px) {
-	-webkit-border-radius: $radius;
-	   -moz-border-radius: $radius;
-	     -o-border-radius: $radius;
-	        border-radius: $radius;
-}
-
-@mixin box-sizing ($box-model: 'border-box') {
-	-webkit-box-sizing: $box-model;
-     -moz-box-sizing: $box-model;
-          box-sizing: $box-model;
-}
-
-@mixin box-shadow($x-axis: 0, $y-axis: 2px, $blur: 2px, $alpha: 0.1) {
-	-webkit-box-shadow: $x-axis $y-axis $blur rgba(0, 0, 0, $alpha);
-	   -moz-box-shadow: $x-axis $y-axis $blur rgba(0, 0, 0, $alpha);
-	        box-shadow: $x-axis $y-axis $blur rgba(0, 0, 0, $alpha);
-}
-
-@mixin transition($duration:0.2s, $ease:ease-out) {
-	-webkit-transition: all $duration $ease;
-	   -moz-transition: all $duration $ease;
-	        transition: all $duration $ease;
-}
-
-@mixin gradient($from, $to) {
-  background-color: $from;
-	background-image: -webkit-linear-gradient($from, $to);
-	background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from($from), to($to));
-  background-image: -moz-linear-gradient($from, $to);
-	background-image: -o-linear-gradient($from, $to);	
+@mixin media($size) {
+  @media screen and (max-width: $size)  { @content; }
 }
 
 @function calculate-rem($size) {
-  $remSize: $size / 10;
+  $remSize: $size / $base-font-size;
   @return #{$remSize}rem;
 }
 
 @mixin font-size($size) {
-  font-size: $size + px; //Fallback in px
+  font-size: $size + px;
   font-size: calculate-rem($size);
 }

css/objects/_forms.scss

@@ -1,13 +1,11 @@
-input, select, textarea, button {
+input, select, textarea {
 	display: inline-block;
-	font-family: $base-font-stack;
-	font-size: 1em;
+	font: inherit;
 	line-height: $base-margin-bottom + px;
 	padding: 4px 8px;
 	color: $base-colour;
 	background: $input-background;
 	border: $input-border;
-	@include border-radius(3px);
 	width: 208px;
 }
 
@@ -15,16 +13,16 @@ textarea {
 	min-height: ($base-margin-bottom * 4) + px;
 }
 
-.control-group {
+.form__group {
 	margin-bottom: $base-margin-bottom + px;
 }
 
-.control-label {
+.form__label {
 	float: left;
 	width: 140px;
 }
 
-.controls {
+.form__controls {
 	margin-left: 160px;
 	@extend .clearfix;
 }
@@ -36,12 +34,12 @@ textarea {
 .btn {
 	background: $btn-background;
 	border: $btn-border;
-	@include border-radius(3px);
 	color: $btn-color;
 	cursor: pointer;
 	display: inline-block;
-	line-height: $base-margin-bottom + px;
-	padding: 5px 20px;
+	line-height: ($base-margin-bottom * 2) + px;
+	height: ($base-margin-bottom * 2) + px;
+	padding: 0 20px;
 	width: auto;
 	&:hover {
 		background: $btn-background-hover;

css/objects/_nav.scss

@@ -1,13 +1,11 @@
 .nav {
 	list-style: none;
 	margin-left: 0;
-}
-
-	.nav > li {
-		 display: inline-block;
-		*display: inline;
-	}
-
-		.nav > li > a {
-			display: block;
-		}
+  >li {
+      display: inline-block;
+      *display: inline;
+    >a {
+      display: block;
+    }
+  }
+}

css/objects/_scaffolding.scss

@@ -5,7 +5,7 @@
   @extend .clearfix;
 }
 
-.container-fluid {
+.container--fluid {
   width: 100%;
   @extend .clearfix;
 }
@@ -14,7 +14,7 @@
   margin-left: -($column-gutter / $container-max-width) * 100%;
   _overflow: hidden;
   @extend .clearfix;
-  @include breakpoint(mobile) { 
+  @include media($mobile) { 
     margin-left: 0; 
   }
 }
@@ -24,7 +24,7 @@
   float: left;
   margin-left: ($column-gutter / $container-max-width) * 100%;
   vertical-align: top;
-  @include breakpoint(mobile) { 
+  @include media($mobile) { 
     display: block;
     float: none;
     margin-left: 0;
@@ -39,12 +39,12 @@
   }
 }
 
-.row-no-gutters .column {
+.row--no-gutters .column {
   margin-left: 0;
 }
 
 @for $i from 1 through $column-count {
-  .row-no-gutters .column-span-#{$i} { 
+  .row--no-gutters .column-span-#{$i} { 
     width: ((100 / $column-count) * $i) * 1%;
     *width: ((100 / $column-count) * $i) - .02 * 1%;
   }