├── .rvmrc.sample
├── Gemfile
├── images
├── nested.png
└── nested-bootstrap.png
├── config.rb
├── Gemfile.lock
├── .gitignore
├── README.markdown
├── compile
└── sass
│ └── all.scss
├── stylesheets
└── all.css
└── index.html
/.rvmrc.sample:
--------------------------------------------------------------------------------
1 | rvm use 1.9.2@nested_responsive_grid --create
--------------------------------------------------------------------------------
/Gemfile:
--------------------------------------------------------------------------------
1 | source :rubygems
2 |
3 | gem "sass", "3.2.0.alpha.104"
4 | gem "compass"
--------------------------------------------------------------------------------
/images/nested.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/davist11/nested-responsive-grid/HEAD/images/nested.png
--------------------------------------------------------------------------------
/images/nested-bootstrap.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/davist11/nested-responsive-grid/HEAD/images/nested-bootstrap.png
--------------------------------------------------------------------------------
/config.rb:
--------------------------------------------------------------------------------
1 | #paths
2 | http_path = "/"
3 | css_dir = "stylesheets/"
4 | sass_dir = "compile/sass"
5 | images_dir = "images/structure/"
6 | javascripts_dir = "scripts"
7 | fonts_dir = "fonts/"
8 |
9 | # settings
10 | #output_style = :compressed
11 | relative_assets = true
12 | line_comments = false
13 |
14 | Sass::Script::Number.precision = 10
--------------------------------------------------------------------------------
/Gemfile.lock:
--------------------------------------------------------------------------------
1 | GEM
2 | remote: http://rubygems.org/
3 | specs:
4 | chunky_png (1.2.5)
5 | compass (0.12.2)
6 | chunky_png (~> 1.2)
7 | fssm (>= 0.2.7)
8 | sass (~> 3.1)
9 | fssm (0.2.9)
10 | sass (3.2.0.alpha.104)
11 |
12 | PLATFORMS
13 | ruby
14 |
15 | DEPENDENCIES
16 | compass
17 | sass (= 3.2.0.alpha.104)
18 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # Project Files #
2 | ######################
3 | .sass-cache
4 | .rvmrc
5 |
6 | # Compiled source #
7 | ###################
8 | *.com
9 | *.class
10 | *.dll
11 | *.exe
12 | *.o
13 | *.so
14 |
15 | # Logs and databases #
16 | ######################
17 | *.log
18 | *.sqlite
19 |
20 | # OS generated files #
21 | ######################
22 | .DS_Store
23 | ehthumbs.db
24 | Icon?
25 | Thumbs.db
--------------------------------------------------------------------------------
/README.markdown:
--------------------------------------------------------------------------------
1 | ## Nested responsive grids
2 | Generate a responsive grid that maintains it’s column sizes two levels deep. View Demos .
3 |
4 | ### Bootstrap’s Nested Responsive Grid
5 | When using another grid framework (like Twitter Bootstrap), nested grids get weird:
6 |
7 | >Nesting with fluid grids is a bit different: the number of nested columns doesn't need to match the parent. Instead, your columns are reset at each level because each row takes up 100% of the parent column.
8 |
9 | <div class="row-fluid">
10 | <div class="span6">
11 | 6
12 | <div class="row-fluid">
13 | <div class="span6">3</div>
14 | <div class="span6">3</div>
15 | </div>
16 | </div>
17 | </div>
18 |
19 | That means that the sub columns will each be a “3” column. But, that 3 column width will not be the same as a standalone 3 column since it is a percentage of another percentage. It’s kind of hard to explain, but the below image should illustrate the problem.
20 |
21 | 
22 |
23 | Notice the difference in column widths and margins across the two rows.
24 |
25 | ### My Nested Responsive Grid
26 | I hated that. So in my system, a “3” sub-column would equal the width of a standalone 3 column
27 |
28 | <div class="row">
29 | <div class="span6">
30 | 6
31 | <div class="row">
32 | <div class="span3">3</div>
33 | <div class="span3">3</div>
34 | </div>
35 | </div>
36 | </div>
37 |
38 | 
39 |
40 | Notice the how the column widths and margins are maintained across the two rows.
--------------------------------------------------------------------------------
/compile/sass/all.scss:
--------------------------------------------------------------------------------
1 | $cols: 12;
2 | $gutter: 2%;
3 |
4 |
5 | $one_col: (100% - ($gutter * ($cols - 1))) / $cols;
6 |
7 | @mixin cols($num) {
8 | width: ($one_col * $num) + ($gutter * ($num - 1));
9 | }
10 |
11 | @mixin sub_cols($num_child, $num_parent) {
12 | $parent_size: ($one_col * $num_parent) + ($gutter * ($num_parent - 1));
13 | $child_size: ($one_col * $num_child) + ($gutter * ($num_child - 1));
14 | margin-left: ($gutter / $parent_size) * 100%;
15 | width: ($child_size / $parent_size) * 100%;
16 | }
17 |
18 | /* @group grid */
19 | .row {
20 | #{enumerate('.span', 1, $cols, '')} {
21 | float: left;
22 | margin-left: $gutter;
23 | }
24 |
25 | @for $i from 1 through $cols {
26 | .span#{$i} {
27 | @include cols($i);
28 |
29 | @for $j from 1 through ($i - 1) {
30 | .span#{$j} {
31 | @include sub_cols($j, $i);
32 | }
33 | }
34 | }
35 | }
36 |
37 | > :first-child,
38 | .row > :first-child {
39 | margin-left: 0;
40 | }
41 | }
42 |
43 | .row:after {
44 | clear: both;
45 | content: ".";
46 | display: block;
47 | height: 0;
48 | visibility: hidden;
49 | }
50 |
51 | .lte7 .row {
52 | height: 1%;
53 | }
54 |
55 | .wrapper {
56 | margin: 0 auto;
57 | max-width: 1000px;
58 | }
59 | /* @end */
60 |
61 |
62 | // Below is just for the demo
63 |
64 |
65 | @import "compass/css3";
66 |
67 | /* @group basic reset */
68 | html,
69 | body {
70 | margin: 0;
71 | padding: 0;
72 | }
73 |
74 | body {
75 | background: #fff;
76 | font: 12px/20px Helvetica, Arial, sans-serif;
77 | }
78 |
79 | * {
80 | @include box-sizing(border-box);
81 | }
82 | h1 {
83 | font-size: 30px;
84 | line-height: 36px;
85 | }
86 | /* @end */
87 |
88 | /* @group extra styling for grid demo */
89 | .row {
90 | background: #dedede;
91 | margin-bottom: 20px;
92 | }
93 | .row > [class*="span"] {
94 | background: #ccc;
95 | min-height: 80px;
96 | text-align: center;
97 | padding: 10px 0;
98 | }
99 |
100 | .row .row {
101 | background: none;
102 | margin-bottom: 0;
103 | }
104 | .row .row > [class*="span"] {
105 | background: #aaa;
106 | min-height: 100%;
107 | }
108 | /* @end */
109 |
--------------------------------------------------------------------------------
/stylesheets/all.css:
--------------------------------------------------------------------------------
1 | /* @group grid */
2 | .row .span1, .row .span2, .row .span3, .row .span4, .row .span5, .row .span6, .row .span7, .row .span8, .row .span9, .row .span10, .row .span11, .row .span12 {
3 | float: left;
4 | margin-left: 2%;
5 | }
6 | .row .span1 {
7 | width: 6.5%;
8 | }
9 | .row .span2 {
10 | width: 15%;
11 | }
12 | .row .span2 .span1 {
13 | margin-left: 13.3333333333%;
14 | width: 43.3333333333%;
15 | }
16 | .row .span3 {
17 | width: 23.5%;
18 | }
19 | .row .span3 .span1 {
20 | margin-left: 8.5106382979%;
21 | width: 27.6595744681%;
22 | }
23 | .row .span3 .span2 {
24 | margin-left: 8.5106382979%;
25 | width: 63.829787234%;
26 | }
27 | .row .span4 {
28 | width: 32%;
29 | }
30 | .row .span4 .span1 {
31 | margin-left: 6.25%;
32 | width: 20.3125%;
33 | }
34 | .row .span4 .span2 {
35 | margin-left: 6.25%;
36 | width: 46.875%;
37 | }
38 | .row .span4 .span3 {
39 | margin-left: 6.25%;
40 | width: 73.4375%;
41 | }
42 | .row .span5 {
43 | width: 40.5%;
44 | }
45 | .row .span5 .span1 {
46 | margin-left: 4.9382716049%;
47 | width: 16.049382716%;
48 | }
49 | .row .span5 .span2 {
50 | margin-left: 4.9382716049%;
51 | width: 37.037037037%;
52 | }
53 | .row .span5 .span3 {
54 | margin-left: 4.9382716049%;
55 | width: 58.024691358%;
56 | }
57 | .row .span5 .span4 {
58 | margin-left: 4.9382716049%;
59 | width: 79.012345679%;
60 | }
61 | .row .span6 {
62 | width: 49%;
63 | }
64 | .row .span6 .span1 {
65 | margin-left: 4.0816326531%;
66 | width: 13.2653061224%;
67 | }
68 | .row .span6 .span2 {
69 | margin-left: 4.0816326531%;
70 | width: 30.612244898%;
71 | }
72 | .row .span6 .span3 {
73 | margin-left: 4.0816326531%;
74 | width: 47.9591836735%;
75 | }
76 | .row .span6 .span4 {
77 | margin-left: 4.0816326531%;
78 | width: 65.306122449%;
79 | }
80 | .row .span6 .span5 {
81 | margin-left: 4.0816326531%;
82 | width: 82.6530612245%;
83 | }
84 | .row .span7 {
85 | width: 57.5%;
86 | }
87 | .row .span7 .span1 {
88 | margin-left: 3.4782608696%;
89 | width: 11.3043478261%;
90 | }
91 | .row .span7 .span2 {
92 | margin-left: 3.4782608696%;
93 | width: 26.0869565217%;
94 | }
95 | .row .span7 .span3 {
96 | margin-left: 3.4782608696%;
97 | width: 40.8695652174%;
98 | }
99 | .row .span7 .span4 {
100 | margin-left: 3.4782608696%;
101 | width: 55.652173913%;
102 | }
103 | .row .span7 .span5 {
104 | margin-left: 3.4782608696%;
105 | width: 70.4347826087%;
106 | }
107 | .row .span7 .span6 {
108 | margin-left: 3.4782608696%;
109 | width: 85.2173913043%;
110 | }
111 | .row .span8 {
112 | width: 66%;
113 | }
114 | .row .span8 .span1 {
115 | margin-left: 3.0303030303%;
116 | width: 9.8484848485%;
117 | }
118 | .row .span8 .span2 {
119 | margin-left: 3.0303030303%;
120 | width: 22.7272727273%;
121 | }
122 | .row .span8 .span3 {
123 | margin-left: 3.0303030303%;
124 | width: 35.6060606061%;
125 | }
126 | .row .span8 .span4 {
127 | margin-left: 3.0303030303%;
128 | width: 48.4848484848%;
129 | }
130 | .row .span8 .span5 {
131 | margin-left: 3.0303030303%;
132 | width: 61.3636363636%;
133 | }
134 | .row .span8 .span6 {
135 | margin-left: 3.0303030303%;
136 | width: 74.2424242424%;
137 | }
138 | .row .span8 .span7 {
139 | margin-left: 3.0303030303%;
140 | width: 87.1212121212%;
141 | }
142 | .row .span9 {
143 | width: 74.5%;
144 | }
145 | .row .span9 .span1 {
146 | margin-left: 2.6845637584%;
147 | width: 8.7248322148%;
148 | }
149 | .row .span9 .span2 {
150 | margin-left: 2.6845637584%;
151 | width: 20.1342281879%;
152 | }
153 | .row .span9 .span3 {
154 | margin-left: 2.6845637584%;
155 | width: 31.5436241611%;
156 | }
157 | .row .span9 .span4 {
158 | margin-left: 2.6845637584%;
159 | width: 42.9530201342%;
160 | }
161 | .row .span9 .span5 {
162 | margin-left: 2.6845637584%;
163 | width: 54.3624161074%;
164 | }
165 | .row .span9 .span6 {
166 | margin-left: 2.6845637584%;
167 | width: 65.7718120805%;
168 | }
169 | .row .span9 .span7 {
170 | margin-left: 2.6845637584%;
171 | width: 77.1812080537%;
172 | }
173 | .row .span9 .span8 {
174 | margin-left: 2.6845637584%;
175 | width: 88.5906040268%;
176 | }
177 | .row .span10 {
178 | width: 83%;
179 | }
180 | .row .span10 .span1 {
181 | margin-left: 2.4096385542%;
182 | width: 7.8313253012%;
183 | }
184 | .row .span10 .span2 {
185 | margin-left: 2.4096385542%;
186 | width: 18.0722891566%;
187 | }
188 | .row .span10 .span3 {
189 | margin-left: 2.4096385542%;
190 | width: 28.313253012%;
191 | }
192 | .row .span10 .span4 {
193 | margin-left: 2.4096385542%;
194 | width: 38.5542168675%;
195 | }
196 | .row .span10 .span5 {
197 | margin-left: 2.4096385542%;
198 | width: 48.7951807229%;
199 | }
200 | .row .span10 .span6 {
201 | margin-left: 2.4096385542%;
202 | width: 59.0361445783%;
203 | }
204 | .row .span10 .span7 {
205 | margin-left: 2.4096385542%;
206 | width: 69.2771084337%;
207 | }
208 | .row .span10 .span8 {
209 | margin-left: 2.4096385542%;
210 | width: 79.5180722892%;
211 | }
212 | .row .span10 .span9 {
213 | margin-left: 2.4096385542%;
214 | width: 89.7590361446%;
215 | }
216 | .row .span11 {
217 | width: 91.5%;
218 | }
219 | .row .span11 .span1 {
220 | margin-left: 2.1857923497%;
221 | width: 7.1038251366%;
222 | }
223 | .row .span11 .span2 {
224 | margin-left: 2.1857923497%;
225 | width: 16.393442623%;
226 | }
227 | .row .span11 .span3 {
228 | margin-left: 2.1857923497%;
229 | width: 25.6830601093%;
230 | }
231 | .row .span11 .span4 {
232 | margin-left: 2.1857923497%;
233 | width: 34.9726775956%;
234 | }
235 | .row .span11 .span5 {
236 | margin-left: 2.1857923497%;
237 | width: 44.262295082%;
238 | }
239 | .row .span11 .span6 {
240 | margin-left: 2.1857923497%;
241 | width: 53.5519125683%;
242 | }
243 | .row .span11 .span7 {
244 | margin-left: 2.1857923497%;
245 | width: 62.8415300546%;
246 | }
247 | .row .span11 .span8 {
248 | margin-left: 2.1857923497%;
249 | width: 72.131147541%;
250 | }
251 | .row .span11 .span9 {
252 | margin-left: 2.1857923497%;
253 | width: 81.4207650273%;
254 | }
255 | .row .span11 .span10 {
256 | margin-left: 2.1857923497%;
257 | width: 90.7103825137%;
258 | }
259 | .row .span12 {
260 | width: 100%;
261 | }
262 | .row .span12 .span1 {
263 | margin-left: 2%;
264 | width: 6.5%;
265 | }
266 | .row .span12 .span2 {
267 | margin-left: 2%;
268 | width: 15%;
269 | }
270 | .row .span12 .span3 {
271 | margin-left: 2%;
272 | width: 23.5%;
273 | }
274 | .row .span12 .span4 {
275 | margin-left: 2%;
276 | width: 32%;
277 | }
278 | .row .span12 .span5 {
279 | margin-left: 2%;
280 | width: 40.5%;
281 | }
282 | .row .span12 .span6 {
283 | margin-left: 2%;
284 | width: 49%;
285 | }
286 | .row .span12 .span7 {
287 | margin-left: 2%;
288 | width: 57.5%;
289 | }
290 | .row .span12 .span8 {
291 | margin-left: 2%;
292 | width: 66%;
293 | }
294 | .row .span12 .span9 {
295 | margin-left: 2%;
296 | width: 74.5%;
297 | }
298 | .row .span12 .span10 {
299 | margin-left: 2%;
300 | width: 83%;
301 | }
302 | .row .span12 .span11 {
303 | margin-left: 2%;
304 | width: 91.5%;
305 | }
306 | .row > :first-child,
307 | .row .row > :first-child {
308 | margin-left: 0;
309 | }
310 |
311 | .row:after {
312 | clear: both;
313 | content: ".";
314 | display: block;
315 | height: 0;
316 | visibility: hidden;
317 | }
318 |
319 | .lte7 .row {
320 | height: 1%;
321 | }
322 |
323 | .wrapper {
324 | margin: 0 auto;
325 | max-width: 1000px;
326 | }
327 |
328 | /* @end */
329 | /* @group basic reset */
330 | html,
331 | body {
332 | margin: 0;
333 | padding: 0;
334 | }
335 |
336 | body {
337 | background: #fff;
338 | font: 12px/20px Helvetica, Arial, sans-serif;
339 | }
340 |
341 | * {
342 | -webkit-box-sizing: border-box;
343 | -moz-box-sizing: border-box;
344 | box-sizing: border-box;
345 | }
346 |
347 | h1 {
348 | font-size: 30px;
349 | line-height: 36px;
350 | }
351 |
352 | /* @end */
353 | /* @group extra styling for grid demo */
354 | .row {
355 | background: #dedede;
356 | margin-bottom: 20px;
357 | }
358 |
359 | .row > [class*="span"] {
360 | background: #ccc;
361 | min-height: 80px;
362 | text-align: center;
363 | padding: 10px 0;
364 | }
365 |
366 | .row .row {
367 | background: none;
368 | margin-bottom: 0;
369 | }
370 |
371 | .row .row > [class*="span"] {
372 | background: #aaa;
373 | min-height: 100%;
374 | }
375 |
376 | /* @end */
377 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Nested Responsive Grid
8 |
15 |
Nested Responsive Grid Demo
16 |
17 |
18 |
1
19 |
1
20 |
1
21 |
1
22 |
1
23 |
1
24 |
1
25 |
1
26 |
1
27 |
1
28 |
1
29 |
1
30 |
31 |
32 |
33 |
2
34 |
2
35 |
2
36 |
2
37 |
2
38 |
2
39 |
40 |
41 |
42 |
3
43 |
3
44 |
3
45 |
3
46 |
47 |
48 |
49 |
4
50 |
4
51 |
4
52 |
53 |
54 |
58 |
59 |
63 |
64 |
68 |
69 |
73 |
74 |
78 |
79 |
83 |
84 |
88 |
89 |
92 |
93 |
94 |
101 |
108 |
115 |
122 |
129 |
136 |
137 |
138 |
139 |
146 |
147 | 3
148 |
149 |
1
150 |
1
151 |
1
152 |
153 |
154 |
155 | 3
156 |
157 |
1
158 |
1
159 |
1
160 |
161 |
162 |
163 | 3
164 |
165 |
1
166 |
1
167 |
1
168 |
169 |
170 |
171 |
172 |
173 |
180 |
187 |
188 | 4
189 |
190 |
1
191 |
1
192 |
1
193 |
1
194 |
195 |
196 |
197 |
198 |
199 |
206 |
1
207 |
214 |
1
215 |
216 |
217 |
218 |
219 | 5
220 |
221 |
2
222 |
2
223 |
1
224 |
225 |
226 |
1
227 |
228 | 5
229 |
230 |
1
231 |
1
232 |
1
233 |
1
234 |
1
235 |
236 |
237 |
1
238 |
239 |
240 |
256 |
257 |
258 |
265 |
266 | 6
267 |
268 |
2
269 |
2
270 |
2
271 |
272 |
273 |
274 |
275 |
285 |
286 |
296 |
297 |
307 |
308 |
309 |
310 | 7
311 |
312 |
1
313 |
1
314 |
1
315 |
1
316 |
1
317 |
1
318 |
1
319 |
320 |
321 |
5
322 |
323 |
324 |
334 |
335 |
345 |
346 |
356 |
357 |
367 |
368 |
369 |
370 | 8
371 |
372 |
3
373 |
3
374 |
2
375 |
376 |
377 |
4
378 |
379 |
380 |
381 |
382 | 8
383 |
384 |
2
385 |
2
386 |
2
387 |
2
388 |
389 |
390 |
4
391 |
392 |
393 |
394 |
395 | 8
396 |
397 |
1
398 |
1
399 |
1
400 |
1
401 |
1
402 |
1
403 |
1
404 |
1
405 |
406 |
407 |
4
408 |
409 |
410 |
420 |
421 |
431 |
432 |
442 |
443 |
453 |
454 |
455 |
456 | 9
457 |
458 |
3
459 |
3
460 |
3
461 |
462 |
463 |
3
464 |
465 |
466 |
467 |
468 | 9
469 |
470 |
1
471 |
1
472 |
1
473 |
1
474 |
1
475 |
1
476 |
1
477 |
1
478 |
1
479 |
480 |
481 |
3
482 |
483 |
484 |
494 |
495 |
505 |
506 |
516 |
517 |
527 |
528 |
538 |
539 |
540 |
541 | 10
542 |
543 |
2
544 |
2
545 |
2
546 |
2
547 |
2
548 |
549 |
550 |
2
551 |
552 |
553 |
554 |
555 | 10
556 |
557 |
1
558 |
1
559 |
1
560 |
1
561 |
1
562 |
1
563 |
1
564 |
1
565 |
1
566 |
1
567 |
568 |
569 |
2
570 |
571 |
572 |
581 |
582 |
591 |
592 |
601 |
602 |
611 |
612 |
621 |
622 |
623 |
624 | 11
625 |
626 |
1
627 |
1
628 |
1
629 |
1
630 |
1
631 |
1
632 |
1
633 |
1
634 |
1
635 |
1
636 |
1
637 |
638 |
639 |
1
640 |
641 |
642 |
651 |
652 |
661 |
662 |
671 |
672 |
681 |
682 |
691 |
692 |
701 |
702 |
703 |
704 | 12
705 |
706 |
4
707 |
4
708 |
4
709 |
710 |
711 |
712 |
713 |
714 |
715 | 12
716 |
717 |
3
718 |
3
719 |
3
720 |
3
721 |
722 |
723 |
724 |
725 |
726 |
727 | 12
728 |
729 |
2
730 |
2
731 |
2
732 |
2
733 |
2
734 |
2
735 |
736 |
737 |
738 |
739 |
740 |
741 | 12
742 |
743 |
1
744 |
1
745 |
1
746 |
1
747 |
1
748 |
1
749 |
1
750 |
1
751 |
1
752 |
1
753 |
1
754 |
1
755 |
756 |
757 |
758 |
759 |