Fixed breakpoint bugs

README.md

@@ -14,17 +14,17 @@ All the code you need is simple and familiar. A parent container class contains
 
 ```HTML
 <div class="container">
-	<div class="row">
-		<div class="col-3">
-			<!-- This content will take up 3/12 (or 1/4) of the container -->
-		</div>
-		<div class="col-3">
-			<!-- This content will take up 3/12 (or 1/4) of the container -->
-		</div>
-		<div class="col-6">
-			<!-- This content will take up 6/12 (or 1/2) of the container -->
-		</div>
-	</div>
+  <div class="row">
+    <div class="col-3">
+      <!-- This content will take up 3/12 (or 1/4) of the container -->
+    </div>
+    <div class="col-3">
+      <!-- This content will take up 3/12 (or 1/4) of the container -->
+    </div>
+    <div class="col-6">
+      <!-- This content will take up 6/12 (or 1/2) of the container -->
+    </div>
+  </div>
 </div>
 ```
 
@@ -38,14 +38,12 @@ Not specifying a breakpoint is equal to using the medium breakpoint (EX: `.col-6
 - `center`: Centers content.
 - `justify`: Applies the "justify" content alignment.
 - `hidden-sm`
-- `hidden-md`
 
 ### Breakpoints
 
 - `sm`: 33.75em; // 540px
 - `md`: 45em; // 720px
 - `lg`: 60em; // 960px
-n
 
 ### Typography
 

src/_grid.scss

@@ -1,5 +1,6 @@
 @use "sass:math";
 
+/* Grid */
 .container {
   width: 90%;
   margin-left: auto;
@@ -32,20 +33,22 @@
   clear: both;
 }
 
+@for $i from 1 through $columns {
+  .col-#{$i} {
+    width: $width;
+  }
+}
+
 @media only screen and (min-width: $breakpoint-med) {
   @for $i from 1 through $columns {
 
     .col-#{$i},
     .col-#{$i}-md {
       width: calc($width / $columns * $i - $gutter);
     }
-  }
-}
 
-@media only screen and (min-width: $breakpoint-large) {
-  @for $i from 1 through $columns {
-    .col-#{$i}-lg {
-      width: calc($width / $columns * $i - $gutter);
+    .hidden-sm {
+      display: block;
     }
   }
-}
+}

src/_typography.scss

@@ -1,3 +1,5 @@
+/* Typography */
+
 @import url(https://fonts.googleapis.com/css?family=Lato:400,300,300italic,400italic,700,700italic);
 
 * {

src/_utility.scss

@@ -1,3 +1,4 @@
+/* Utility */
 .left {
     text-align: left;
 }
@@ -16,14 +17,6 @@
     text-align: justify;
 }
 
-@media only screen and (min-width: $breakpoint-med) {
-    .hidden-sm {
-        display: none;
-    }
-}
-
-@media only screen and (min-width: $breakpoint-large) {
-    .hidden-md {
-        display: none;
-    }
+.hidden-sm {
+    display: none;
 }

src/default.scss

@@ -1,7 +1,3 @@
-@import "_variables.scss";
-@import "_utility.scss";
-@import "_grid.scss";
-
 html,
 body {
   height: 100%;
@@ -12,3 +8,7 @@ body {
   top: 0;
   font-size: 100%;
 }
+
+@import "_variables.scss";
+@import "_utility.scss";
+@import "_grid.scss";