diff --git a/README.md b/README.md index b8645f3..9c6a649 100644 --- a/README.md +++ b/README.md @@ -14,17 +14,17 @@ All the code you need is simple and familiar. A parent container class contains ```HTML
-
-
- -
-
- -
-
- -
-
+
+
+ +
+
+ +
+
+ +
+
``` @@ -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 diff --git a/src/_grid.scss b/src/_grid.scss index 8c83ae6..a41e02e 100644 --- a/src/_grid.scss +++ b/src/_grid.scss @@ -1,5 +1,6 @@ @use "sass:math"; +/* Grid */ .container { width: 90%; margin-left: auto; @@ -32,6 +33,12 @@ 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 { @@ -39,13 +46,9 @@ .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; } } -} \ No newline at end of file +} diff --git a/src/_typography.scss b/src/_typography.scss index 9c783de..72eb1eb 100644 --- a/src/_typography.scss +++ b/src/_typography.scss @@ -1,3 +1,5 @@ +/* Typography */ + @import url(https://fonts.googleapis.com/css?family=Lato:400,300,300italic,400italic,700,700italic); * { diff --git a/src/_utility.scss b/src/_utility.scss index 9a8a0d0..8ea236d 100644 --- a/src/_utility.scss +++ b/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; } diff --git a/src/default.scss b/src/default.scss index 957dddc..900d6b7 100644 --- a/src/default.scss +++ b/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";