From 2ac2c6d803f99513307bcde5cd8de02967bd5ea7 Mon Sep 17 00:00:00 2001 From: Jaclyn Tan Date: Sat, 10 Dec 2016 01:28:37 +0800 Subject: [PATCH 1/9] Major overhaul of the CSS and structure This update includes: - Major overhaul and reformatting of the grid system using sass. - Added a package.json and gulp file - Added a new pdate.html file in the layouts folder explaining the changes. Disclaimer: I am really new to Github and Markdown so the doc is just in html for now. --- _layouts/default.html | 27 - _sass/grid-basics.scss | 38 -- _sass/grid-columns.scss | 13 - docs.css | 504 +++++++++++++----- gulpfile.js | 43 ++ layouts/default.html | 30 ++ layouts/update.html | 71 +++ package.json | 36 ++ sass/_grid-basics.scss | 46 ++ sass/_grid-columns.scss | 11 + .../_grid-extras.scss | 15 +- sass/_grid-vars.scss | 9 + sass/table-grid.scss | 10 + table-grid.css | 130 +++++ table-grid.min.css | 1 + table-grid.scss | 12 - 16 files changed, 764 insertions(+), 232 deletions(-) delete mode 100644 _layouts/default.html delete mode 100644 _sass/grid-basics.scss delete mode 100644 _sass/grid-columns.scss create mode 100755 gulpfile.js create mode 100644 layouts/default.html create mode 100644 layouts/update.html create mode 100755 package.json create mode 100644 sass/_grid-basics.scss create mode 100644 sass/_grid-columns.scss rename _sass/grid-extras.scss => sass/_grid-extras.scss (53%) create mode 100644 sass/_grid-vars.scss create mode 100644 sass/table-grid.scss create mode 100644 table-grid.css create mode 100644 table-grid.min.css delete mode 100644 table-grid.scss diff --git a/_layouts/default.html b/_layouts/default.html deleted file mode 100644 index 6c200e2..0000000 --- a/_layouts/default.html +++ /dev/null @@ -1,27 +0,0 @@ - - - - - - Table Grid by @mdo - - - - - - -
-
-

- @mdo/table-grid -

-

This is a serious-fun-dumb-useful experiment for writing a simple, responsive, and mobile-first CSS grid system. With tables.

-
-
- -
- {{ content }} -
- - - diff --git a/_sass/grid-basics.scss b/_sass/grid-basics.scss deleted file mode 100644 index 6c80ca1..0000000 --- a/_sass/grid-basics.scss +++ /dev/null @@ -1,38 +0,0 @@ -// -// Container -// - -// Holds and centers the site content -.container { - max-width: 940px; - margin-right: auto; - margin-left: auto; -} - - -// -// Grid classes -// - -@media (min-width: 600px) { - // Add `.grid` for the table - .grid { - display: table; - width: 100%; - table-layout: fixed; - } - - // Add `.col` for the table cells, or columns - .col { - display: table-cell; - } - - // Padded columns - .grid-padded { - margin-left: -1rem; - margin-right: -1rem; - } - .grid-padded .grid { - border-spacing: 1rem 0; - } -} diff --git a/_sass/grid-columns.scss b/_sass/grid-columns.scss deleted file mode 100644 index 1bde3fd..0000000 --- a/_sass/grid-columns.scss +++ /dev/null @@ -1,13 +0,0 @@ -@media (min-width: 600px) { - .col-1 { width: 8.333333%; } - .col-2 { width: 16.666667%; } - .col-3 { width: 25%; } - .col-4 { width: 33.333333%; } - .col-5 { width: 41.666667%; } - .col-6 { width: 50%; } - .col-7 { width: 58.333333%; } - .col-8 { width: 66.666667%; } - .col-9 { width: 75%; } - .col-10 { width: 83.333333%; } - .col-11 { width: 91.666667%; } -} diff --git a/docs.css b/docs.css index d003566..d9a1ac6 100644 --- a/docs.css +++ b/docs.css @@ -2,224 +2,448 @@ * Styles for the Table Grid docs. */ +/*update*/ +.container-update { + padding: 0; +} + +.grid-padded { + margin-top:30px; + margin-bottom: 30px; +} + +.grid-aligned .grid{ + height: 400px; +} + html { - font-size: 14px; + font-size: 14px; } + @media (min-width: 600px) { - html { - font-size: 18px; - } + html { + font-size: 18px; + } } body { - margin: 0; - padding-bottom: 3rem; - font: 1rem/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", Arial, sans-serif; - color: #555; - text-align: center; - background-color: #fff; + margin: 0; + padding-bottom: 3rem; + font: 1rem/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", Arial, sans-serif; + color: #555; + text-align: center; + background-color: #fff; } .container { - max-width: 54rem; - padding: 0 1rem; + max-width: 54rem; + padding: 0 1rem; } a { - color: #1874cd; - text-decoration: none; + color: #1874cd; + text-decoration: none; } + a:hover { - color: #104e8b; + color: #104e8b; +} + +ul { + display: table; + margin: 0 auto; } -h1, h2, h3 { - margin-top: 0; - margin-bottom: .5rem; - font-weight: 500; - line-height: 1.1; - color: #333; +h1, +h2, +h3 { + margin-top: 0; + margin-bottom: .5rem; + font-weight: 500; + line-height: 1.1; + color: #333; } + h1 { - font-size: 3rem; + font-size: 3rem; } + h1 small { - font-size: 80%; - color: #777; + font-size: 80%; + color: #777; } + h2 { - margin-top: 3rem; - font-size: 2rem; + margin-top: 3rem; + font-size: 2rem; } p { - margin-top: 0; - margin-bottom: 1rem; + margin-top: 0; + margin-bottom: 1rem; } + .container > p { - margin: .5rem auto 1rem; - max-width: 800px; + margin: .5rem auto 1rem; + max-width: 800px; } hr { - max-width: 100px; - margin: 3rem auto; - border: 0; - border-top: .1rem solid #eee; + max-width: 100px; + margin: 3rem auto; + border: 0; + border-top: .1rem solid #eee; } code { - padding: .15rem .3rem; - font-family: Menlo, "Courier New", monospace; - font-size: 90%; - color: #cd3333; - background-color: #f5f5f5; - border-radius: .15rem; + padding: .15rem .3rem; + font-family: Menlo, "Courier New", monospace; + font-size: 90%; + color: #cd3333; + background-color: #f5f5f5; + border-radius: .15rem; } + /* Display utility classes */ + .inline-block { - display: inline-block; + display: inline-block; } + /* Masthead */ + .masthead { - padding: 4rem 1rem; - font-weight: 300; - color: rgba(255,255,255,.65); - text-align: center; - background-color: #b94a48; + padding: 4rem 1rem; + font-weight: 300; + color: rgba(255, 255, 255, .65); + text-align: center; + background-color: #b94a48; } + .masthead a, .masthead strong { - font-weight: normal; - color: #fff; + font-weight: normal; + color: #fff; } + .masthead p { - font-size: 1.25rem; + font-size: 1.25rem; } + /* Make it red for easy views */ + .grid-example { - margin-bottom: 1rem; + margin-bottom: 1rem; } + .grid-example .col { - line-height: 3; - text-align: center; - color: #333; - background-color: rgba(255,0,0,.15); + line-height: 3; + text-align: center; + color: #333; + background-color: rgba(255, 0, 0, .15); } + .grid-example .col:nth-child(odd) { - background-color: rgba(255,0,0,.3); + background-color: rgba(255, 0, 0, .3); } + /* Nested grid examples need outdenting because padding. */ + .grid-example .grid-example { - margin-top: .5rem; - margin-bottom: 0; + margin-top: .5rem; + margin-bottom: 0; } + /* Increase height of vertically centered example */ + .grid-example.grid-align-middle { - height: 200px; + height: 200px; } + .grid-example.grid-align-middle .col { - min-height: 3rem; - line-height: 1.5; + min-height: 3rem; + line-height: 1.5; } + /* Syntax */ -.hll { background-color: #ffc; } -.c { color: #999; } -.k { color: #069; } -.o { color: #555; } -.cm { color: #999; } -.cp { color: #099; } -.c1 { color: #999; } -.cs { color: #999; } -.gd { background-color: #fcc; border: 1px solid #c00; } -.ge { font-style: italic; } -.gr { color: #f00; } -.gh { color: #030; } -.gi { background-color: #cfc; border: 1px solid #0c0; } -.go { color: #aaa; } -.gp { color: #009; } -.gu { color: #030; } -.gt { color: #9c6; } -.kc { color: #069; } -.kd { color: #069; } -.kn { color: #069; } -.kp { color: #069; } -.kr { color: #069; } -.kt { color: #078; } -.m { color: #f60; } -.s { color: #d44950; } -.na { color: #4f9fcf; } -.nb { color: #366; } -.nc { color: #0a8; } -.no { color: #360; } -.nd { color: #99f; } -.ni { color: #999; } -.ne { color: #c00; } -.nf { color: #c0f; } -.nl { color: #99f; } -.nn { color: #0cf; } -.nt { color: #2f6f9f; } -.nv { color: #033; } -.ow { color: #000; } -.w { color: #bbb; } -.mf { color: #f60; } -.mh { color: #f60; } -.mi { color: #f60; } -.mo { color: #f60; } -.sb { color: #c30; } -.sc { color: #c30; } -.sd { font-style: italic; color: #c30; } -.s2 { color: #c30; } -.se { color: #c30; } -.sh { color: #c30; } -.si { color: #a00; } -.sx { color: #c30; } -.sr { color: #3aa; } -.s1 { color: #c30; } -.ss { color: #fc3; } -.bp { color: #366; } -.vc { color: #033; } -.vg { color: #033; } -.vi { color: #033; } -.il { color: #f60; } +.hll { + background-color: #ffc; +} + +.c { + color: #999; +} + +.k { + color: #069; +} + +.o { + color: #555; +} + +.cm { + color: #999; +} + +.cp { + color: #099; +} + +.c1 { + color: #999; +} + +.cs { + color: #999; +} + +.gd { + background-color: #fcc; + border: 1px solid #c00; +} + +.ge { + font-style: italic; +} + +.gr { + color: #f00; +} + +.gh { + color: #030; +} + +.gi { + background-color: #cfc; + border: 1px solid #0c0; +} + +.go { + color: #aaa; +} + +.gp { + color: #009; +} + +.gu { + color: #030; +} + +.gt { + color: #9c6; +} + +.kc { + color: #069; +} + +.kd { + color: #069; +} + +.kn { + color: #069; +} + +.kp { + color: #069; +} + +.kr { + color: #069; +} + +.kt { + color: #078; +} + +.m { + color: #f60; +} + +.s { + color: #d44950; +} + +.na { + color: #4f9fcf; +} + +.nb { + color: #366; +} + +.nc { + color: #0a8; +} + +.no { + color: #360; +} + +.nd { + color: #99f; +} + +.ni { + color: #999; +} + +.ne { + color: #c00; +} + +.nf { + color: #c0f; +} + +.nl { + color: #99f; +} + +.nn { + color: #0cf; +} + +.nt { + color: #2f6f9f; +} + +.nv { + color: #033; +} + +.ow { + color: #000; +} + +.w { + color: #bbb; +} + +.mf { + color: #f60; +} + +.mh { + color: #f60; +} + +.mi { + color: #f60; +} + +.mo { + color: #f60; +} + +.sb { + color: #c30; +} + +.sc { + color: #c30; +} + +.sd { + font-style: italic; + color: #c30; +} + +.s2 { + color: #c30; +} + +.se { + color: #c30; +} + +.sh { + color: #c30; +} + +.si { + color: #a00; +} + +.sx { + color: #c30; +} + +.sr { + color: #3aa; +} + +.s1 { + color: #c30; +} + +.ss { + color: #fc3; +} + +.bp { + color: #366; +} + +.vc { + color: #033; +} + +.vg { + color: #033; +} + +.vi { + color: #033; +} + +.il { + color: #f60; +} .css .o, .css .o + .nt, -.css .nt + .nt { color: #999; } - +.css .nt + .nt { + color: #999; +} .highlight { - padding: 1rem; - margin: 1rem -1rem; - font-size: 90%; - text-align: left; - background-color: #f7f7f9; + padding: 1rem; + margin: 1rem -1rem; + font-size: 90%; + text-align: left; + background-color: #f7f7f9; } @media (min-width: 600px) { - .highlight { - padding: 1.5rem; - margin-right: 0; - margin-left: 0; - } + .highlight { + padding: 1.5rem; + margin-right: 0; + margin-left: 0; + } } .highlight pre { - padding: 0; - margin-top: 0; - margin-bottom: 0; - background-color: transparent; - border: 0; + padding: 0; + margin-top: 0; + margin-bottom: 0; + background-color: transparent; + border: 0; } + .highlight pre code { - font-size: inherit; - color: #333; - background-color: transparent; -} + font-size: inherit; + color: #333; + background-color: transparent; +} \ No newline at end of file diff --git a/gulpfile.js b/gulpfile.js new file mode 100755 index 0000000..44a7143 --- /dev/null +++ b/gulpfile.js @@ -0,0 +1,43 @@ +var gulp = require('gulp'), + plumber = require('gulp-plumber'), + rename = require('gulp-rename'), + autoprefixer = require('gulp-autoprefixer'), + minifycss = require('gulp-minify-css'), + sass = require('gulp-sass'), + browserSync = require('browser-sync'); + +gulp.task('browser-sync', function () { + browserSync({ + proxy: "localhost:8888/table-grid/layouts/update.html" + }); +}); + +gulp.task('bs-reload', function () { + browserSync.reload(); +}); + + +gulp.task('styles', function () { + gulp.src(['sass/**/*.scss']) + .pipe(plumber({ + errorHandler: function (error) { + console.log(error.message); + this.emit('end'); + } + })) + .pipe(sass()) + .pipe(autoprefixer()) + .pipe(gulp.dest('./')) + .pipe(rename({ + suffix: '.min' + })) + .pipe(minifycss()) + .pipe(gulp.dest('./')) + .pipe(browserSync.reload()) +}); + + +gulp.task('default', ['browser-sync'], function () { + gulp.watch("sass/**/*.scss", ['styles']); + gulp.watch("layouts/**/*.html", ['bs-reload']); +}); \ No newline at end of file diff --git a/layouts/default.html b/layouts/default.html new file mode 100644 index 0000000..c09edbb --- /dev/null +++ b/layouts/default.html @@ -0,0 +1,30 @@ + + + + + + + Table Grid by @mdo + + + + + + + +
+
+

+ @mdo/table-grid +

+

This is a serious-fun-dumb-useful experiment for writing a simple, responsive, and mobile-first CSS grid system. With tables.

+
+
+ +
+ {{ content }} +
+ + + + \ No newline at end of file diff --git a/layouts/update.html b/layouts/update.html new file mode 100644 index 0000000..1b8ee05 --- /dev/null +++ b/layouts/update.html @@ -0,0 +1,71 @@ + + + + + + + Table Grid by @mdo + + + + + + +
+
+

+ @mdo/table-grid +

+

This is a serious-fun-dumb-useful experiment for writing a simple, responsive, and mobile-first CSS grid system. With tables.

+
+
+ +

Sass variables

+ Only 4 variables needed: + + +
+

Improved gutters

Large gutters without affecting the first and last columns +
+
+
col
+
col
+
col
+
+
+ +

# Columns

Make as many or as little columns as the design calls for + +
+
+
col-3
+
col-1
+
col-4
+
col-1
+
col-3
+
+
+ +

Column padding and alignment

Add padding to a column by adding '.padded' to the .col tag.
+ Align content in each column easily by adding '.align-top, .align-middle, or .align-bottom' to the .col tag. +
+
+
Easier
+
to
+
align and pad
+
than
+
flexbox
+
+
+ + +
+ + + + \ No newline at end of file diff --git a/package.json b/package.json new file mode 100755 index 0000000..ddc393c --- /dev/null +++ b/package.json @@ -0,0 +1,36 @@ +{ + "name": "table-grid", + "version": "1.0.0", + "description": "The ultimate lightweight grid", + "main": "gulpfile.js", + "keywords": [ + "grid", + "scss", + "css" + ], + "contributors": [ + { + "name": "Jaclyn Tan", + "url": "http://jaclyntan.com", + "email": "heyj@jaclyntan.com" + } + ], + "author": "Mark Otto", + "repository": { + "type": "git", + "url": "http://mdo.fm" + }, + "licenses": [{ + "type": "MIT", + "url": "https://opensource.org/licenses/MIT" + }], + "devDependencies": { + "browser-sync": "*", + "gulp-autoprefixer": "*", + "gulp-minify-css": "*", + "gulp-plumber": "*", + "gulp-rename": "*", + "gulp-sass": "*", + "gulp": "*" + } +} \ No newline at end of file diff --git a/sass/_grid-basics.scss b/sass/_grid-basics.scss new file mode 100644 index 0000000..afe5fc1 --- /dev/null +++ b/sass/_grid-basics.scss @@ -0,0 +1,46 @@ +// +// Container +// + +// Holds and centers the site content +// overflow-x is used to fix the container's width when .grid-padded is used. This ensures the inner columns have gutters whilst first and last columns meet the container's edge (as is what should be expected of a grid system). + +.container { + max-width: $container-width; + margin-right: auto; + margin-left: auto; + overflow-x: hidden; +} + +// +// Grid classes +// +@media (min-width: $mobile-breakpoint) { + // Add '.grid' for the table + .grid { + display: table; + width: 100%; + table-layout: fixed; + + //add '.padded' for inner gutters + .padded { + padding: $gutter-width / 2; + } + + .grid-padded & { + border-spacing: $gutter-width 0; + } + } + + // Add '.col' for the table cells, or columns + .col { + display: table-cell; + background: pink; + } + + // Padded columns + .grid-padded { + margin-left: -$gutter-width; + margin-right: -$gutter-width; + } +} \ No newline at end of file diff --git a/sass/_grid-columns.scss b/sass/_grid-columns.scss new file mode 100644 index 0000000..80d6412 --- /dev/null +++ b/sass/_grid-columns.scss @@ -0,0 +1,11 @@ +//Make the columns + mobile styles +@for $i from 1 through ($column-count) { + .col-#{$i} { + width: 100%; + } + @media (min-width: $mobile-breakpoint) { + .col-#{$i} { + width: #{ (100 / $column-count) * $i + '%'}; + } + } +} diff --git a/_sass/grid-extras.scss b/sass/_grid-extras.scss similarity index 53% rename from _sass/grid-extras.scss rename to sass/_grid-extras.scss index 3206d9c..cff8d2b 100644 --- a/_sass/grid-extras.scss +++ b/sass/_grid-extras.scss @@ -2,8 +2,19 @@ // // Requires content within the column to be inline or inline-block. -.grid-align-middle .col { - vertical-align: middle; + +.col { + &.align-top { + vertical-align: top; + } + + &.align-middle { + vertical-align: middle; + } + + &.align-bottom { + vertical-align: bottom; + } } diff --git a/sass/_grid-vars.scss b/sass/_grid-vars.scss new file mode 100644 index 0000000..3571954 --- /dev/null +++ b/sass/_grid-vars.scss @@ -0,0 +1,9 @@ + +$mobile-breakpoint:600px; + +//container +$container-width:1400px; +$gutter-width: 40px; + +//columns +$column-count:13; \ No newline at end of file diff --git a/sass/table-grid.scss b/sass/table-grid.scss new file mode 100644 index 0000000..42ee3f2 --- /dev/null +++ b/sass/table-grid.scss @@ -0,0 +1,10 @@ +/*-------------------------------------------------------------- +## Table Grid +--------------------------------------------------------------*/ +@import "grid-vars"; +@import "grid-basics"; +@import "grid-columns"; +@import "grid-extras"; + + + diff --git a/table-grid.css b/table-grid.css new file mode 100644 index 0000000..f4828e2 --- /dev/null +++ b/table-grid.css @@ -0,0 +1,130 @@ +/*-------------------------------------------------------------- +## Table Grid +--------------------------------------------------------------*/ +.container { + max-width: 1400px; + margin-right: auto; + margin-left: auto; + overflow-x: hidden; } + +@media (min-width: 600px) { + .grid { + display: table; + width: 100%; + table-layout: fixed; } + .grid .padded { + padding: 20px; } + .grid-padded .grid { + border-spacing: 40px 0; } + .col { + display: table-cell; + background: pink; } + .grid-padded { + margin-left: -40px; + margin-right: -40px; } } + +.col-1 { + width: 100%; } + +@media (min-width: 600px) { + .col-1 { + width: 7.69231%; } } + +.col-2 { + width: 100%; } + +@media (min-width: 600px) { + .col-2 { + width: 15.38462%; } } + +.col-3 { + width: 100%; } + +@media (min-width: 600px) { + .col-3 { + width: 23.07692%; } } + +.col-4 { + width: 100%; } + +@media (min-width: 600px) { + .col-4 { + width: 30.76923%; } } + +.col-5 { + width: 100%; } + +@media (min-width: 600px) { + .col-5 { + width: 38.46154%; } } + +.col-6 { + width: 100%; } + +@media (min-width: 600px) { + .col-6 { + width: 46.15385%; } } + +.col-7 { + width: 100%; } + +@media (min-width: 600px) { + .col-7 { + width: 53.84615%; } } + +.col-8 { + width: 100%; } + +@media (min-width: 600px) { + .col-8 { + width: 61.53846%; } } + +.col-9 { + width: 100%; } + +@media (min-width: 600px) { + .col-9 { + width: 69.23077%; } } + +.col-10 { + width: 100%; } + +@media (min-width: 600px) { + .col-10 { + width: 76.92308%; } } + +.col-11 { + width: 100%; } + +@media (min-width: 600px) { + .col-11 { + width: 84.61538%; } } + +.col-12 { + width: 100%; } + +@media (min-width: 600px) { + .col-12 { + width: 92.30769%; } } + +.col-13 { + width: 100%; } + +@media (min-width: 600px) { + .col-13 { + width: 100%; } } + +.col.align-top { + vertical-align: top; } + +.col.align-middle { + vertical-align: middle; } + +.col.align-bottom { + vertical-align: bottom; } + +.grid-reverse { + direction: rtl; } + +.grid-reverse .col { + direction: ltr; } diff --git a/table-grid.min.css b/table-grid.min.css new file mode 100644 index 0000000..4d9f300 --- /dev/null +++ b/table-grid.min.css @@ -0,0 +1 @@ +.container{max-width:1400px;margin-right:auto;margin-left:auto;overflow-x:hidden}.col-1{width:100%}@media (min-width:600px){.grid{display:table;width:100%;table-layout:fixed}.grid .padded{padding:20px}.grid-padded .grid{border-spacing:40px 0}.col{display:table-cell;background:pink}.grid-padded{margin-left:-40px;margin-right:-40px}.col-1{width:7.69231%}}.col-2{width:100%}@media (min-width:600px){.col-2{width:15.38462%}}.col-3{width:100%}@media (min-width:600px){.col-3{width:23.07692%}}.col-4{width:100%}@media (min-width:600px){.col-4{width:30.76923%}}.col-5{width:100%}@media (min-width:600px){.col-5{width:38.46154%}}.col-6{width:100%}@media (min-width:600px){.col-6{width:46.15385%}}.col-7{width:100%}@media (min-width:600px){.col-7{width:53.84615%}}.col-8{width:100%}@media (min-width:600px){.col-8{width:61.53846%}}.col-9{width:100%}@media (min-width:600px){.col-9{width:69.23077%}}.col-10{width:100%}@media (min-width:600px){.col-10{width:76.92308%}}.col-11{width:100%}@media (min-width:600px){.col-11{width:84.61538%}}.col-12{width:100%}@media (min-width:600px){.col-12{width:92.30769%}.col-13{width:100%}}.col-13{width:100%}.col.align-top{vertical-align:top}.col.align-middle{vertical-align:middle}.col.align-bottom{vertical-align:bottom}.grid-reverse{direction:rtl}.grid-reverse .col{direction:ltr} \ No newline at end of file diff --git a/table-grid.scss b/table-grid.scss deleted file mode 100644 index 6aed444..0000000 --- a/table-grid.scss +++ /dev/null @@ -1,12 +0,0 @@ ---- -# Front matter comment to ensure Jekyll properly reads file. ---- - -/*! - * table-grid (http://mdo.github.io/table-grid) - * Released under MIT, (c) 2014 Mark Otto - */ - -@import "grid-basics"; -@import "grid-columns"; -@import "grid-extras"; From 7aae2ac7802e9759d02cb540cdc14ba4ffb8cf66 Mon Sep 17 00:00:00 2001 From: Jaclyn Tan Date: Sat, 10 Dec 2016 02:57:43 +0800 Subject: [PATCH 2/9] Minor edits --- docs.css | 2 +- layouts/update.html | 7 ++----- sass/_grid-basics.scss | 3 ++- table-grid.css | 3 +-- table-grid.min.css | 2 +- 5 files changed, 7 insertions(+), 10 deletions(-) diff --git a/docs.css b/docs.css index d9a1ac6..8eb693d 100644 --- a/docs.css +++ b/docs.css @@ -12,7 +12,7 @@ margin-bottom: 30px; } -.grid-aligned .grid{ +.grid-aligned.grid { height: 400px; } diff --git a/layouts/update.html b/layouts/update.html index 1b8ee05..dd487ea 100644 --- a/layouts/update.html +++ b/layouts/update.html @@ -44,7 +44,7 @@

# Columns

Make as many or as little columns as the design calls for
col-3
-
col-1
+
col-2
col-4
col-1
col-3
@@ -53,16 +53,13 @@

# Columns

Make as many or as little columns as the design calls for

Column padding and alignment

Add padding to a column by adding '.padded' to the .col tag.
Align content in each column easily by adding '.align-top, .align-middle, or .align-bottom' to the .col tag. -
-
+
Easier
to
align and pad
than
flexbox
-
-
diff --git a/sass/_grid-basics.scss b/sass/_grid-basics.scss index afe5fc1..0ac1674 100644 --- a/sass/_grid-basics.scss +++ b/sass/_grid-basics.scss @@ -35,10 +35,11 @@ // Add '.col' for the table cells, or columns .col { display: table-cell; - background: pink; +// background: pink; } // Padded columns + // Use as a wrapper around '.grid' to create column spacing .grid-padded { margin-left: -$gutter-width; margin-right: -$gutter-width; diff --git a/table-grid.css b/table-grid.css index f4828e2..b37582e 100644 --- a/table-grid.css +++ b/table-grid.css @@ -17,8 +17,7 @@ .grid-padded .grid { border-spacing: 40px 0; } .col { - display: table-cell; - background: pink; } + display: table-cell; } .grid-padded { margin-left: -40px; margin-right: -40px; } } diff --git a/table-grid.min.css b/table-grid.min.css index 4d9f300..5684926 100644 --- a/table-grid.min.css +++ b/table-grid.min.css @@ -1 +1 @@ -.container{max-width:1400px;margin-right:auto;margin-left:auto;overflow-x:hidden}.col-1{width:100%}@media (min-width:600px){.grid{display:table;width:100%;table-layout:fixed}.grid .padded{padding:20px}.grid-padded .grid{border-spacing:40px 0}.col{display:table-cell;background:pink}.grid-padded{margin-left:-40px;margin-right:-40px}.col-1{width:7.69231%}}.col-2{width:100%}@media (min-width:600px){.col-2{width:15.38462%}}.col-3{width:100%}@media (min-width:600px){.col-3{width:23.07692%}}.col-4{width:100%}@media (min-width:600px){.col-4{width:30.76923%}}.col-5{width:100%}@media (min-width:600px){.col-5{width:38.46154%}}.col-6{width:100%}@media (min-width:600px){.col-6{width:46.15385%}}.col-7{width:100%}@media (min-width:600px){.col-7{width:53.84615%}}.col-8{width:100%}@media (min-width:600px){.col-8{width:61.53846%}}.col-9{width:100%}@media (min-width:600px){.col-9{width:69.23077%}}.col-10{width:100%}@media (min-width:600px){.col-10{width:76.92308%}}.col-11{width:100%}@media (min-width:600px){.col-11{width:84.61538%}}.col-12{width:100%}@media (min-width:600px){.col-12{width:92.30769%}.col-13{width:100%}}.col-13{width:100%}.col.align-top{vertical-align:top}.col.align-middle{vertical-align:middle}.col.align-bottom{vertical-align:bottom}.grid-reverse{direction:rtl}.grid-reverse .col{direction:ltr} \ No newline at end of file +.container{max-width:1400px;margin-right:auto;margin-left:auto;overflow-x:hidden}.col-1{width:100%}@media (min-width:600px){.grid{display:table;width:100%;table-layout:fixed}.grid .padded{padding:20px}.grid-padded .grid{border-spacing:40px 0}.col{display:table-cell}.grid-padded{margin-left:-40px;margin-right:-40px}.col-1{width:7.69231%}}.col-2{width:100%}@media (min-width:600px){.col-2{width:15.38462%}}.col-3{width:100%}@media (min-width:600px){.col-3{width:23.07692%}}.col-4{width:100%}@media (min-width:600px){.col-4{width:30.76923%}}.col-5{width:100%}@media (min-width:600px){.col-5{width:38.46154%}}.col-6{width:100%}@media (min-width:600px){.col-6{width:46.15385%}}.col-7{width:100%}@media (min-width:600px){.col-7{width:53.84615%}}.col-8{width:100%}@media (min-width:600px){.col-8{width:61.53846%}}.col-9{width:100%}@media (min-width:600px){.col-9{width:69.23077%}}.col-10{width:100%}@media (min-width:600px){.col-10{width:76.92308%}}.col-11{width:100%}@media (min-width:600px){.col-11{width:84.61538%}}.col-12{width:100%}@media (min-width:600px){.col-12{width:92.30769%}.col-13{width:100%}}.col-13{width:100%}.col.align-top{vertical-align:top}.col.align-middle{vertical-align:middle}.col.align-bottom{vertical-align:bottom}.grid-reverse{direction:rtl}.grid-reverse .col{direction:ltr} \ No newline at end of file From 5c9ca8c7a1c8a072b6a9c1f8b7d9d43a59755779 Mon Sep 17 00:00:00 2001 From: Jaclyn Tan Date: Mon, 12 Dec 2016 23:30:46 +0800 Subject: [PATCH 3/9] Fixed a bug with the container, fixed plumber in gulpfile MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit If the container was wrapped with a div that had no display set, it would show no content. The fix involves setting the container’s display and width while also hiding the overflow from the inner margins. I’ve also fixed an error with the gulpfile’s plumber. --- gulpfile.js | 4 +++- sass/_grid-basics.scss | 10 ++++++---- table-grid.css | 7 +++++-- table-grid.min.css | 2 +- 4 files changed, 15 insertions(+), 8 deletions(-) diff --git a/gulpfile.js b/gulpfile.js index 44a7143..e055e08 100755 --- a/gulpfile.js +++ b/gulpfile.js @@ -33,7 +33,9 @@ gulp.task('styles', function () { })) .pipe(minifycss()) .pipe(gulp.dest('./')) - .pipe(browserSync.reload()) + .pipe(browserSync.reload({ + stream: true + })) }); diff --git a/sass/_grid-basics.scss b/sass/_grid-basics.scss index 0ac1674..98b1c74 100644 --- a/sass/_grid-basics.scss +++ b/sass/_grid-basics.scss @@ -7,9 +7,11 @@ .container { max-width: $container-width; - margin-right: auto; - margin-left: auto; - overflow-x: hidden; + margin-right: auto; + margin-left: auto; + overflow: hidden; // avoids scrollbars created by the negative margins + display: table; // this fixes the issue of disappearing content if it is surrounded by a wrapping div with no display set + width: 100 // make sure the container is always at max-width } // @@ -35,7 +37,7 @@ // Add '.col' for the table cells, or columns .col { display: table-cell; -// background: pink; + background: pink; } // Padded columns diff --git a/table-grid.css b/table-grid.css index b37582e..9109c65 100644 --- a/table-grid.css +++ b/table-grid.css @@ -5,7 +5,9 @@ max-width: 1400px; margin-right: auto; margin-left: auto; - overflow-x: hidden; } + overflow: hidden; + display: table; + width: 100; } @media (min-width: 600px) { .grid { @@ -17,7 +19,8 @@ .grid-padded .grid { border-spacing: 40px 0; } .col { - display: table-cell; } + display: table-cell; + background: pink; } .grid-padded { margin-left: -40px; margin-right: -40px; } } diff --git a/table-grid.min.css b/table-grid.min.css index 5684926..143004b 100644 --- a/table-grid.min.css +++ b/table-grid.min.css @@ -1 +1 @@ -.container{max-width:1400px;margin-right:auto;margin-left:auto;overflow-x:hidden}.col-1{width:100%}@media (min-width:600px){.grid{display:table;width:100%;table-layout:fixed}.grid .padded{padding:20px}.grid-padded .grid{border-spacing:40px 0}.col{display:table-cell}.grid-padded{margin-left:-40px;margin-right:-40px}.col-1{width:7.69231%}}.col-2{width:100%}@media (min-width:600px){.col-2{width:15.38462%}}.col-3{width:100%}@media (min-width:600px){.col-3{width:23.07692%}}.col-4{width:100%}@media (min-width:600px){.col-4{width:30.76923%}}.col-5{width:100%}@media (min-width:600px){.col-5{width:38.46154%}}.col-6{width:100%}@media (min-width:600px){.col-6{width:46.15385%}}.col-7{width:100%}@media (min-width:600px){.col-7{width:53.84615%}}.col-8{width:100%}@media (min-width:600px){.col-8{width:61.53846%}}.col-9{width:100%}@media (min-width:600px){.col-9{width:69.23077%}}.col-10{width:100%}@media (min-width:600px){.col-10{width:76.92308%}}.col-11{width:100%}@media (min-width:600px){.col-11{width:84.61538%}}.col-12{width:100%}@media (min-width:600px){.col-12{width:92.30769%}.col-13{width:100%}}.col-13{width:100%}.col.align-top{vertical-align:top}.col.align-middle{vertical-align:middle}.col.align-bottom{vertical-align:bottom}.grid-reverse{direction:rtl}.grid-reverse .col{direction:ltr} \ No newline at end of file +.container{max-width:1400px;margin-right:auto;margin-left:auto;overflow:hidden;display:table;width:100}.col-1{width:100%}@media (min-width:600px){.grid{display:table;width:100%;table-layout:fixed}.grid .padded{padding:20px}.grid-padded .grid{border-spacing:40px 0}.col{display:table-cell;background:pink}.grid-padded{margin-left:-40px;margin-right:-40px}.col-1{width:7.69231%}}.col-2{width:100%}@media (min-width:600px){.col-2{width:15.38462%}}.col-3{width:100%}@media (min-width:600px){.col-3{width:23.07692%}}.col-4{width:100%}@media (min-width:600px){.col-4{width:30.76923%}}.col-5{width:100%}@media (min-width:600px){.col-5{width:38.46154%}}.col-6{width:100%}@media (min-width:600px){.col-6{width:46.15385%}}.col-7{width:100%}@media (min-width:600px){.col-7{width:53.84615%}}.col-8{width:100%}@media (min-width:600px){.col-8{width:61.53846%}}.col-9{width:100%}@media (min-width:600px){.col-9{width:69.23077%}}.col-10{width:100%}@media (min-width:600px){.col-10{width:76.92308%}}.col-11{width:100%}@media (min-width:600px){.col-11{width:84.61538%}}.col-12{width:100%}@media (min-width:600px){.col-12{width:92.30769%}.col-13{width:100%}}.col-13{width:100%}.col.align-top{vertical-align:top}.col.align-middle{vertical-align:middle}.col.align-bottom{vertical-align:bottom}.grid-reverse{direction:rtl}.grid-reverse .col{direction:ltr} \ No newline at end of file From 5c8642fc375566387ac90ed53b59b9c0b0487eb4 Mon Sep 17 00:00:00 2001 From: Jaclyn Tan Date: Mon, 12 Dec 2016 23:32:47 +0800 Subject: [PATCH 4/9] Revert "Fixed a bug with the container, fixed plumber in gulpfile" This reverts commit 5c9ca8c7a1c8a072b6a9c1f8b7d9d43a59755779. --- gulpfile.js | 4 +--- sass/_grid-basics.scss | 10 ++++------ table-grid.css | 7 ++----- table-grid.min.css | 2 +- 4 files changed, 8 insertions(+), 15 deletions(-) diff --git a/gulpfile.js b/gulpfile.js index e055e08..44a7143 100755 --- a/gulpfile.js +++ b/gulpfile.js @@ -33,9 +33,7 @@ gulp.task('styles', function () { })) .pipe(minifycss()) .pipe(gulp.dest('./')) - .pipe(browserSync.reload({ - stream: true - })) + .pipe(browserSync.reload()) }); diff --git a/sass/_grid-basics.scss b/sass/_grid-basics.scss index 98b1c74..0ac1674 100644 --- a/sass/_grid-basics.scss +++ b/sass/_grid-basics.scss @@ -7,11 +7,9 @@ .container { max-width: $container-width; - margin-right: auto; - margin-left: auto; - overflow: hidden; // avoids scrollbars created by the negative margins - display: table; // this fixes the issue of disappearing content if it is surrounded by a wrapping div with no display set - width: 100 // make sure the container is always at max-width + margin-right: auto; + margin-left: auto; + overflow-x: hidden; } // @@ -37,7 +35,7 @@ // Add '.col' for the table cells, or columns .col { display: table-cell; - background: pink; +// background: pink; } // Padded columns diff --git a/table-grid.css b/table-grid.css index 9109c65..b37582e 100644 --- a/table-grid.css +++ b/table-grid.css @@ -5,9 +5,7 @@ max-width: 1400px; margin-right: auto; margin-left: auto; - overflow: hidden; - display: table; - width: 100; } + overflow-x: hidden; } @media (min-width: 600px) { .grid { @@ -19,8 +17,7 @@ .grid-padded .grid { border-spacing: 40px 0; } .col { - display: table-cell; - background: pink; } + display: table-cell; } .grid-padded { margin-left: -40px; margin-right: -40px; } } diff --git a/table-grid.min.css b/table-grid.min.css index 143004b..5684926 100644 --- a/table-grid.min.css +++ b/table-grid.min.css @@ -1 +1 @@ -.container{max-width:1400px;margin-right:auto;margin-left:auto;overflow:hidden;display:table;width:100}.col-1{width:100%}@media (min-width:600px){.grid{display:table;width:100%;table-layout:fixed}.grid .padded{padding:20px}.grid-padded .grid{border-spacing:40px 0}.col{display:table-cell;background:pink}.grid-padded{margin-left:-40px;margin-right:-40px}.col-1{width:7.69231%}}.col-2{width:100%}@media (min-width:600px){.col-2{width:15.38462%}}.col-3{width:100%}@media (min-width:600px){.col-3{width:23.07692%}}.col-4{width:100%}@media (min-width:600px){.col-4{width:30.76923%}}.col-5{width:100%}@media (min-width:600px){.col-5{width:38.46154%}}.col-6{width:100%}@media (min-width:600px){.col-6{width:46.15385%}}.col-7{width:100%}@media (min-width:600px){.col-7{width:53.84615%}}.col-8{width:100%}@media (min-width:600px){.col-8{width:61.53846%}}.col-9{width:100%}@media (min-width:600px){.col-9{width:69.23077%}}.col-10{width:100%}@media (min-width:600px){.col-10{width:76.92308%}}.col-11{width:100%}@media (min-width:600px){.col-11{width:84.61538%}}.col-12{width:100%}@media (min-width:600px){.col-12{width:92.30769%}.col-13{width:100%}}.col-13{width:100%}.col.align-top{vertical-align:top}.col.align-middle{vertical-align:middle}.col.align-bottom{vertical-align:bottom}.grid-reverse{direction:rtl}.grid-reverse .col{direction:ltr} \ No newline at end of file +.container{max-width:1400px;margin-right:auto;margin-left:auto;overflow-x:hidden}.col-1{width:100%}@media (min-width:600px){.grid{display:table;width:100%;table-layout:fixed}.grid .padded{padding:20px}.grid-padded .grid{border-spacing:40px 0}.col{display:table-cell}.grid-padded{margin-left:-40px;margin-right:-40px}.col-1{width:7.69231%}}.col-2{width:100%}@media (min-width:600px){.col-2{width:15.38462%}}.col-3{width:100%}@media (min-width:600px){.col-3{width:23.07692%}}.col-4{width:100%}@media (min-width:600px){.col-4{width:30.76923%}}.col-5{width:100%}@media (min-width:600px){.col-5{width:38.46154%}}.col-6{width:100%}@media (min-width:600px){.col-6{width:46.15385%}}.col-7{width:100%}@media (min-width:600px){.col-7{width:53.84615%}}.col-8{width:100%}@media (min-width:600px){.col-8{width:61.53846%}}.col-9{width:100%}@media (min-width:600px){.col-9{width:69.23077%}}.col-10{width:100%}@media (min-width:600px){.col-10{width:76.92308%}}.col-11{width:100%}@media (min-width:600px){.col-11{width:84.61538%}}.col-12{width:100%}@media (min-width:600px){.col-12{width:92.30769%}.col-13{width:100%}}.col-13{width:100%}.col.align-top{vertical-align:top}.col.align-middle{vertical-align:middle}.col.align-bottom{vertical-align:bottom}.grid-reverse{direction:rtl}.grid-reverse .col{direction:ltr} \ No newline at end of file From f1bdabe3f01714d266305fb21ba7d280bd222d1a Mon Sep 17 00:00:00 2001 From: Jaclyn Tan Date: Mon, 12 Dec 2016 23:38:34 +0800 Subject: [PATCH 5/9] Fixed a bug with the container, fixed plumber in gulpfile MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit If the container was wrapped with a div that had no display set, it would show no content. The fix involves setting the container’s display and width while also hiding the overflow from the inner margins. I’ve also fixed an error with the gulpfile’s plumber. I’ve tested the grid on all the latest versions of Firefox, Safari, Chrome, Edge, and iOS and no issues so far. --- gulpfile.js | 4 +++- sass/_grid-basics.scss | 6 ++++-- table-grid.css | 4 +++- table-grid.min.css | 2 +- 4 files changed, 11 insertions(+), 5 deletions(-) diff --git a/gulpfile.js b/gulpfile.js index 44a7143..e055e08 100755 --- a/gulpfile.js +++ b/gulpfile.js @@ -33,7 +33,9 @@ gulp.task('styles', function () { })) .pipe(minifycss()) .pipe(gulp.dest('./')) - .pipe(browserSync.reload()) + .pipe(browserSync.reload({ + stream: true + })) }); diff --git a/sass/_grid-basics.scss b/sass/_grid-basics.scss index 0ac1674..6e3305b 100644 --- a/sass/_grid-basics.scss +++ b/sass/_grid-basics.scss @@ -7,9 +7,11 @@ .container { max-width: $container-width; - margin-right: auto; + margin-right: auto; margin-left: auto; - overflow-x: hidden; + overflow: hidden; // avoids scrollbars created by the negative margins + display: table; // this fixes the issue of disappearing content if it is surrounded by a wrapping div with no display set + width: 100%; // make sure the container is always at max-width } // diff --git a/table-grid.css b/table-grid.css index b37582e..af05150 100644 --- a/table-grid.css +++ b/table-grid.css @@ -5,7 +5,9 @@ max-width: 1400px; margin-right: auto; margin-left: auto; - overflow-x: hidden; } + overflow: hidden; + display: table; + width: 100%; } @media (min-width: 600px) { .grid { diff --git a/table-grid.min.css b/table-grid.min.css index 5684926..3a71c73 100644 --- a/table-grid.min.css +++ b/table-grid.min.css @@ -1 +1 @@ -.container{max-width:1400px;margin-right:auto;margin-left:auto;overflow-x:hidden}.col-1{width:100%}@media (min-width:600px){.grid{display:table;width:100%;table-layout:fixed}.grid .padded{padding:20px}.grid-padded .grid{border-spacing:40px 0}.col{display:table-cell}.grid-padded{margin-left:-40px;margin-right:-40px}.col-1{width:7.69231%}}.col-2{width:100%}@media (min-width:600px){.col-2{width:15.38462%}}.col-3{width:100%}@media (min-width:600px){.col-3{width:23.07692%}}.col-4{width:100%}@media (min-width:600px){.col-4{width:30.76923%}}.col-5{width:100%}@media (min-width:600px){.col-5{width:38.46154%}}.col-6{width:100%}@media (min-width:600px){.col-6{width:46.15385%}}.col-7{width:100%}@media (min-width:600px){.col-7{width:53.84615%}}.col-8{width:100%}@media (min-width:600px){.col-8{width:61.53846%}}.col-9{width:100%}@media (min-width:600px){.col-9{width:69.23077%}}.col-10{width:100%}@media (min-width:600px){.col-10{width:76.92308%}}.col-11{width:100%}@media (min-width:600px){.col-11{width:84.61538%}}.col-12{width:100%}@media (min-width:600px){.col-12{width:92.30769%}.col-13{width:100%}}.col-13{width:100%}.col.align-top{vertical-align:top}.col.align-middle{vertical-align:middle}.col.align-bottom{vertical-align:bottom}.grid-reverse{direction:rtl}.grid-reverse .col{direction:ltr} \ No newline at end of file +.col-1,.container{width:100%}.container{max-width:1400px;margin-right:auto;margin-left:auto;overflow:hidden;display:table}@media (min-width:600px){.grid{display:table;width:100%;table-layout:fixed}.grid .padded{padding:20px}.grid-padded .grid{border-spacing:40px 0}.col{display:table-cell}.grid-padded{margin-left:-40px;margin-right:-40px}.col-1{width:7.69231%}}.col-2{width:100%}@media (min-width:600px){.col-2{width:15.38462%}}.col-3{width:100%}@media (min-width:600px){.col-3{width:23.07692%}}.col-4{width:100%}@media (min-width:600px){.col-4{width:30.76923%}}.col-5{width:100%}@media (min-width:600px){.col-5{width:38.46154%}}.col-6{width:100%}@media (min-width:600px){.col-6{width:46.15385%}}.col-7{width:100%}@media (min-width:600px){.col-7{width:53.84615%}}.col-8{width:100%}@media (min-width:600px){.col-8{width:61.53846%}}.col-9{width:100%}@media (min-width:600px){.col-9{width:69.23077%}}.col-10{width:100%}@media (min-width:600px){.col-10{width:76.92308%}}.col-11{width:100%}@media (min-width:600px){.col-11{width:84.61538%}}.col-12{width:100%}@media (min-width:600px){.col-12{width:92.30769%}.col-13{width:100%}}.col-13{width:100%}.col.align-top{vertical-align:top}.col.align-middle{vertical-align:middle}.col.align-bottom{vertical-align:bottom}.grid-reverse{direction:rtl}.grid-reverse .col{direction:ltr} \ No newline at end of file From f3cdb0b37b2e5d96a337b96cb849a463a099be2c Mon Sep 17 00:00:00 2001 From: Jaclyn Tan Date: Mon, 12 Dec 2016 23:50:41 +0800 Subject: [PATCH 6/9] Added comments to the sass files --- sass/_grid-basics.scss | 5 ++--- sass/_grid-extras.scss | 4 +--- sass/_grid-vars.scss | 25 ++++++++++++++++++++++++- 3 files changed, 27 insertions(+), 7 deletions(-) diff --git a/sass/_grid-basics.scss b/sass/_grid-basics.scss index 6e3305b..7212e7b 100644 --- a/sass/_grid-basics.scss +++ b/sass/_grid-basics.scss @@ -3,7 +3,6 @@ // // Holds and centers the site content -// overflow-x is used to fix the container's width when .grid-padded is used. This ensures the inner columns have gutters whilst first and last columns meet the container's edge (as is what should be expected of a grid system). .container { max-width: $container-width; @@ -26,7 +25,7 @@ //add '.padded' for inner gutters .padded { - padding: $gutter-width / 2; + padding: $gutter-width / 2; //this can actually be any arbitrary number } .grid-padded & { @@ -37,7 +36,7 @@ // Add '.col' for the table cells, or columns .col { display: table-cell; -// background: pink; +// background: pink; //for debugging } // Padded columns diff --git a/sass/_grid-extras.scss b/sass/_grid-extras.scss index cff8d2b..bd83101 100644 --- a/sass/_grid-extras.scss +++ b/sass/_grid-extras.scss @@ -1,8 +1,6 @@ // Vertically center grid content -// -// Requires content within the column to be inline or inline-block. - +//append alignment class to the .col tag .col { &.align-top { vertical-align: top; diff --git a/sass/_grid-vars.scss b/sass/_grid-vars.scss index 3571954..5c64e32 100644 --- a/sass/_grid-vars.scss +++ b/sass/_grid-vars.scss @@ -1,3 +1,4 @@ +// Set your variables here $mobile-breakpoint:600px; @@ -6,4 +7,26 @@ $container-width:1400px; $gutter-width: 40px; //columns -$column-count:13; \ No newline at end of file +$column-count:13; + + +//Usage + +//With gutters +//
+//
+//
+//
Column
+//
Column
+//
+//
+//
+// +//No gutters +//
+//
+//
Column
+//
Column
+//
Column
+//
+//
\ No newline at end of file From a28a51b615fd479881609b9faba43068f0f06b21 Mon Sep 17 00:00:00 2001 From: Jaclyn Tan Date: Tue, 3 Jan 2017 18:02:13 +0800 Subject: [PATCH 7/9] Set theme jekyll-theme-cayman --- _config.yml | 2 ++ 1 file changed, 2 insertions(+) diff --git a/_config.yml b/_config.yml index 9f34f17..0572d0f 100644 --- a/_config.yml +++ b/_config.yml @@ -4,3 +4,5 @@ kramdown: auto_ids: true permalink: pretty + +theme: jekyll-theme-cayman \ No newline at end of file From 67f83c3a42e3e9deb68ea513b66f80d3193a85d4 Mon Sep 17 00:00:00 2001 From: Jaclyn Tan Date: Thu, 5 Jan 2017 00:52:46 +0800 Subject: [PATCH 8/9] Major bug fixes and general usability improvements MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Removed overflow:hidden on .container. Using overflow hidden and negative margins to account for the use of border:spacing seemed like a bad idea and very hacky. I think the solution I have come up with is better - I have replaced border-spacing with actual borders and background clip. This allowed me to remove overflow:hidden on the container, which results in improved usability by allowing elements to be positioned relative to a col outside the container. Yay. - Renamed instances of .grid to .row. Using .row just makes more sense to me as it is essentially housing a row of data, not a grid per se. - Added a .row-auto class and styles. This is to take into account the fact that table-cells are designed to fill the entire width of a container. However, sometimes you might want that and instead want just .col-5 in a 12 column row. To tackle this I’ve used inline-block on the .row-auto .cols. Since it is doubtful you would use .row-auto fully loaded with cols, I think this is fine and won’t need much inline-block hackery, however I’ll have to do further testing to see how it actually runs. - Replaced minifycss with cleancss - See sass for usage examples - Yes I will get round to updating the readme with jekyll sometime once i figure out how to use it properly --- .gitignore | 1 + gulpfile.js | 4 +- layouts/update.html | 56 +++++++++++++++++++++++++--- package.json | 2 +- sass/_grid-basics.scss | 64 ++++++++++++++++++++++++-------- sass/_grid-extras.scss | 4 +- sass/_grid-vars.scss | 22 ----------- sass/table-grid.scss | 42 +++++++++++++++++++++ table-grid.css | 83 +++++++++++++++++++++++++++++++++++------- table-grid.min.css | 2 +- 10 files changed, 217 insertions(+), 63 deletions(-) diff --git a/.gitignore b/.gitignore index badbc02..1faecc1 100644 --- a/.gitignore +++ b/.gitignore @@ -1,2 +1,3 @@ _site .sass-cache +node_modules \ No newline at end of file diff --git a/gulpfile.js b/gulpfile.js index e055e08..3ece37a 100755 --- a/gulpfile.js +++ b/gulpfile.js @@ -2,7 +2,7 @@ var gulp = require('gulp'), plumber = require('gulp-plumber'), rename = require('gulp-rename'), autoprefixer = require('gulp-autoprefixer'), - minifycss = require('gulp-minify-css'), + cleanCSS = require('gulp-clean-css'), sass = require('gulp-sass'), browserSync = require('browser-sync'); @@ -31,7 +31,7 @@ gulp.task('styles', function () { .pipe(rename({ suffix: '.min' })) - .pipe(minifycss()) + .pipe(cleanCSS()) .pipe(gulp.dest('./')) .pipe(browserSync.reload({ stream: true diff --git a/layouts/update.html b/layouts/update.html index dd487ea..e9d4778 100644 --- a/layouts/update.html +++ b/layouts/update.html @@ -31,8 +31,8 @@

Sass variables

Improved gutters

Large gutters without affecting the first and last columns -
-
+
+
col
col
col
@@ -41,8 +41,8 @@

Improved gutters

Large gutters without affecting the first and last col

# Columns

Make as many or as little columns as the design calls for -
-
+
+
col-3
col-2
col-4
@@ -53,15 +53,61 @@

# Columns

Make as many or as little columns as the design calls for

Column padding and alignment

Add padding to a column by adding '.padded' to the .col tag.
Align content in each column easily by adding '.align-top, .align-middle, or .align-bottom' to the .col tag. -
+
Easier
to
align and pad
than
flexbox
+ +
+
+
+
+ asd +
+
+
+
+ asdasdadssaasdas

+ asdasd + as

+ d + sad

+ sa + d +

+
+
+
+
+
+
+
+
col-3
+
col-2
+
col-4
+
col-1
+
col-3
+
+
+ + +
+
+
+
asdasds
+
col-2
+
col-4
+
col-1
+
col-3
+
+
+ + diff --git a/package.json b/package.json index ddc393c..4d0246e 100755 --- a/package.json +++ b/package.json @@ -27,7 +27,7 @@ "devDependencies": { "browser-sync": "*", "gulp-autoprefixer": "*", - "gulp-minify-css": "*", + "gulp-clean-css": "*", "gulp-plumber": "*", "gulp-rename": "*", "gulp-sass": "*", diff --git a/sass/_grid-basics.scss b/sass/_grid-basics.scss index 7212e7b..b058f49 100644 --- a/sass/_grid-basics.scss +++ b/sass/_grid-basics.scss @@ -8,41 +8,73 @@ max-width: $container-width; margin-right: auto; margin-left: auto; - overflow: hidden; // avoids scrollbars created by the negative margins - display: table; // this fixes the issue of disappearing content if it is surrounded by a wrapping div with no display set +// display: table; // this fixes the issue of disappearing content if it is surrounded by a wrapping div with no display set width: 100%; // make sure the container is always at max-width + + &-fluid { + @extend .container; + max-width: none; + } } // // Grid classes // @media (min-width: $mobile-breakpoint) { - // Add '.grid' for the table - .grid { + + // Use '.row' for a row of cells + .row { display: table; width: 100%; table-layout: fixed; - - //add '.padded' for inner gutters - .padded { - padding: $gutter-width / 2; //this can actually be any arbitrary number + text-align: left; + + // Use '.row-auto' instead of '.row' to use specific column widths without auto filling the entire container area. Yes- align will still work for inline-block :) + &-auto { + + @extend .row; + + .col { + + &:first-child { + margin-left: 0; + } + + &:last-child{ + margin-right: 0; + } + + display: inline-block; + vertical-align: top; + position: relative; + } } - .grid-padded & { - border-spacing: $gutter-width 0; + // Use 'row-padded' as a wrapper around 'row' if you want gutters + .row-padded & { + .col { + border-right:$gutter-width solid transparent; + background-clip: padding-box; + + &:first-child { + border-left: none; + } + + &:last-child { + border-right: none; + } + } } } // Add '.col' for the table cells, or columns .col { display: table-cell; -// background: pink; //for debugging +// word-wrap: break-word; } - // Padded columns - // Use as a wrapper around '.grid' to create column spacing - .grid-padded { - margin-left: -$gutter-width; - margin-right: -$gutter-width; + //add '.padded' to cols for inner spacing + .padded { + padding: $gutter-width / 2; //this can actually be any arbitrary number } } \ No newline at end of file diff --git a/sass/_grid-extras.scss b/sass/_grid-extras.scss index bd83101..8f25a25 100644 --- a/sass/_grid-extras.scss +++ b/sass/_grid-extras.scss @@ -20,10 +20,10 @@ // Reverse column sorting // -.grid-reverse { +.row-reverse { direction: rtl; } -.grid-reverse .col { +.row-reverse .col { direction: ltr; } diff --git a/sass/_grid-vars.scss b/sass/_grid-vars.scss index 5c64e32..a6e850e 100644 --- a/sass/_grid-vars.scss +++ b/sass/_grid-vars.scss @@ -8,25 +8,3 @@ $gutter-width: 40px; //columns $column-count:13; - - -//Usage - -//With gutters -//
-//
-//
-//
Column
-//
Column
-//
-//
-//
-// -//No gutters -//
-//
-//
Column
-//
Column
-//
Column
-//
-//
\ No newline at end of file diff --git a/sass/table-grid.scss b/sass/table-grid.scss index 42ee3f2..5805b6e 100644 --- a/sass/table-grid.scss +++ b/sass/table-grid.scss @@ -7,4 +7,46 @@ @import "grid-extras"; +/* +Usage + +================================== +With gutters +================================== + +
+
+
+
Column
+
Column
+
+
+
+ +================================== +No gutters +================================== + +
+
+
Column
+
Column
+
Column
+
+
+ +================================== +Columns with no automatic widths +================================== +Normally, table cells fills the entire width of its parent automatically. Using .row-auto instead of .row ensures the width of each column stays fixed relative to the container width. +================================== + +
+
+
Column
+
Column
+
+
+ +*/ \ No newline at end of file diff --git a/table-grid.css b/table-grid.css index af05150..b29d16f 100644 --- a/table-grid.css +++ b/table-grid.css @@ -1,28 +1,39 @@ /*-------------------------------------------------------------- ## Table Grid --------------------------------------------------------------*/ -.container { +.container, .container-fluid { max-width: 1400px; margin-right: auto; margin-left: auto; - overflow: hidden; - display: table; width: 100%; } + .container-fluid { + max-width: none; } @media (min-width: 600px) { - .grid { + .row, .row-auto { display: table; width: 100%; - table-layout: fixed; } - .grid .padded { - padding: 20px; } - .grid-padded .grid { - border-spacing: 40px 0; } + table-layout: fixed; + text-align: left; } + .row-auto .col { + display: inline-block; + vertical-align: top; + position: relative; } + .row-auto .col:first-child { + margin-left: 0; } + .row-auto .col:last-child { + margin-right: 0; } + .row-padded .row .col, .row-padded .row-auto .col { + border-right: 40px solid transparent; + background-clip: padding-box; } + .row-padded .row .col:first-child, .row-padded .row-auto .col:first-child { + border-left: none; } + .row-padded .row .col:last-child, .row-padded .row-auto .col:last-child { + border-right: none; } .col { display: table-cell; } - .grid-padded { - margin-left: -40px; - margin-right: -40px; } } + .padded { + padding: 20px; } } .col-1 { width: 100%; } @@ -124,8 +135,52 @@ .col.align-bottom { vertical-align: bottom; } -.grid-reverse { +.row-reverse { direction: rtl; } -.grid-reverse .col { +.row-reverse .col { direction: ltr; } + +/* + +Usage + +================================== +With gutters +================================== + +
+
+
+
Column
+
Column
+
+
+
+ +================================== +No gutters +================================== + +
+
+
Column
+
Column
+
Column
+
+
+ +================================== +Columns with no automatic widths +================================== +Normally, table cells fills the entire width of its parent automatically. Using .row-auto instead of .row ensures the width of each column stays fixed relative to the container width. +================================== + +
+
+
Column
+
Column
+
+
+ +*/ diff --git a/table-grid.min.css b/table-grid.min.css index 3a71c73..9263dfe 100644 --- a/table-grid.min.css +++ b/table-grid.min.css @@ -1 +1 @@ -.col-1,.container{width:100%}.container{max-width:1400px;margin-right:auto;margin-left:auto;overflow:hidden;display:table}@media (min-width:600px){.grid{display:table;width:100%;table-layout:fixed}.grid .padded{padding:20px}.grid-padded .grid{border-spacing:40px 0}.col{display:table-cell}.grid-padded{margin-left:-40px;margin-right:-40px}.col-1{width:7.69231%}}.col-2{width:100%}@media (min-width:600px){.col-2{width:15.38462%}}.col-3{width:100%}@media (min-width:600px){.col-3{width:23.07692%}}.col-4{width:100%}@media (min-width:600px){.col-4{width:30.76923%}}.col-5{width:100%}@media (min-width:600px){.col-5{width:38.46154%}}.col-6{width:100%}@media (min-width:600px){.col-6{width:46.15385%}}.col-7{width:100%}@media (min-width:600px){.col-7{width:53.84615%}}.col-8{width:100%}@media (min-width:600px){.col-8{width:61.53846%}}.col-9{width:100%}@media (min-width:600px){.col-9{width:69.23077%}}.col-10{width:100%}@media (min-width:600px){.col-10{width:76.92308%}}.col-11{width:100%}@media (min-width:600px){.col-11{width:84.61538%}}.col-12{width:100%}@media (min-width:600px){.col-12{width:92.30769%}.col-13{width:100%}}.col-13{width:100%}.col.align-top{vertical-align:top}.col.align-middle{vertical-align:middle}.col.align-bottom{vertical-align:bottom}.grid-reverse{direction:rtl}.grid-reverse .col{direction:ltr} \ No newline at end of file +.container,.container-fluid{max-width:1400px;margin-right:auto;margin-left:auto;width:100%}.container-fluid{max-width:none}.col-1{width:100%}@media (min-width:600px){.row,.row-auto{display:table;width:100%;table-layout:fixed;text-align:left}.row-auto .col{display:inline-block;vertical-align:top;position:relative}.row-auto .col:first-child{margin-left:0}.row-auto .col:last-child{margin-right:0}.row-padded .row .col,.row-padded .row-auto .col{border-right:40px solid transparent;background-clip:padding-box}.row-padded .row .col:first-child,.row-padded .row-auto .col:first-child{border-left:none}.row-padded .row .col:last-child,.row-padded .row-auto .col:last-child{border-right:none}.col{display:table-cell}.padded{padding:20px}.col-1{width:7.69231%}}.col-2{width:100%}@media (min-width:600px){.col-2{width:15.38462%}}.col-3{width:100%}@media (min-width:600px){.col-3{width:23.07692%}}.col-4{width:100%}@media (min-width:600px){.col-4{width:30.76923%}}.col-5{width:100%}@media (min-width:600px){.col-5{width:38.46154%}}.col-6{width:100%}@media (min-width:600px){.col-6{width:46.15385%}}.col-7{width:100%}@media (min-width:600px){.col-7{width:53.84615%}}.col-8{width:100%}@media (min-width:600px){.col-8{width:61.53846%}}.col-9{width:100%}@media (min-width:600px){.col-9{width:69.23077%}}.col-10{width:100%}@media (min-width:600px){.col-10{width:76.92308%}}.col-11{width:100%}@media (min-width:600px){.col-11{width:84.61538%}}.col-12{width:100%}@media (min-width:600px){.col-12{width:92.30769%}.col-13{width:100%}}.col-13{width:100%}.col.align-top{vertical-align:top}.col.align-middle{vertical-align:middle}.col.align-bottom{vertical-align:bottom}.row-reverse{direction:rtl}.row-reverse .col{direction:ltr} \ No newline at end of file From a1e5f70d5ecb5f64fa4db527c930169d262d06ef Mon Sep 17 00:00:00 2001 From: Jaclyn Tan Date: Thu, 5 Jan 2017 00:55:28 +0800 Subject: [PATCH 9/9] Ignore node_modules --- .gitignore | 1 + 1 file changed, 1 insertion(+) diff --git a/.gitignore b/.gitignore index badbc02..1faecc1 100644 --- a/.gitignore +++ b/.gitignore @@ -1,2 +1,3 @@ _site .sass-cache +node_modules \ No newline at end of file