+
Improved gutters
Large gutters without affecting the first and last columns
+
+
+
# Columns
Make as many or as little columns as the design calls for
+
+
+
+
col-3
+
col-2
+
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
+
+
+
+
+
+
+
+ asdasdadssaasdas
+ asdasd
+ as
+ d
+ sad
+ sa
+ d
+
+
+
+
+
+
+
+
+
col-2
+
col-4
+
col-1
+
col-3
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/package.json b/package.json
new file mode 100755
index 0000000..4d0246e
--- /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-clean-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..b058f49
--- /dev/null
+++ b/sass/_grid-basics.scss
@@ -0,0 +1,80 @@
+//
+// Container
+//
+
+// Holds and centers the site content
+
+.container {
+ max-width: $container-width;
+ margin-right: auto;
+ margin-left: auto;
+// 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) {
+
+ // Use '.row' for a row of cells
+ .row {
+ display: table;
+ width: 100%;
+ table-layout: fixed;
+ 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;
+ }
+ }
+
+ // 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;
+// word-wrap: break-word;
+ }
+
+ //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-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
new file mode 100644
index 0000000..8f25a25
--- /dev/null
+++ b/sass/_grid-extras.scss
@@ -0,0 +1,29 @@
+// Vertically center grid content
+
+//append alignment class to the .col tag
+.col {
+ &.align-top {
+ vertical-align: top;
+ }
+
+ &.align-middle {
+ vertical-align: middle;
+ }
+
+ &.align-bottom {
+ vertical-align: bottom;
+ }
+}
+
+
+//
+// Reverse column sorting
+//
+
+.row-reverse {
+ direction: rtl;
+}
+
+.row-reverse .col {
+ direction: ltr;
+}
diff --git a/sass/_grid-vars.scss b/sass/_grid-vars.scss
new file mode 100644
index 0000000..a6e850e
--- /dev/null
+++ b/sass/_grid-vars.scss
@@ -0,0 +1,10 @@
+// Set your variables here
+
+$mobile-breakpoint:600px;
+
+//container
+$container-width:1400px;
+$gutter-width: 40px;
+
+//columns
+$column-count:13;
diff --git a/sass/table-grid.scss b/sass/table-grid.scss
new file mode 100644
index 0000000..5805b6e
--- /dev/null
+++ b/sass/table-grid.scss
@@ -0,0 +1,52 @@
+/*--------------------------------------------------------------
+## Table Grid
+--------------------------------------------------------------*/
+@import "grid-vars";
+@import "grid-basics";
+@import "grid-columns";
+@import "grid-extras";
+
+
+/*
+
+Usage
+
+==================================
+With gutters
+==================================
+
+
+
+==================================
+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.
+==================================
+
+
+
+*/
\ No newline at end of file
diff --git a/table-grid.css b/table-grid.css
new file mode 100644
index 0000000..b29d16f
--- /dev/null
+++ b/table-grid.css
@@ -0,0 +1,186 @@
+/*--------------------------------------------------------------
+## Table Grid
+--------------------------------------------------------------*/
+.container, .container-fluid {
+ max-width: 1400px;
+ margin-right: auto;
+ margin-left: auto;
+ width: 100%; }
+ .container-fluid {
+ max-width: none; }
+
+@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: 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; }
+
+.row-reverse {
+ direction: rtl; }
+
+.row-reverse .col {
+ direction: ltr; }
+
+/*
+
+Usage
+
+==================================
+With gutters
+==================================
+
+
+
+==================================
+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.
+==================================
+
+
+
+*/
diff --git a/table-grid.min.css b/table-grid.min.css
new file mode 100644
index 0000000..9263dfe
--- /dev/null
+++ b/table-grid.min.css
@@ -0,0 +1 @@
+.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
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";