tidy up, add base responsive nav, update readme

assets/styles/utils/_helpers.scss

@@ -1,81 +1,84 @@
 /**
- * Clearing and floating
- */
-
+* Clearing and floating
+*/
 .alignleft,
 .float-left {
-    float: left;
-    img & {
-        margin-right: $base-spacing-unit;
-    }
+  float: left;
+
+  img & {
+    margin-right: $base-spacing-unit;
+  }
 }
 
 .alignright,
 .float-right {
-    float: right;
-    img & {
-        margin-left : $base-spacing-unit;
-    }
+  float: right;
+
+  img & {
+    margin-left : $base-spacing-unit;
+  }
 }
 
 .aligncenter,
 .float-center {
-    display: block;
-    margin: {
-        left: auto;
-        right: auto;
-    }
-    img & {
-        margin-bottom: $base-spacing-unit;
-    }
+  display: block;
+  margin: {
+    left: auto;
+    right: auto;
+  }
+
+  img & {
+    margin-bottom: $base-spacing-unit;
+  }
 }
 
 .clearfix {
-    @include clearfix();
+  @include clearfix();
 }
 
 
 
 /**
- * Text aligments
- */
-
+* Text aligments
+*/
 .align-text-left {
-    text-align: left;
+  text-align: left;
 }
 
 .align-text-right {
-    text-align: right;
+  text-align: right;
 }
 
 .align-text-center {
-    text-align: center;
+  text-align: center;
 }
 
 
 /**
- * Elements visibility
- */
-
+* Elements visibility
+*/
 .visible-on-mobile {
-    display: none !important;
-    @include resp-max($breakpoint-sm) {
-        display: block !important;
-    }
+  display: none !important;
+
+  @include resp-max($breakpoint-sm) {
+    display: block !important;
+  }
 }
 
 .visible-on-tablet {
+  display: none !important;
+
+  @include resp-max($breakpoint-md) {
+    display: block !important;
+  }
+
+  @include resp-max($breakpoint-sm) {
     display: none !important;
-    @include resp-max($breakpoint-md) {
-        display: block !important;
-    }
-    @include resp-max($breakpoint-sm) {
-        display: none !important;
-    }
+  }
 }
 
 .visible-on-desktop {
-    @include resp-max($breakpoint-md) {
-        display: none !important;
-    }
+  @include resp-max($breakpoint-md) {
+    display: none !important;
+  }
 }

assets/styles/utils/_reset.scss

@@ -17,12 +17,13 @@ html {
   text-rendering: optimizeLegibility;
 }
 
-input, 
-select, 
+input,
+select,
 textarea,
 button {
   color: inherit;
   display: inline-block;
+
   &[disabled] {
     cursor: not-allowed;
   }
@@ -35,8 +36,9 @@ button {
 table {
   border-collapse: collapse;
   border-spacing: 0;
+
   th,
   td {
     text-align: left;
   }
-}
+}

assets/styles/utils/_responsive.scss

@@ -1,18 +1,16 @@
 @each $breakpoint in $breakpoints {
+  $key   : nth($breakpoint, 1);
+  $value : nth($breakpoint, 2);
 
-    $key   : nth($breakpoint, 1);
-    $value : nth($breakpoint, 2);
-
-    .visible-#{$key} {
-        @media only screen and #{$value} {
-            display: block !important;
-        }
+  .visible-#{$key} {
+    @media only screen and #{$value} {
+      display: block !important;
     }
+  }
 
-    .hidden-#{$key} {
-        @media only screen and #{$value} {
-            display: none !important;
-        }
+  .hidden-#{$key} {
+    @media only screen and #{$value} {
+      display: none !important;
     }
-
-}
+  }
+}