zen-grids 2.0.0.alpha.2 → 2.0.0.beta.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +7 -0
- data/LICENSE.txt +333 -268
- data/README.txt +5 -5
- data/bower.json +25 -0
- data/templates/project/_init.scss +5 -5
- data/templates/project/_layout.scss +8 -8
- data/templates/unit-tests/manifest.rb +14 -13
- data/templates/unit-tests/sass/function-zen-direction-switch.scss +23 -0
- data/templates/unit-tests/sass/function-zen-grid-item-width.scss +12 -6
- data/templates/unit-tests/sass/function-zen-half-gutter.scss +6 -6
- data/templates/unit-tests/sass/function-zen-unit-width.scss +17 -5
- data/templates/unit-tests/sass/zen-float.scss +7 -7
- data/templates/unit-tests/sass/zen-grid-background.scss +41 -30
- data/templates/unit-tests/sass/zen-grid-container.scss +11 -4
- data/templates/unit-tests/sass/zen-grid-flow-item.scss +22 -25
- data/templates/unit-tests/sass/zen-grid-item-base.scss +18 -13
- data/templates/unit-tests/sass/zen-grid-item.scss +56 -38
- data/templates/unit-tests/sass/zen-new-row.scss +26 -0
- data/templates/unit-tests/test-results/function-zen-direction-switch.css +16 -0
- data/templates/unit-tests/test-results/function-zen-grid-item-width.css +7 -3
- data/templates/unit-tests/test-results/function-zen-half-gutter.css +4 -4
- data/templates/unit-tests/test-results/function-zen-unit-width.css +6 -2
- data/templates/unit-tests/test-results/zen-float.css +3 -3
- data/templates/unit-tests/test-results/zen-grid-background.css +23 -17
- data/templates/unit-tests/test-results/zen-grid-container.css +13 -2
- data/templates/unit-tests/test-results/zen-grid-flow-item.css +8 -8
- data/templates/unit-tests/test-results/zen-grid-item-base.css +9 -3
- data/templates/unit-tests/test-results/zen-grid-item.css +13 -3
- data/templates/unit-tests/test-results/zen-new-row.css +16 -0
- data/zen-grids.gemspec +8 -7
- data/zen-grids/_background.scss +83 -39
- data/zen-grids/_flow.scss +73 -46
- data/zen-grids/_grids.scss +137 -82
- metadata +13 -29
- data/component.json +0 -26
- data/templates/unit-tests/sass/function-zen-direction-flip.scss +0 -23
- data/templates/unit-tests/sass/zen-clear.scss +0 -26
- data/templates/unit-tests/test-results/function-zen-direction-flip.css +0 -16
- data/templates/unit-tests/test-results/zen-clear.css +0 -16
data/README.txt
CHANGED
@@ -18,16 +18,16 @@ to a 12 column grid.
|
|
18
18
|
|
19
19
|
@import "zen-grids";
|
20
20
|
|
21
|
-
$zen-
|
22
|
-
|
21
|
+
$zen-gutters: 40px; // Set the gutter size. A half-gutter is used on
|
22
|
+
// each side of each column.
|
23
23
|
|
24
24
|
.container {
|
25
25
|
@include zen-grid-container(); // Define the container for your grid items.
|
26
26
|
}
|
27
27
|
|
28
|
-
$zen-
|
29
|
-
|
30
|
-
|
28
|
+
$zen-columns: 12; // Set the number of grid columns to use in this media
|
29
|
+
// query. You'll likely want a different grid for
|
30
|
+
// different screen sizes.
|
31
31
|
|
32
32
|
@media all and (min-width: 50em) {
|
33
33
|
.sidebar1 {
|
data/bower.json
ADDED
@@ -0,0 +1,25 @@
|
|
1
|
+
{
|
2
|
+
"name" : "zen-grids",
|
3
|
+
"location" : "JohnAlbin/zen-grids",
|
4
|
+
"description" : "Zen Grids is an intuitive, flexible grid system to create responsive, adaptive, fluid and fixed-width layouts.",
|
5
|
+
"keywords" : "Sass, Compass, grids, rwd",
|
6
|
+
|
7
|
+
"main" : [
|
8
|
+
"_zen-grids.scss",
|
9
|
+
"zen-grids/_background.scss",
|
10
|
+
"zen-grids/_flow.scss",
|
11
|
+
"zen-grids/_grids.scss"
|
12
|
+
],
|
13
|
+
"ignore" : [
|
14
|
+
"lib",
|
15
|
+
"templates",
|
16
|
+
"zen-grids.gemspec"
|
17
|
+
],
|
18
|
+
|
19
|
+
"licenses" : {
|
20
|
+
"type": "GPLv2",
|
21
|
+
"url": "http://www.gnu.org/licenses/gpl-2.0.html"
|
22
|
+
}
|
23
|
+
"authors" : ["John Albin Wilkins"],
|
24
|
+
"homepage" : "http://zengrids.com/"
|
25
|
+
}
|
@@ -5,13 +5,13 @@
|
|
5
5
|
//
|
6
6
|
|
7
7
|
// Legacy browser variables for Compass.
|
8
|
-
$legacy-support-for-ie6
|
9
|
-
$legacy-support-for-ie7
|
8
|
+
$legacy-support-for-ie6 : false;
|
9
|
+
$legacy-support-for-ie7 : false;
|
10
10
|
|
11
11
|
// Set up Zen Grids.
|
12
|
-
$zen-
|
13
|
-
$zen-
|
14
|
-
$zen-auto-include-item-base
|
12
|
+
$zen-columns : 1;
|
13
|
+
$zen-gutters : 20px;
|
14
|
+
$zen-auto-include-grid-item-base : false;
|
15
15
|
|
16
16
|
//
|
17
17
|
// Import our modules.
|
@@ -32,7 +32,7 @@
|
|
32
32
|
|
33
33
|
/* Horizontal navigation bar */
|
34
34
|
@media all and (min-width: 444px) {
|
35
|
-
$zen-
|
35
|
+
$zen-columns: 1;
|
36
36
|
$navbar-height: 5em;
|
37
37
|
|
38
38
|
.main {
|
@@ -46,7 +46,7 @@
|
|
46
46
|
}
|
47
47
|
|
48
48
|
@media all and (min-width: 444px) and (max-width: 665px) {
|
49
|
-
$zen-
|
49
|
+
$zen-columns: 2;
|
50
50
|
|
51
51
|
.centered {
|
52
52
|
@include zen-grid-background();
|
@@ -55,7 +55,7 @@
|
|
55
55
|
@include zen-grid-item(2, 1);
|
56
56
|
}
|
57
57
|
.grid-item__aside1 {
|
58
|
-
@include zen-
|
58
|
+
@include zen-new-row(); // Clear left-floated elements (.grid-item__content)
|
59
59
|
@include zen-grid-item(1, 1);
|
60
60
|
}
|
61
61
|
.grid-item__aside2 {
|
@@ -64,7 +64,7 @@
|
|
64
64
|
}
|
65
65
|
|
66
66
|
@media all and (min-width: 666px) and (max-width: 776px) {
|
67
|
-
$zen-
|
67
|
+
$zen-columns: 3;
|
68
68
|
|
69
69
|
.centered {
|
70
70
|
@include zen-grid-background();
|
@@ -76,13 +76,13 @@
|
|
76
76
|
@include zen-grid-item(1, 1, right); // Position from the right
|
77
77
|
}
|
78
78
|
.grid-item__aside2 {
|
79
|
-
@include zen-
|
79
|
+
@include zen-new-row(); // Clear left-floated elements (.grid-item__content)
|
80
80
|
@include zen-grid-item(2, 1);
|
81
81
|
}
|
82
82
|
}
|
83
83
|
|
84
84
|
@media all and (min-width: 777px) and (max-width: 998px) {
|
85
|
-
$zen-
|
85
|
+
$zen-columns: 3;
|
86
86
|
|
87
87
|
.centered {
|
88
88
|
@include zen-grid-background();
|
@@ -94,13 +94,13 @@
|
|
94
94
|
@include zen-grid-item(1, 1, right); // Position from the right
|
95
95
|
}
|
96
96
|
.grid-item__aside2 {
|
97
|
-
@include zen-
|
97
|
+
@include zen-new-row(right); // Clear right-floated elements (.grid-item__aside1)
|
98
98
|
@include zen-grid-item(1, 1, right);
|
99
99
|
}
|
100
100
|
}
|
101
101
|
|
102
102
|
@media all and (min-width: 999px) {
|
103
|
-
$zen-
|
103
|
+
$zen-columns: 5;
|
104
104
|
|
105
105
|
.centered {
|
106
106
|
@include zen-grid-background();
|
@@ -1,23 +1,24 @@
|
|
1
1
|
description "Unit tests for the Zen Grids system."
|
2
2
|
|
3
|
-
stylesheet 'sass/function-zen-direction-
|
4
|
-
stylesheet 'sass/function-zen-grid-item-width.scss',
|
5
|
-
stylesheet 'sass/function-zen-half-gutter.scss',
|
6
|
-
stylesheet 'sass/function-zen-unit-width.scss',
|
7
|
-
stylesheet 'sass/zen-
|
8
|
-
stylesheet 'sass/zen-float.scss',
|
9
|
-
stylesheet 'sass/zen-grid-background.scss',
|
10
|
-
stylesheet 'sass/zen-grid-container.scss',
|
11
|
-
stylesheet 'sass/zen-grid-flow-item.scss',
|
12
|
-
stylesheet 'sass/zen-grid-item-base.scss',
|
13
|
-
stylesheet 'sass/zen-grid-item.scss',
|
3
|
+
stylesheet 'sass/function-zen-direction-switch.scss', :media => 'all', :to => 'function-zen-direction-switch.scss'
|
4
|
+
stylesheet 'sass/function-zen-grid-item-width.scss', :media => 'all', :to => 'function-zen-grid-item-width.scss'
|
5
|
+
stylesheet 'sass/function-zen-half-gutter.scss', :media => 'all', :to => 'function-zen-half-gutter.scss'
|
6
|
+
stylesheet 'sass/function-zen-unit-width.scss', :media => 'all', :to => 'function-zen-unit-width.scss'
|
7
|
+
stylesheet 'sass/zen-new-row.scss', :media => 'all', :to => 'zen-new-row.scss'
|
8
|
+
stylesheet 'sass/zen-float.scss', :media => 'all', :to => 'zen-float.scss'
|
9
|
+
stylesheet 'sass/zen-grid-background.scss', :media => 'all', :to => 'zen-grid-background.scss'
|
10
|
+
stylesheet 'sass/zen-grid-container.scss', :media => 'all', :to => 'zen-grid-container.scss'
|
11
|
+
stylesheet 'sass/zen-grid-flow-item.scss', :media => 'all', :to => 'zen-grid-flow-item.scss'
|
12
|
+
stylesheet 'sass/zen-grid-item-base.scss', :media => 'all', :to => 'zen-grid-item-base.scss'
|
13
|
+
stylesheet 'sass/zen-grid-item.scss', :media => 'all', :to => 'zen-grid-item.scss'
|
14
14
|
|
15
|
-
file 'test-results/function-zen-direction-
|
15
|
+
file 'test-results/function-zen-direction-switch.css'
|
16
16
|
file 'test-results/function-zen-grid-item-width.css'
|
17
17
|
file 'test-results/function-zen-half-gutter.css'
|
18
18
|
file 'test-results/function-zen-unit-width.css'
|
19
|
-
file 'test-results/zen-
|
19
|
+
file 'test-results/zen-new-row.css'
|
20
20
|
file 'test-results/zen-float.css'
|
21
|
+
file 'test-results/zen-grid-background.css'
|
21
22
|
file 'test-results/zen-grid-container.css'
|
22
23
|
file 'test-results/zen-grid-flow-item.css'
|
23
24
|
file 'test-results/zen-grid-item-base.css'
|
@@ -0,0 +1,23 @@
|
|
1
|
+
/**
|
2
|
+
* @file
|
3
|
+
* Test zen-direction-switch()
|
4
|
+
*/
|
5
|
+
|
6
|
+
@import "zen-grids";
|
7
|
+
|
8
|
+
#test-zen-direction-switch {
|
9
|
+
/* Test zen-direction-switch(left) */
|
10
|
+
float: zen-direction-switch(left);
|
11
|
+
|
12
|
+
/* Test zen-direction-switch(right) */
|
13
|
+
float: zen-direction-switch(right);
|
14
|
+
|
15
|
+
/* Test zen-direction-switch(both) */
|
16
|
+
float: zen-direction-switch(both);
|
17
|
+
|
18
|
+
/* Test zen-direction-switch(none) */
|
19
|
+
float: zen-direction-switch(none);
|
20
|
+
|
21
|
+
/* Test zen-direction-switch(invalid) */
|
22
|
+
float: zen-direction-switch(invalid);
|
23
|
+
}
|
@@ -6,13 +6,13 @@
|
|
6
6
|
@import "zen-grids";
|
7
7
|
|
8
8
|
#test-zen-grid-item-width {
|
9
|
-
/* Test zen-grid-item-width(1) with default $zen-
|
9
|
+
/* Test zen-grid-item-width(1) with default $zen-columns: 1 */
|
10
10
|
width: zen-grid-item-width(1);
|
11
11
|
|
12
|
-
/* Test zen-grid-item-width(2) with $zen-
|
13
|
-
$zen-
|
12
|
+
/* Test zen-grid-item-width(2) with $zen-columns: 5 */
|
13
|
+
$zen-columns: 5;
|
14
14
|
width: zen-grid-item-width(2);
|
15
|
-
$zen-
|
15
|
+
$zen-columns: 1;
|
16
16
|
|
17
17
|
/* Test zen-grid-item-width(2, 5) */
|
18
18
|
width: zen-grid-item-width(2, 5);
|
@@ -33,6 +33,12 @@
|
|
33
33
|
/* Test zen-grid-item-width(2, 5, $grid-width: 1000px, $box-sizing: content-box) */
|
34
34
|
width: zen-grid-item-width(2, 5, $grid-width: 1000px, $box-sizing: content-box);
|
35
35
|
|
36
|
-
/* Test zen-grid-item-width(2, 5, $
|
37
|
-
width: zen-grid-item-width(2, 5, $
|
36
|
+
/* Test zen-grid-item-width(2, 5, $gutters: 10px, $grid-width: 1000px, $box-sizing: content-box) */
|
37
|
+
width: zen-grid-item-width(2, 5, $gutters: 10px, $grid-width: 1000px, $box-sizing: content-box);
|
38
|
+
|
39
|
+
/* Test zen-grid-item-width(3, 5, $gutters: 10%, $gutter-method: margin) */
|
40
|
+
width: zen-grid-item-width(3, 5, $gutters: 10%, $gutter-method: margin);
|
41
|
+
|
42
|
+
/* Test zen-grid-item-width(3.5, 5, $gutters: 10%, $gutter-method: margin) */
|
43
|
+
width: zen-grid-item-width(3.5, 5, $gutters: 10%, $gutter-method: margin);
|
38
44
|
}
|
@@ -6,11 +6,11 @@
|
|
6
6
|
@import "zen-grids";
|
7
7
|
|
8
8
|
#test-zen-half-gutter {
|
9
|
-
/* Test zen-half-gutter() with default $zen-
|
9
|
+
/* Test zen-half-gutter() with default $zen-gutters: 20px */
|
10
10
|
padding-left: zen-half-gutter();
|
11
11
|
|
12
|
-
/* Test zen-half-gutter() with $zen-
|
13
|
-
$zen-
|
12
|
+
/* Test zen-half-gutter() with $zen-gutters: 30px */
|
13
|
+
$zen-gutters: 30px;
|
14
14
|
padding-left: zen-half-gutter();
|
15
15
|
|
16
16
|
/* Test zen-half-gutter(10em) */
|
@@ -28,10 +28,10 @@
|
|
28
28
|
/* Test zen-half-gutter(11px, right) */
|
29
29
|
padding-left: zen-half-gutter(11px, right);
|
30
30
|
|
31
|
-
/* Test zen-half-gutter(11px) with $zen-
|
32
|
-
$zen-
|
31
|
+
/* Test zen-half-gutter(11px) with $zen-direction: right */
|
32
|
+
$zen-direction: right;
|
33
33
|
padding-left: zen-half-gutter(11px);
|
34
34
|
|
35
|
-
/* Test zen-half-gutter(11px, left) with $zen-
|
35
|
+
/* Test zen-half-gutter(11px, left) with $zen-direction: right */
|
36
36
|
padding-left: zen-half-gutter(11px, left);
|
37
37
|
}
|
@@ -6,13 +6,13 @@
|
|
6
6
|
@import "zen-grids";
|
7
7
|
|
8
8
|
#test-zen-unit-width {
|
9
|
-
/* Test zen-unit-width() with default $zen-
|
9
|
+
/* Test zen-unit-width() with default $zen-columns: 1 */
|
10
10
|
width: zen-unit-width();
|
11
11
|
|
12
|
-
/* Test zen-unit-width() with $zen-
|
13
|
-
$zen-
|
12
|
+
/* Test zen-unit-width() with $zen-columns: 5 */
|
13
|
+
$zen-columns: 5;
|
14
14
|
width: zen-unit-width();
|
15
|
-
$zen-
|
15
|
+
$zen-columns: 1;
|
16
16
|
|
17
17
|
/* Test zen-unit-width(5) */
|
18
18
|
width: zen-unit-width(5);
|
@@ -28,5 +28,17 @@
|
|
28
28
|
$zen-grid-width: 100%;
|
29
29
|
|
30
30
|
/* Test zen-unit-width(5, 100px) */
|
31
|
-
width: zen-unit-width(5, 100px);
|
31
|
+
width: zen-unit-width(5, $grid-width: 100px);
|
32
|
+
|
33
|
+
/* Test zen-unit-width() with $zen-columns: 3, $zen-gutter-method: margin, and $zen-gutters: 5% */
|
34
|
+
$zen-columns: 3;
|
35
|
+
$zen-gutter-method: margin;
|
36
|
+
$zen-gutters: 5%;
|
37
|
+
width: zen-unit-width();
|
38
|
+
$zen-columns: 1;
|
39
|
+
$zen-gutter-method: padding;
|
40
|
+
$zen-gutters: 20px;
|
41
|
+
|
42
|
+
/* Test zen-unit-width(3, 5px, margin, 100px) */
|
43
|
+
width: zen-unit-width(3, 5px, margin, 100px);
|
32
44
|
}
|
@@ -9,18 +9,18 @@
|
|
9
9
|
/* Test zen-float() */
|
10
10
|
@include zen-float();
|
11
11
|
|
12
|
-
/* Test zen-float() with $zen-
|
13
|
-
$zen-
|
12
|
+
/* Test zen-float() with $zen-direction: right */
|
13
|
+
$zen-direction: right;
|
14
14
|
@include zen-float();
|
15
|
-
$zen-
|
15
|
+
$zen-direction: left;
|
16
16
|
|
17
17
|
/* Test zen-float(left) */
|
18
18
|
@include zen-float(left);
|
19
19
|
|
20
|
-
/* Test zen-float(left, $
|
21
|
-
@include zen-float(left, $
|
20
|
+
/* Test zen-float(left, $switch-direction: TRUE) */
|
21
|
+
@include zen-float(left, $switch-direction: TRUE);
|
22
22
|
|
23
|
-
/* Test zen-float(left) with: $zen-
|
24
|
-
$zen-
|
23
|
+
/* Test zen-float(left) with: $zen-switch-direction: TRUE; */
|
24
|
+
$zen-switch-direction: TRUE;
|
25
25
|
@include zen-float(left);
|
26
26
|
}
|
@@ -11,59 +11,70 @@
|
|
11
11
|
@include zen-grid-background();
|
12
12
|
$zen-grid-numbers: both;
|
13
13
|
|
14
|
+
/* Test zen-grid-background() with margin gutter method, 5 column grid and 5% gutter */
|
15
|
+
$zen-columns: 5;
|
16
|
+
$zen-gutters: 5%;
|
17
|
+
$zen-gutter-method: margin;
|
18
|
+
$zen-grid-numbers: top;
|
19
|
+
@include zen-grid-background();
|
20
|
+
$zen-columns: 1;
|
21
|
+
$zen-gutters: 20px;
|
22
|
+
$zen-gutter-method: padding;
|
23
|
+
$zen-grid-numbers: both;
|
24
|
+
|
14
25
|
// Turn off numbers for all other tests.
|
15
26
|
$zen-grid-numbers: none;
|
16
27
|
|
17
28
|
/* Test zen-grid-background() with 12 column grid and 20px gutter */
|
18
|
-
$zen-
|
29
|
+
$zen-columns: 12;
|
19
30
|
@include zen-grid-background();
|
20
|
-
$zen-
|
31
|
+
$zen-columns: 1;
|
21
32
|
|
22
33
|
/* Test zen-grid-background(), 5 column grid, 10% gutter and black grid color */
|
23
|
-
$zen-
|
24
|
-
$zen-
|
34
|
+
$zen-columns: 5;
|
35
|
+
$zen-gutters: 10%;
|
25
36
|
$zen-grid-color: #000;
|
26
37
|
@include zen-grid-background();
|
27
|
-
$zen-
|
28
|
-
$zen-
|
38
|
+
$zen-columns: 1;
|
39
|
+
$zen-gutters: 20px;
|
29
40
|
$zen-grid-color: rgba(#ffdede, 0.8);
|
30
41
|
|
31
42
|
/* Test zen-grid-background() with 5 column grid and 40px gutter */
|
32
|
-
$zen-
|
33
|
-
$zen-
|
43
|
+
$zen-columns: 5;
|
44
|
+
$zen-gutters: 40px;
|
34
45
|
@include zen-grid-background();
|
35
|
-
$zen-
|
36
|
-
$zen-
|
46
|
+
$zen-columns: 1;
|
47
|
+
$zen-gutters: 20px;
|
37
48
|
|
38
|
-
/* Test zen-grid-background(), 5 column grid and 10% gutter and $zen-
|
39
|
-
$zen-
|
40
|
-
$zen-
|
41
|
-
$zen-
|
49
|
+
/* Test zen-grid-background(), 5 column grid and 10% gutter and $zen-switch-direction */
|
50
|
+
$zen-columns: 5;
|
51
|
+
$zen-gutters: 10%;
|
52
|
+
$zen-switch-direction: true;
|
42
53
|
@include zen-grid-background();
|
43
|
-
$zen-
|
44
|
-
$zen-
|
45
|
-
$zen-
|
54
|
+
$zen-columns: 1;
|
55
|
+
$zen-gutters: 20px;
|
56
|
+
$zen-switch-direction: false;
|
46
57
|
|
47
|
-
/* Test zen-grid-background() with 5 column grid and 40px gutter and $zen-
|
48
|
-
$zen-
|
49
|
-
$zen-
|
50
|
-
$zen-
|
58
|
+
/* Test zen-grid-background() with 5 column grid and 40px gutter and $zen-switch-direction */
|
59
|
+
$zen-columns: 5;
|
60
|
+
$zen-gutters: 40px;
|
61
|
+
$zen-switch-direction: true;
|
51
62
|
@include zen-grid-background();
|
52
|
-
$zen-
|
53
|
-
$zen-
|
54
|
-
$zen-
|
63
|
+
$zen-columns: 1;
|
64
|
+
$zen-gutters: 20px;
|
65
|
+
$zen-switch-direction: false;
|
55
66
|
|
56
67
|
/* Test zen-grid-background() with $zen-grid-width: 1000px, 5 column grid and 40px gutter */
|
57
68
|
$zen-grid-width: 1000px;
|
58
|
-
$zen-
|
59
|
-
$zen-
|
69
|
+
$zen-columns: 5;
|
70
|
+
$zen-gutters: 40px;
|
60
71
|
@include zen-grid-background();
|
61
72
|
$zen-grid-width: 100%;
|
62
|
-
$zen-
|
63
|
-
$zen-
|
73
|
+
$zen-columns: 1;
|
74
|
+
$zen-gutters: 20px;
|
64
75
|
|
65
76
|
/* Test zen-grid-background() with all 24 grid numbers */
|
66
|
-
$zen-
|
77
|
+
$zen-columns: 24;
|
67
78
|
@include zen-grid-background();
|
68
|
-
$zen-
|
79
|
+
$zen-columns: 1;
|
69
80
|
}
|
@@ -27,11 +27,18 @@
|
|
27
27
|
}
|
28
28
|
|
29
29
|
#test-zen-grid-container-4 {
|
30
|
-
/* Test zen-grid-container() with $context
|
31
|
-
@include zen-grid-container(
|
30
|
+
/* Test zen-grid-container() with $context: grid-item */
|
31
|
+
@include zen-grid-container(grid-item);
|
32
32
|
}
|
33
33
|
|
34
34
|
#test-zen-grid-container-5 {
|
35
|
-
/* Test zen-grid-container() with $context
|
36
|
-
@include zen-grid-container(
|
35
|
+
/* Test zen-grid-container() with $context: flow */
|
36
|
+
@include zen-grid-container(flow);
|
37
|
+
}
|
38
|
+
|
39
|
+
#test-zen-grid-container-6 {
|
40
|
+
/* Test zen-grid-container() with $zen-gutter-method: margin */
|
41
|
+
$zen-gutter-method: margin;
|
42
|
+
@include zen-grid-container();
|
43
|
+
$zen-gutter-method: padding;
|
37
44
|
}
|