This is a serious-fun-dumb-useful experiment for writing a simple, responsive, and mobile-first CSS grid system. With tables.
19 |
20 |
21 |
22 |
23 | {{ content }}
24 |
25 |
26 |
27 |
28 |
--------------------------------------------------------------------------------
/LICENSE.md:
--------------------------------------------------------------------------------
1 | The MIT License (MIT)
2 |
3 | Copyright (c) 2014 Mark Otto.
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy of
6 | this software and associated documentation files (the "Software"), to deal in
7 | the Software without restriction, including without limitation the rights to
8 | use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
9 | the Software, and to permit persons to whom the Software is furnished to do so,
10 | subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
17 | FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
18 | COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
19 | IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
20 | CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
21 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Table Grid
2 |
3 | Every grid to date uses `float`s or some `inline-block` hackery. That's so 2013 though, and seeing that it's now 2014, we need something newer, faster, and stronger. So, Table Grid was born.
4 |
5 | Check out the example on GitHub Pages at ****. Clone this or download it to give it a whirl for yourself.
6 |
7 | ### Wtf
8 |
9 | This isn't a serious project really, it's just an experiment. I'm curious about the rendering performance of using `display: table;` as opposed to `float`s, `flex-box`, or `display: inline-block;`. Each option has pros or cons, but in particular I'm focused on the con part:
10 |
11 | - `float`s require clearing and I have zero idea about rendering performance. They're straightfoward and Just Work™.
12 | - `flex-box` has poor rendering last I heard because browsers have to do a lot of repainting to support it. I have no references to this, it's what I've heard. Plus, [browser support](http://caniuse.com/#feat=flexbox) and what not.
13 | - `display: inline-block;` is gnarly because it involves resetting `white-space` and that's just silly. We shouldn't be resetting that kind of stuff just for a grid system.
14 |
15 | So, based on that, `display: table;` starts to sound kind of interesting. Table layouts, especially ones that include `table-layout: fixed;` render super fast because browsers only need to render the first row of cells to paint the whole table. That's kind of moot with one row grids like this, but it *might* help anyway.
16 |
17 | ### How it works
18 |
19 | As always, there's a container, row, and a series of columns. It's responsive, too. More specifically:
20 |
21 | - Center the site contents with `.container`, which has a `max-width: 940px;`.
22 | - Wrap a row of columns with `.grid`. This sets up the table-based grid with `display: table;`, `width: 100%;`, and `table-layout: fixed;`.
23 | - Columns get the `.col` base class and an optional width class, like `.col-1` or `.col-6`. There are 12 available column classes, 1-12, for any variety of column combinations.
24 | - Grid width class is not required. Without them, all columns become equal width via `.col` alone. Tables, baby!
25 | - Grids are nestable—just place a new `.grid` within any `.col`. Bam.
26 | - By default, because of how `display: table;` works, there's no gutters. To add gutters, wrap the `.grid` in `.grid-padded`, which adds gutters with `border-spacing: 1rem 0;`. Sucks, but this *is* experimental.
27 |
28 | All this can be seen in action on [the demo page](http://mdo.github.io/table-grid).
29 |
30 | ### What's included
31 |
32 | Table Grid has been rebuilt to use Sass (thanks, Jekyll!). Key CSS bits are broken down in `_sass`:
33 |
34 | - `grid-basics.scss` contains the container and basic responsive, equal-width column support.
35 | - `grid-columns.scss` contains specific column width classes for more granular control (e.g, `.col-6` is 50% wide).
36 | - `grid-extras.scss` is for alignment and sorting options.
37 |
38 |
39 | See for details on usage.
40 |
41 | ### Fuck you, where's the real grid?
42 |
43 | If you need a nuclear hardened grid system, check out [Bootstrap](http://getbootstrap.com/css/#grid). It's okay.
44 |
45 | ### License
46 |
47 | MIT, (c) Mark Otto 2014.
48 |
--------------------------------------------------------------------------------
/docs.css:
--------------------------------------------------------------------------------
1 | /*
2 | * Styles for the Table Grid docs.
3 | */
4 |
5 | html {
6 | font-size: 14px;
7 | }
8 | @media (min-width: 600px) {
9 | html {
10 | font-size: 18px;
11 | }
12 | }
13 |
14 | body {
15 | margin: 0;
16 | padding-bottom: 3rem;
17 | font: 1rem/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", Arial, sans-serif;
18 | color: #555;
19 | text-align: center;
20 | background-color: #fff;
21 | }
22 |
23 | .container {
24 | max-width: 54rem;
25 | padding: 0 1rem;
26 | }
27 |
28 | a {
29 | color: #1874cd;
30 | text-decoration: none;
31 | }
32 | a:hover {
33 | color: #104e8b;
34 | }
35 |
36 | h1, h2, h3 {
37 | margin-top: 0;
38 | margin-bottom: .5rem;
39 | font-weight: 500;
40 | line-height: 1.1;
41 | color: #333;
42 | }
43 | h1 {
44 | font-size: 3rem;
45 | }
46 | h1 small {
47 | font-size: 80%;
48 | color: #777;
49 | }
50 | h2 {
51 | margin-top: 3rem;
52 | font-size: 2rem;
53 | }
54 |
55 | p {
56 | margin-top: 0;
57 | margin-bottom: 1rem;
58 | }
59 | .container > p {
60 | margin: .5rem auto 1rem;
61 | max-width: 800px;
62 | }
63 |
64 | hr {
65 | max-width: 100px;
66 | margin: 3rem auto;
67 | border: 0;
68 | border-top: .1rem solid #eee;
69 | }
70 |
71 | code {
72 | padding: .15rem .3rem;
73 | font-family: Menlo, "Courier New", monospace;
74 | font-size: 90%;
75 | color: #cd3333;
76 | background-color: #f5f5f5;
77 | border-radius: .15rem;
78 | }
79 |
80 | /* Display utility classes */
81 | .inline-block {
82 | display: inline-block;
83 | }
84 |
85 | /* Masthead */
86 | .masthead {
87 | padding: 4rem 1rem;
88 | font-weight: 300;
89 | color: rgba(255,255,255,.65);
90 | text-align: center;
91 | background-color: #b94a48;
92 | }
93 | .masthead a,
94 | .masthead strong {
95 | font-weight: normal;
96 | color: #fff;
97 | }
98 | .masthead p {
99 | font-size: 1.25rem;
100 | }
101 |
102 | /* Make it red for easy views */
103 | .grid-example {
104 | margin-bottom: 1rem;
105 | }
106 | .grid-example .col {
107 | line-height: 3;
108 | text-align: center;
109 | color: #333;
110 | background-color: rgba(255,0,0,.15);
111 | }
112 | .grid-example .col:nth-child(odd) {
113 | background-color: rgba(255,0,0,.3);
114 | }
115 |
116 | /* Nested grid examples need outdenting because padding. */
117 | .grid-example .grid-example {
118 | margin-top: .5rem;
119 | margin-bottom: 0;
120 | }
121 |
122 | /* Increase height of vertically centered example */
123 | .grid-example.grid-align-middle {
124 | height: 200px;
125 | }
126 | .grid-example.grid-align-middle .col {
127 | min-height: 3rem;
128 | line-height: 1.5;
129 | }
130 |
131 | /* Syntax */
132 |
133 | .hll { background-color: #ffc; }
134 | .c { color: #999; }
135 | .k { color: #069; }
136 | .o { color: #555; }
137 | .cm { color: #999; }
138 | .cp { color: #099; }
139 | .c1 { color: #999; }
140 | .cs { color: #999; }
141 | .gd { background-color: #fcc; border: 1px solid #c00; }
142 | .ge { font-style: italic; }
143 | .gr { color: #f00; }
144 | .gh { color: #030; }
145 | .gi { background-color: #cfc; border: 1px solid #0c0; }
146 | .go { color: #aaa; }
147 | .gp { color: #009; }
148 | .gu { color: #030; }
149 | .gt { color: #9c6; }
150 | .kc { color: #069; }
151 | .kd { color: #069; }
152 | .kn { color: #069; }
153 | .kp { color: #069; }
154 | .kr { color: #069; }
155 | .kt { color: #078; }
156 | .m { color: #f60; }
157 | .s { color: #d44950; }
158 | .na { color: #4f9fcf; }
159 | .nb { color: #366; }
160 | .nc { color: #0a8; }
161 | .no { color: #360; }
162 | .nd { color: #99f; }
163 | .ni { color: #999; }
164 | .ne { color: #c00; }
165 | .nf { color: #c0f; }
166 | .nl { color: #99f; }
167 | .nn { color: #0cf; }
168 | .nt { color: #2f6f9f; }
169 | .nv { color: #033; }
170 | .ow { color: #000; }
171 | .w { color: #bbb; }
172 | .mf { color: #f60; }
173 | .mh { color: #f60; }
174 | .mi { color: #f60; }
175 | .mo { color: #f60; }
176 | .sb { color: #c30; }
177 | .sc { color: #c30; }
178 | .sd { font-style: italic; color: #c30; }
179 | .s2 { color: #c30; }
180 | .se { color: #c30; }
181 | .sh { color: #c30; }
182 | .si { color: #a00; }
183 | .sx { color: #c30; }
184 | .sr { color: #3aa; }
185 | .s1 { color: #c30; }
186 | .ss { color: #fc3; }
187 | .bp { color: #366; }
188 | .vc { color: #033; }
189 | .vg { color: #033; }
190 | .vi { color: #033; }
191 | .il { color: #f60; }
192 |
193 | .css .o,
194 | .css .o + .nt,
195 | .css .nt + .nt { color: #999; }
196 |
197 |
198 | .highlight {
199 | padding: 1rem;
200 | margin: 1rem -1rem;
201 | font-size: 90%;
202 | text-align: left;
203 | background-color: #f7f7f9;
204 | }
205 |
206 | @media (min-width: 600px) {
207 | .highlight {
208 | padding: 1.5rem;
209 | margin-right: 0;
210 | margin-left: 0;
211 | }
212 | }
213 |
214 | .highlight pre {
215 | padding: 0;
216 | margin-top: 0;
217 | margin-bottom: 0;
218 | background-color: transparent;
219 | border: 0;
220 | }
221 | .highlight pre code {
222 | font-size: inherit;
223 | color: #333;
224 | background-color: transparent;
225 | }
226 |
--------------------------------------------------------------------------------
/index.md:
--------------------------------------------------------------------------------
1 | ---
2 | layout: default
3 | ---
4 |
5 | ## Premise
6 |
7 | CSS grid systems are typically built in one of two ways today—`float`s or some `display: inline-block;` hackery. Both are fine and well established, but `table`s are way fucking cooler thanks to `table-layout` and dead simple alignment.
8 |
9 | Let's take a look.
10 |
11 |
12 |
13 | ---
14 |
15 | ## Typical approach
16 |
17 | The typical approach is to create twelve fixed-width columns in all the usual combinations. Cool, super easy to do, and [@mdo/table-grid](https://github.com/mdo/table-grid) supports that. There's also a base class for ease of use that makes our columns use `display: table-cell;` and more.
18 |
19 |
20 |
1
21 |
1
22 |
1
23 |
1
24 |
1
25 |
1
26 |
1
27 |
1
28 |
1
29 |
1
30 |
1
31 |
1
32 |
33 |
34 |
2
35 |
2
36 |
2
37 |
2
38 |
2
39 |
2
40 |
41 |
42 |
3
43 |
3
44 |
3
45 |
3
46 |
47 |
48 |
4
49 |
4
50 |
4
51 |
52 |
53 |
5
54 |
7
55 |
56 |
57 |
6
58 |
6
59 |
60 |
61 |
8
62 |
4
63 |
64 |
65 |
12
66 |
67 |
68 | {% highlight html %}
69 |
70 |
8
71 |
4
72 |
73 | {% endhighlight %}
74 |
75 | ---
76 |
77 | ## Table layout
78 |
79 | Now comes the really fun part. With `table-layout: fixed;`, we can drop half our grid classes. **Fixed table layouts render equal-width columns when no other width is set.**
80 |
81 |
82 |
Col
83 |
Col
84 |
Col
85 |
Col
86 |
Col
87 |
Col
88 |
Col
89 |
Col
90 |
Col
91 |
Col
92 |
Col
93 |
Col
94 |
95 |
96 |
Col
97 |
Col
98 |
Col
99 |
Col
100 |
Col
101 |
Col
102 |
103 |
104 |
Column
105 |
Column
106 |
Column
107 |
Column
108 |
109 |
110 |
Column
111 |
Column
112 |
Column
113 |
114 |
115 |
Column
116 |
Column
117 |
118 |
119 |
Column
120 |
121 |
122 | {% highlight html %}
123 |
124 |
Column
125 |
Column
126 |
Column
127 |
128 | {% endhighlight %}
129 |
130 |
131 | ---
132 |
133 | ## Nested
134 |
135 | With or without those extra classes, table grids are easily nestable. Just place a `.grid` with any combination of columns within an existing `.col`.
136 |
137 |
138 |
139 | 8
140 |
141 |
Column
142 |
Column
143 |
144 |
145 |
4
146 |
147 |
148 | {% highlight html %}
149 |
150 |
151 | 8
152 |
153 |
Column
154 |
Column
155 |
156 |
157 |
4
158 |
159 | {% endhighlight %}
160 |
161 | ---
162 |
163 | ## Grids with gutters
164 |
165 | Wrap the `.grid` with `div.grid-padded` to add gutters between columns. Works on any column, even the `width`-less base class.
166 |
167 | The wrapping `.grid-padded` applies negative horizontal margins to account for the gutters. Tables that are 100% wide cannot have negative horizontal margins directly applied to them, so we must use a wrapper.
168 |
169 |
170 |
171 |
Column
172 |
Column
173 |
Column
174 |
175 |
176 |
177 |
178 |
Column
179 |
Column
180 |
181 |
182 |
183 |
184 |
8
185 |
4
186 |
187 |
188 |
189 | {% highlight html %}
190 |
191 |
192 |
Column
193 |
Column
194 |
195 |
196 | {% endhighlight %}
197 |
198 | ---
199 |
200 | ## Vertically center content
201 |
202 | Add the `.grid-align-middle` class to the `.grid` and voilà. Requires the use of `inline`, `inline-block`, or `table` based elements within a column.
203 |
204 |
205 |
206 |
207 | Free-form text wraps while remaining vertically centered.
208 |
209 |
210 | Nested columns center, too.
211 |
212 |
213 |
Column
214 |
Column
215 |
216 |
217 |
218 |
219 |
A `div` with `inline-block` works great, too.
220 |
221 |
222 |
223 |
224 | {% highlight html %}
225 |
226 |
227 |
228 |
229 |
230 | {% endhighlight %}
231 |
232 | ---
233 |
234 | ## Reverse column sorting
235 |
236 | Add the `.grid-reverse` class to the `.grid` table and you'll have reversed columns. In the example below, **Column 1** is first in the markup, but appears last when rendered. And because our table grid is responsive, they're stacked in order on mobile, too.
237 |
238 |