From e38b206ec0e0040eb104fdf0919a43468f457a7b Mon Sep 17 00:00:00 2001 From: John carmichael Date: Fri, 14 Apr 2017 19:01:59 +0200 Subject: [PATCH 1/2] - Added a sass build file. - Broke out the actual grid sass from the rest. --- .gitignore | 1 + quilk.js | 47 +++++++++++++ simple-grid.css | 166 ++++++++++++++++++-------------------------- simple-grid.min.css | 2 +- simple-grid.scss | 92 +----------------------- the-grid.scss | 149 +++++++++++++++++++++++++++++++++++++++ 6 files changed, 269 insertions(+), 188 deletions(-) create mode 100644 .gitignore create mode 100644 quilk.js create mode 100644 the-grid.scss diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..723ef36 --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +.idea \ No newline at end of file diff --git a/quilk.js b/quilk.js new file mode 100644 index 0000000..d98e859 --- /dev/null +++ b/quilk.js @@ -0,0 +1,47 @@ +/** + * Simple build file for the sass. + * 1 - npm install -g quilk + * 2 - quilk (builds the non minified version) + * 3 - quilk release=prod (builds the minified version) + */ + + +module.exports = { + modules: [ + { + name: 'To CSS', + module: 'sass_std', + outputStyle: 'nested', + sourceComments: false, + input_path: '/simple-grid.scss', + target: '/simple-grid.css' + } + ], + + dont_watch: [ + 'simple-grid.css' + ], + + release_commands_or_modules: { + prod: { + post: [{ + name: "Minify the css", + module: "node_minify", + type: "sqwish", + input: [ + "/simple-grid.css" + ], + target: "/simple-grid.min.css" + }] + } + }, + + developers: { + default: { + platform: "windows", + notifier: { + on: false + } + } + } +}; \ No newline at end of file diff --git a/simple-grid.css b/simple-grid.css index 6f8e71b..fec75b4 100644 --- a/simple-grid.css +++ b/simple-grid.css @@ -1,12 +1,4 @@ -/** -*** SIMPLE GRID -*** (C) ZACH COLE 2016 -**/ - @import url(https://fonts.googleapis.com/css?family=Lato:400,300,300italic,400italic,700,700italic); - -/* UNIVERSAL */ - html, body { height: 100%; @@ -15,98 +7,113 @@ body { padding: 0; left: 0; top: 0; - font-size: 100%; + font-size: 100%; } -/* ROOT FONT STYLES */ - * { - font-family: 'Lato', Helvetica, sans-serif; + font-family: "Lato", Helvetica, sans-serif; color: #333447; - line-height: 1.5; + line-height: 1.5; } -/* TYPOGRAPHY */ - h1 { - font-size: 2.5rem; + font-size: 2.5rem; } h2 { - font-size: 2rem; + font-size: 2rem; } h3 { - font-size: 1.375rem; + font-size: 1.375rem; } h4 { - font-size: 1.125rem; + font-size: 1.125rem; } h5 { - font-size: 1rem; + font-size: 1rem; } h6 { - font-size: 0.875rem; + font-size: 0.875rem; } p { font-size: 1.125rem; font-weight: 200; - line-height: 1.8; + line-height: 1.8; } .font-light { - font-weight: 300; + font-weight: 300; } .font-regular { - font-weight: 400; + font-weight: 400; } .font-heavy { - font-weight: 700; + font-weight: 700; } -/* POSITIONING */ - .left { - text-align: left; + text-align: left; } .right { - text-align: right; + text-align: right; } .center { text-align: center; margin-left: auto; - margin-right: auto; + margin-right: auto; } .justify { - text-align: justify; + text-align: justify; } -/* ==== GRID SYSTEM ==== */ +.hidden-sm { + display: none; +} .container { width: 90%; margin-left: auto; - margin-right: auto; + margin-right: auto; +} + +@media only screen and (min-width: 33.75em) { + .container { + width: 80%; + } +} + +@media only screen and (min-width: 60em) { + .container { + width: 75%; + max-width: 60rem; + } } .row { position: relative; - width: 100%; + width: 100%; } .row [class^="col"] { float: left; margin: 0.5rem 2%; - min-height: 0.125rem; + min-height: 0.125rem; +} + +.row::after { + content: ""; + display: table; + clear: both; } .col-1, @@ -121,130 +128,95 @@ p { .col-10, .col-11, .col-12 { - width: 96%; + width: 96%; } .col-1-sm { - width: 4.33%; + width: 4.33333%; } .col-2-sm { - width: 12.66%; + width: 12.66667%; } .col-3-sm { - width: 21%; + width: 21%; } .col-4-sm { - width: 29.33%; + width: 29.33333%; } .col-5-sm { - width: 37.66%; + width: 37.66667%; } .col-6-sm { - width: 46%; + width: 46%; } .col-7-sm { - width: 54.33%; + width: 54.33333%; } .col-8-sm { - width: 62.66%; + width: 62.66667%; } .col-9-sm { - width: 71%; + width: 71%; } .col-10-sm { - width: 79.33%; + width: 79.33333%; } .col-11-sm { - width: 87.66%; + width: 87.66667%; } .col-12-sm { - width: 96%; -} - -.row::after { - content: ""; - display: table; - clear: both; -} - -.hidden-sm { - display: none; -} - -@media only screen and (min-width: 33.75em) { /* 540px */ - .container { - width: 80%; - } + width: 96%; } -@media only screen and (min-width: 45em) { /* 720px */ +@media only screen and (min-width: 45em) { .col-1 { - width: 4.33%; + width: 4.33333%; } - .col-2 { - width: 12.66%; + width: 12.66667%; } - .col-3 { - width: 21%; + width: 21%; } - .col-4 { - width: 29.33%; + width: 29.33333%; } - .col-5 { - width: 37.66%; + width: 37.66667%; } - .col-6 { - width: 46%; + width: 46%; } - .col-7 { - width: 54.33%; + width: 54.33333%; } - .col-8 { - width: 62.66%; + width: 62.66667%; } - .col-9 { - width: 71%; + width: 71%; } - .col-10 { - width: 79.33%; + width: 79.33333%; } - .col-11 { - width: 87.66%; + width: 87.66667%; } - .col-12 { - width: 96%; + width: 96%; } - .hidden-sm { - display: block; - } -} - -@media only screen and (min-width: 60em) { /* 960px */ - .container { - width: 75%; - max-width: 60rem; + display: block; } } diff --git a/simple-grid.min.css b/simple-grid.min.css index d3f2cc2..cee6d4e 100644 --- a/simple-grid.min.css +++ b/simple-grid.min.css @@ -1 +1 @@ -@import url(https://fonts.googleapis.com/css?family=Lato:400,300,300italic,400italic,700,700italic);body,html{height:100%;width:100%;margin:0;padding:0;left:0;top:0;font-size:100%}.center,.container{margin-left:auto;margin-right:auto}*{font-family:Lato,Helvetica,sans-serif;color:#333447;line-height:1.5}h1{font-size:2.5rem}h2{font-size:2rem}h3{font-size:1.375rem}h4{font-size:1.125rem}h5{font-size:1rem}h6{font-size:.875rem}p{font-size:1.125rem;font-weight:200;line-height:1.8}.font-light{font-weight:300}.font-regular{font-weight:400}.font-heavy{font-weight:700}.left{text-align:left}.right{text-align:right}.center{text-align:center}.justify{text-align:justify}.container{width:90%}.row{position:relative;width:100%}.row [class^=col]{float:left;margin:.5rem 2%;min-height:.125rem}.col-1,.col-10,.col-11,.col-12,.col-2,.col-3,.col-4,.col-5,.col-6,.col-7,.col-8,.col-9{width:96%}.col-1-sm{width:4.33%}.col-2-sm{width:12.66%}.col-3-sm{width:21%}.col-4-sm{width:29.33%}.col-5-sm{width:37.66%}.col-6-sm{width:46%}.col-7-sm{width:54.33%}.col-8-sm{width:62.66%}.col-9-sm{width:71%}.col-10-sm{width:79.33%}.col-11-sm{width:87.66%}.col-12-sm{width:96%}.row::after{content:"";display:table;clear:both}.hidden-sm{display:none}@media only screen and (min-width:33.75em){.container{width:80%}}@media only screen and (min-width:45em){.col-1{width:4.33%}.col-2{width:12.66%}.col-3{width:21%}.col-4{width:29.33%}.col-5{width:37.66%}.col-6{width:46%}.col-7{width:54.33%}.col-8{width:62.66%}.col-9{width:71%}.col-10{width:79.33%}.col-11{width:87.66%}.col-12{width:96%}.hidden-sm{display:block}}@media only screen and (min-width:60em){.container{width:75%;max-width:60rem}} +@import url(https://fonts.googleapis.com/css?family=Lato:400,300,300italic,400italic,700,700italic);html,body{height:100%;width:100%;margin:0;padding:0;left:0;top:0;font-size:100%}*{font-family:"Lato",Helvetica,sans-serif;color:#333447;line-height:1.5}h1{font-size:2.5rem}h2{font-size:2rem}h3{font-size:1.375rem}h4{font-size:1.125rem}h5{font-size:1rem}h6{font-size:0.875rem}p{font-size:1.125rem;font-weight:200;line-height:1.8}.font-light{font-weight:300}.font-regular{font-weight:400}.font-heavy{font-weight:700}.left{text-align:left}.right{text-align:right}.center{text-align:center;margin-left:auto;margin-right:auto}.justify{text-align:justify}.hidden-sm{display:none}.container{width:90%;margin-left:auto;margin-right:auto}@media only screen and (min-width:33.75em){.container{width:80%}}@media only screen and (min-width:60em){.container{width:75%;max-width:60rem}}.row{position:relative;width:100%}.row [class^="col"]{float:left;margin:0.5rem 2%;min-height:0.125rem}.row::after{content:"";display:table;clear:both}.col-1,.col-2,.col-3,.col-4,.col-5,.col-6,.col-7,.col-8,.col-9,.col-10,.col-11,.col-12{width:96%}.col-1-sm{width:4.33333%}.col-2-sm{width:12.66667%}.col-3-sm{width:21%}.col-4-sm{width:29.33333%}.col-5-sm{width:37.66667%}.col-6-sm{width:46%}.col-7-sm{width:54.33333%}.col-8-sm{width:62.66667%}.col-9-sm{width:71%}.col-10-sm{width:79.33333%}.col-11-sm{width:87.66667%}.col-12-sm{width:96%}@media only screen and (min-width:45em){.col-1{width:4.33333%}.col-2{width:12.66667%}.col-3{width:21%}.col-4{width:29.33333%}.col-5{width:37.66667%}.col-6{width:46%}.col-7{width:54.33333%}.col-8{width:62.66667%}.col-9{width:71%}.col-10{width:79.33333%}.col-11{width:87.66667%}.col-12{width:96%}.hidden-sm{display:block}} \ No newline at end of file diff --git a/simple-grid.scss b/simple-grid.scss index 49a3881..f469731 100644 --- a/simple-grid.scss +++ b/simple-grid.scss @@ -96,93 +96,5 @@ p { text-align: justify; } -.hidden-sm { - display: none; -} - -// grid - -$width: 96%; -$gutter: 4%; -$breakpoint-small: 33.75em; // 540px -$breakpoint-med: 45em; // 720px -$breakpoint-large: 60em; // 960px - -.container { - width: 90%; - margin-left: auto; - margin-right: auto; - - @media only screen and (min-width: $breakpoint-small) { - width: 80%; - } - - @media only screen and (min-width: $breakpoint-large) { - width: 75%; - max-width: 60rem; - } -} - -.row { - position: relative; - width: 100%; -} - -.row [class^="col"] { - float: left; - margin: 0.5rem 2%; - min-height: 0.125rem; -} - -.row::after { - content: ""; - display: table; - clear: both; -} - -.col-1, -.col-2, -.col-3, -.col-4, -.col-5, -.col-6, -.col-7, -.col-8, -.col-9, -.col-10, -.col-11, -.col-12 { - width: $width; -} - -.col-1-sm { width:($width / 12) - ($gutter * 11 / 12); } -.col-2-sm { width: ($width / 6) - ($gutter * 10 / 12); } -.col-3-sm { width: ($width / 4) - ($gutter * 9 / 12); } -.col-4-sm { width: ($width / 3) - ($gutter * 8 / 12); } -.col-5-sm { width: ($width / (12 / 5)) - ($gutter * 7 / 12); } -.col-6-sm { width: ($width / 2) - ($gutter * 6 / 12); } -.col-7-sm { width: ($width / (12 / 7)) - ($gutter * 5 / 12); } -.col-8-sm { width: ($width / (12 / 8)) - ($gutter * 4 / 12); } -.col-9-sm { width: ($width / (12 / 9)) - ($gutter * 3 / 12); } -.col-10-sm { width: ($width / (12 / 10)) - ($gutter * 2 / 12); } -.col-11-sm { width: ($width / (12 / 11)) - ($gutter * 1 / 12); } -.col-12-sm { width: $width; } - -@media only screen and (min-width: $breakpoint-med) { - .col-1 { width:($width / 12) - ($gutter * 11 / 12); } - .col-2 { width: ($width / 6) - ($gutter * 10 / 12); } - .col-3 { width: ($width / 4) - ($gutter * 9 / 12); } - .col-4 { width: ($width / 3) - ($gutter * 8 / 12); } - .col-5 { width: ($width / (12 / 5)) - ($gutter * 7 / 12); } - .col-6 { width: ($width / 2) - ($gutter * 6 / 12); } - .col-7 { width: ($width / (12 / 7)) - ($gutter * 5 / 12); } - .col-8 { width: ($width / (12 / 8)) - ($gutter * 4 / 12); } - .col-9 { width: ($width / (12 / 9)) - ($gutter * 3 / 12); } - .col-10 { width: ($width / (12 / 10)) - ($gutter * 2 / 12); } - .col-11 { width: ($width / (12 / 11)) - ($gutter * 1 / 12); } - .col-12 { width: $width; } - - .hidden-sm { - display: block; - } -} +// Import the actual grid here. +@import "the-grid"; \ No newline at end of file diff --git a/the-grid.scss b/the-grid.scss new file mode 100644 index 0000000..5157d64 --- /dev/null +++ b/the-grid.scss @@ -0,0 +1,149 @@ +// grid + +$width: 96%; +$gutter: 4%; +$breakpoint-small: 33.75em; // 540px +$breakpoint-med: 45em; // 720px +$breakpoint-large: 60em; // 960px + +.hidden-sm { + display: none; +} + +.container { + width: 90%; + margin-left: auto; + margin-right: auto; + + @media only screen and (min-width: $breakpoint-small) { + width: 80%; + } + + @media only screen and (min-width: $breakpoint-large) { + width: 75%; + max-width: 60rem; + } +} + +.row { + position: relative; + width: 100%; +} + +.row [class^="col"] { + float: left; + margin: 0.5rem 2%; + min-height: 0.125rem; +} + +.row::after { + content: ""; + display: table; + clear: both; +} + +.col-1, +.col-2, +.col-3, +.col-4, +.col-5, +.col-6, +.col-7, +.col-8, +.col-9, +.col-10, +.col-11, +.col-12 { + width: $width; +} + +.col-1-sm { + width: ($width / 12) - ($gutter * 11 / 12); +} + +.col-2-sm { + width: ($width / 6) - ($gutter * 10 / 12); +} + +.col-3-sm { + width: ($width / 4) - ($gutter * 9 / 12); +} + +.col-4-sm { + width: ($width / 3) - ($gutter * 8 / 12); +} + +.col-5-sm { + width: ($width / (12 / 5)) - ($gutter * 7 / 12); +} + +.col-6-sm { + width: ($width / 2) - ($gutter * 6 / 12); +} + +.col-7-sm { + width: ($width / (12 / 7)) - ($gutter * 5 / 12); +} + +.col-8-sm { + width: ($width / (12 / 8)) - ($gutter * 4 / 12); +} + +.col-9-sm { + width: ($width / (12 / 9)) - ($gutter * 3 / 12); +} + +.col-10-sm { + width: ($width / (12 / 10)) - ($gutter * 2 / 12); +} + +.col-11-sm { + width: ($width / (12 / 11)) - ($gutter * 1 / 12); +} + +.col-12-sm { + width: $width; +} + +@media only screen and (min-width: $breakpoint-med) { + .col-1 { + width: ($width / 12) - ($gutter * 11 / 12); + } + .col-2 { + width: ($width / 6) - ($gutter * 10 / 12); + } + .col-3 { + width: ($width / 4) - ($gutter * 9 / 12); + } + .col-4 { + width: ($width / 3) - ($gutter * 8 / 12); + } + .col-5 { + width: ($width / (12 / 5)) - ($gutter * 7 / 12); + } + .col-6 { + width: ($width / 2) - ($gutter * 6 / 12); + } + .col-7 { + width: ($width / (12 / 7)) - ($gutter * 5 / 12); + } + .col-8 { + width: ($width / (12 / 8)) - ($gutter * 4 / 12); + } + .col-9 { + width: ($width / (12 / 9)) - ($gutter * 3 / 12); + } + .col-10 { + width: ($width / (12 / 10)) - ($gutter * 2 / 12); + } + .col-11 { + width: ($width / (12 / 11)) - ($gutter * 1 / 12); + } + .col-12 { + width: $width; + } + + .hidden-sm { + display: block; + } +} \ No newline at end of file From 99f302afea04f90bd1f0f10fab8cdef6df8db969 Mon Sep 17 00:00:00 2001 From: John carmichael Date: Sat, 15 Apr 2017 10:53:24 +0200 Subject: [PATCH 2/2] - Added the default flag to the variables so they can be overridden. - .row [class^="col"] meant you had to place the col-X before any other class on the element, considering the already super small size of this grid, explicitly declaring the row col-X makes this grid more flexible. - phpstorm has automatically styled some of the spacing, hope this is not an issue. --- simple-grid.css | 188 ++++++++++++++++++-------------------------- simple-grid.min.css | 2 +- the-grid.scss | 44 ++++++++--- 3 files changed, 111 insertions(+), 123 deletions(-) diff --git a/simple-grid.css b/simple-grid.css index fec75b4..07f55bb 100644 --- a/simple-grid.css +++ b/simple-grid.css @@ -7,114 +7,105 @@ body { padding: 0; left: 0; top: 0; - font-size: 100%; -} + font-size: 100%; } * { - font-family: "Lato", Helvetica, sans-serif; + font-family: "Lato", Helvetica, sans-serif; color: #333447; - line-height: 1.5; -} + line-height: 1.5; } h1 { - font-size: 2.5rem; -} + font-size: 2.5rem; } h2 { - font-size: 2rem; -} + font-size: 2rem; } h3 { - font-size: 1.375rem; -} + font-size: 1.375rem; } h4 { - font-size: 1.125rem; -} + font-size: 1.125rem; } h5 { - font-size: 1rem; -} + font-size: 1rem; } h6 { - font-size: 0.875rem; -} + font-size: 0.875rem; } p { font-size: 1.125rem; font-weight: 200; - line-height: 1.8; -} + line-height: 1.8; } .font-light { - font-weight: 300; -} + font-weight: 300; } .font-regular { - font-weight: 400; -} + font-weight: 400; } .font-heavy { - font-weight: 700; -} + font-weight: 700; } .left { - text-align: left; -} + text-align: left; } .right { - text-align: right; -} + text-align: right; } .center { text-align: center; margin-left: auto; - margin-right: auto; -} + margin-right: auto; } .justify { - text-align: justify; -} + text-align: justify; } .hidden-sm { - display: none; -} + display: none; } .container { width: 90%; margin-left: auto; - margin-right: auto; -} - -@media only screen and (min-width: 33.75em) { + margin-right: auto; } + @media only screen and (min-width: 33.75em) { .container { - width: 80%; - } -} - -@media only screen and (min-width: 60em) { + width: 80%; } } + @media only screen and (min-width: 60em) { .container { - width: 75%; - max-width: 60rem; - } -} + width: 75%; + max-width: 60rem; } } .row { position: relative; - width: 100%; -} + width: 100%; } -.row [class^="col"] { - float: left; - margin: 0.5rem 2%; - min-height: 0.125rem; -} - -.row::after { +.row { + position: relative; + width: 100%; } + .row:after { content: ""; display: table; - clear: both; -} + clear: both; } + .row .col-1, .row .col-1-sm, + .row .col-2, .row .col-2-sm, + .row .col-3, .row .col-3-sm, + .row .col-4, .row .col-4-sm, + .row .col-5, .row .col-5-sm, + .row .col-6, .row .col-6-sm, + .row .col-7, .row .col-7-sm, + .row .col-8, .row .col-8-sm, + .row .col-9, .row .col-9-sm, + .row .col-10, .row .col-10-sm, + .row .col-11, .row .col-11-sm, + .row .col-12, .row .col-12-sm { + float: left; + margin: 0.5rem 2%; + min-height: 0.125rem; } + +.row::after { + content: ""; + display: table; + clear: both; } .col-1, .col-2, @@ -128,95 +119,68 @@ p { .col-10, .col-11, .col-12 { - width: 96%; -} + width: 96%; } .col-1-sm { - width: 4.33333%; -} + width: 4.33333%; } .col-2-sm { - width: 12.66667%; -} + width: 12.66667%; } .col-3-sm { - width: 21%; -} + width: 21%; } .col-4-sm { - width: 29.33333%; -} + width: 29.33333%; } .col-5-sm { - width: 37.66667%; -} + width: 37.66667%; } .col-6-sm { - width: 46%; -} + width: 46%; } .col-7-sm { - width: 54.33333%; -} + width: 54.33333%; } .col-8-sm { - width: 62.66667%; -} + width: 62.66667%; } .col-9-sm { - width: 71%; -} + width: 71%; } .col-10-sm { - width: 79.33333%; -} + width: 79.33333%; } .col-11-sm { - width: 87.66667%; -} + width: 87.66667%; } .col-12-sm { - width: 96%; -} + width: 96%; } @media only screen and (min-width: 45em) { .col-1 { - width: 4.33333%; - } + width: 4.33333%; } .col-2 { - width: 12.66667%; - } + width: 12.66667%; } .col-3 { - width: 21%; - } + width: 21%; } .col-4 { - width: 29.33333%; - } + width: 29.33333%; } .col-5 { - width: 37.66667%; - } + width: 37.66667%; } .col-6 { - width: 46%; - } + width: 46%; } .col-7 { - width: 54.33333%; - } + width: 54.33333%; } .col-8 { - width: 62.66667%; - } + width: 62.66667%; } .col-9 { - width: 71%; - } + width: 71%; } .col-10 { - width: 79.33333%; - } + width: 79.33333%; } .col-11 { - width: 87.66667%; - } + width: 87.66667%; } .col-12 { - width: 96%; - } + width: 96%; } .hidden-sm { - display: block; - } -} + display: block; } } diff --git a/simple-grid.min.css b/simple-grid.min.css index cee6d4e..7032156 100644 --- a/simple-grid.min.css +++ b/simple-grid.min.css @@ -1 +1 @@ -@import url(https://fonts.googleapis.com/css?family=Lato:400,300,300italic,400italic,700,700italic);html,body{height:100%;width:100%;margin:0;padding:0;left:0;top:0;font-size:100%}*{font-family:"Lato",Helvetica,sans-serif;color:#333447;line-height:1.5}h1{font-size:2.5rem}h2{font-size:2rem}h3{font-size:1.375rem}h4{font-size:1.125rem}h5{font-size:1rem}h6{font-size:0.875rem}p{font-size:1.125rem;font-weight:200;line-height:1.8}.font-light{font-weight:300}.font-regular{font-weight:400}.font-heavy{font-weight:700}.left{text-align:left}.right{text-align:right}.center{text-align:center;margin-left:auto;margin-right:auto}.justify{text-align:justify}.hidden-sm{display:none}.container{width:90%;margin-left:auto;margin-right:auto}@media only screen and (min-width:33.75em){.container{width:80%}}@media only screen and (min-width:60em){.container{width:75%;max-width:60rem}}.row{position:relative;width:100%}.row [class^="col"]{float:left;margin:0.5rem 2%;min-height:0.125rem}.row::after{content:"";display:table;clear:both}.col-1,.col-2,.col-3,.col-4,.col-5,.col-6,.col-7,.col-8,.col-9,.col-10,.col-11,.col-12{width:96%}.col-1-sm{width:4.33333%}.col-2-sm{width:12.66667%}.col-3-sm{width:21%}.col-4-sm{width:29.33333%}.col-5-sm{width:37.66667%}.col-6-sm{width:46%}.col-7-sm{width:54.33333%}.col-8-sm{width:62.66667%}.col-9-sm{width:71%}.col-10-sm{width:79.33333%}.col-11-sm{width:87.66667%}.col-12-sm{width:96%}@media only screen and (min-width:45em){.col-1{width:4.33333%}.col-2{width:12.66667%}.col-3{width:21%}.col-4{width:29.33333%}.col-5{width:37.66667%}.col-6{width:46%}.col-7{width:54.33333%}.col-8{width:62.66667%}.col-9{width:71%}.col-10{width:79.33333%}.col-11{width:87.66667%}.col-12{width:96%}.hidden-sm{display:block}} \ No newline at end of file +@import url(https://fonts.googleapis.com/css?family=Lato:400,300,300italic,400italic,700,700italic);html,body{height:100%;width:100%;margin:0;padding:0;left:0;top:0;font-size:100%}*{font-family:"Lato",Helvetica,sans-serif;color:#333447;line-height:1.5}h1{font-size:2.5rem}h2{font-size:2rem}h3{font-size:1.375rem}h4{font-size:1.125rem}h5{font-size:1rem}h6{font-size:0.875rem}p{font-size:1.125rem;font-weight:200;line-height:1.8}.font-light{font-weight:300}.font-regular{font-weight:400}.font-heavy{font-weight:700}.left{text-align:left}.right{text-align:right}.center{text-align:center;margin-left:auto;margin-right:auto}.justify{text-align:justify}.hidden-sm{display:none}.container{width:90%;margin-left:auto;margin-right:auto}@media only screen and (min-width:33.75em){.container{width:80%}}@media only screen and (min-width:60em){.container{width:75%;max-width:60rem}}.row{position:relative;width:100%}.row{position:relative;width:100%}.row:after{content:"";display:table;clear:both}.row .col-1,.row .col-1-sm,.row .col-2,.row .col-2-sm,.row .col-3,.row .col-3-sm,.row .col-4,.row .col-4-sm,.row .col-5,.row .col-5-sm,.row .col-6,.row .col-6-sm,.row .col-7,.row .col-7-sm,.row .col-8,.row .col-8-sm,.row .col-9,.row .col-9-sm,.row .col-10,.row .col-10-sm,.row .col-11,.row .col-11-sm,.row .col-12,.row .col-12-sm{float:left;margin:0.5rem 2%;min-height:0.125rem}.row::after{content:"";display:table;clear:both}.col-1,.col-2,.col-3,.col-4,.col-5,.col-6,.col-7,.col-8,.col-9,.col-10,.col-11,.col-12{width:96%}.col-1-sm{width:4.33333%}.col-2-sm{width:12.66667%}.col-3-sm{width:21%}.col-4-sm{width:29.33333%}.col-5-sm{width:37.66667%}.col-6-sm{width:46%}.col-7-sm{width:54.33333%}.col-8-sm{width:62.66667%}.col-9-sm{width:71%}.col-10-sm{width:79.33333%}.col-11-sm{width:87.66667%}.col-12-sm{width:96%}@media only screen and (min-width:45em){.col-1{width:4.33333%}.col-2{width:12.66667%}.col-3{width:21%}.col-4{width:29.33333%}.col-5{width:37.66667%}.col-6{width:46%}.col-7{width:54.33333%}.col-8{width:62.66667%}.col-9{width:71%}.col-10{width:79.33333%}.col-11{width:87.66667%}.col-12{width:96%}.hidden-sm{display:block}} \ No newline at end of file diff --git a/the-grid.scss b/the-grid.scss index 5157d64..64e2bef 100644 --- a/the-grid.scss +++ b/the-grid.scss @@ -1,17 +1,18 @@ // grid -$width: 96%; -$gutter: 4%; -$breakpoint-small: 33.75em; // 540px -$breakpoint-med: 45em; // 720px -$breakpoint-large: 60em; // 960px +$container_width: 90% !default; +$width: 96% !default; +$gutter: 4% !default; +$breakpoint-small: 33.75em !default; // 540px +$breakpoint-med: 45em !default; // 720px +$breakpoint-large: 60em !default; // 960px .hidden-sm { display: none; } .container { - width: 90%; + width: $container_width; margin-left: auto; margin-right: auto; @@ -30,10 +31,33 @@ $breakpoint-large: 60em; // 960px width: 100%; } -.row [class^="col"] { - float: left; - margin: 0.5rem 2%; - min-height: 0.125rem; +.row { + position: relative; + width: 100%; + + &:after { + content: ""; + display: table; + clear: both; + } + + .col-1, .col-1-sm, + .col-2, .col-2-sm, + .col-3, .col-3-sm, + .col-4, .col-4-sm, + .col-5, .col-5-sm, + .col-6, .col-6-sm, + .col-7, .col-7-sm, + .col-8, .col-8-sm, + .col-9, .col-9-sm, + .col-10, .col-10-sm, + .col-11, .col-11-sm, + .col-12, .col-12-sm{ + float: left; + margin: 0.5rem 2%; + min-height: 0.125rem; + } + } .row::after {