zen-grids 2.0.0.beta.1 → 2.0.0.beta.2
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 -7
- data/.travis.yml +13 -0
- data/README.md +81 -0
- data/bower.json +14 -12
- data/sache.json +5 -0
- data/templates/project/_base-elements.scss +22 -0
- data/templates/project/_components.scss +73 -0
- data/templates/project/_init.scss +14 -4
- data/templates/project/_layouts.scss +143 -0
- data/templates/project/_visually-hidden.scss +2 -18
- data/templates/project/example.html +53 -24
- data/templates/project/manifest.rb +3 -2
- data/templates/project/styles.scss +3 -2
- data/tests/Gemfile +11 -0
- data/tests/README.md +16 -0
- data/tests/Rakefile +25 -0
- data/tests/config.rb +22 -0
- data/tests/controls/compass-compatibility.css +112 -0
- data/{templates/unit-tests/test-results → tests/controls}/function-zen-direction-switch.css +1 -1
- data/{templates/unit-tests/test-results → tests/controls}/function-zen-grid-item-width.css +0 -0
- data/{templates/unit-tests/test-results → tests/controls}/function-zen-half-gutter.css +0 -0
- data/{templates/unit-tests/test-results → tests/controls}/function-zen-unit-width.css +0 -0
- data/{templates/unit-tests/test-results → tests/controls}/zen-float.css +0 -0
- data/{templates/unit-tests/test-results/zen-grid-flow-item.css → tests/controls/zen-flow-item-width.css} +21 -55
- data/tests/controls/zen-grid-background.css +52 -0
- data/{templates/unit-tests/test-results → tests/controls}/zen-grid-container.css +20 -5
- data/{templates/unit-tests/test-results → tests/controls}/zen-grid-item-base.css +9 -12
- data/{templates/unit-tests/test-results → tests/controls}/zen-grid-item.css +14 -2
- data/{templates/unit-tests/test-results → tests/controls}/zen-new-row.css +0 -0
- data/tests/tests/compass-compatibility.scss +55 -0
- data/{templates/unit-tests/sass → tests/tests}/function-zen-direction-switch.scss +1 -0
- data/{templates/unit-tests/sass → tests/tests}/function-zen-grid-item-width.scss +6 -6
- data/{templates/unit-tests/sass → tests/tests}/function-zen-half-gutter.scss +2 -2
- data/{templates/unit-tests/sass → tests/tests}/function-zen-unit-width.scss +12 -12
- data/{templates/unit-tests/sass → tests/tests}/zen-float.scss +3 -3
- data/tests/tests/zen-flow-item-width.scss +85 -0
- data/tests/tests/zen-grid-background.scss +85 -0
- data/tests/tests/zen-grid-container.scss +49 -0
- data/tests/tests/zen-grid-item-base.scss +65 -0
- data/tests/tests/zen-grid-item.scss +101 -0
- data/{templates/unit-tests/sass → tests/tests}/zen-new-row.scss +3 -3
- data/tests/unit_tests.rb +57 -0
- data/zen-grids.gemspec +4 -45
- data/zen-grids/_background.scss +97 -157
- data/zen-grids/_flow.scss +39 -22
- data/zen-grids/_functions.scss +119 -0
- data/zen-grids/_grids.scss +71 -171
- data/zen-grids/_variables.scss +65 -0
- data/zen-grids/internal/_functions-compass-polyfill.scss +70 -0
- data/zen-grids/internal/_variables-background.scss +57 -0
- metadata +80 -69
- data/README.txt +0 -88
- data/templates/project/_layout.scss +0 -117
- data/templates/project/_modules.scss +0 -78
- data/templates/unit-tests/README.txt +0 -16
- data/templates/unit-tests/manifest.rb +0 -37
- data/templates/unit-tests/sass/zen-grid-background.scss +0 -80
- data/templates/unit-tests/sass/zen-grid-container.scss +0 -44
- data/templates/unit-tests/sass/zen-grid-flow-item.scss +0 -78
- data/templates/unit-tests/sass/zen-grid-item-base.scss +0 -59
- data/templates/unit-tests/sass/zen-grid-item.scss +0 -91
- data/templates/unit-tests/test-results/zen-grid-background.css +0 -60
@@ -1,117 +0,0 @@
|
|
1
|
-
/**
|
2
|
-
* @file
|
3
|
-
* Layout styles.
|
4
|
-
*
|
5
|
-
* We use example breakpoints of 444px, 666px, 777px, 999px and 1111px. The
|
6
|
-
* right breakpoints to use for your site depend on your content.
|
7
|
-
*/
|
8
|
-
|
9
|
-
.centered {
|
10
|
-
@include zen-grid-background();
|
11
|
-
padding: {
|
12
|
-
top: 1.5em;
|
13
|
-
bottom: 1.5em;
|
14
|
-
}
|
15
|
-
margin: {
|
16
|
-
left: auto;
|
17
|
-
right: auto;
|
18
|
-
}
|
19
|
-
max-width: 1111px;
|
20
|
-
}
|
21
|
-
|
22
|
-
/* Set the shared properties for all grid items. */
|
23
|
-
%grid-item,
|
24
|
-
.grid-item {
|
25
|
-
@include zen-grid-item-base();
|
26
|
-
}
|
27
|
-
|
28
|
-
/* Set the container for our grid items. */
|
29
|
-
.main {
|
30
|
-
@include zen-grid-container();
|
31
|
-
}
|
32
|
-
|
33
|
-
/* Horizontal navigation bar */
|
34
|
-
@media all and (min-width: 444px) {
|
35
|
-
$zen-columns: 1;
|
36
|
-
$navbar-height: 5em;
|
37
|
-
|
38
|
-
.main {
|
39
|
-
padding-top: $navbar-height;
|
40
|
-
}
|
41
|
-
.grid-item__menu {
|
42
|
-
@include zen-grid-item(1, 1);
|
43
|
-
margin-top: -$navbar-height;
|
44
|
-
height: $navbar-height;
|
45
|
-
}
|
46
|
-
}
|
47
|
-
|
48
|
-
@media all and (min-width: 444px) and (max-width: 665px) {
|
49
|
-
$zen-columns: 2;
|
50
|
-
|
51
|
-
.centered {
|
52
|
-
@include zen-grid-background();
|
53
|
-
}
|
54
|
-
.grid-item__content {
|
55
|
-
@include zen-grid-item(2, 1);
|
56
|
-
}
|
57
|
-
.grid-item__aside1 {
|
58
|
-
@include zen-new-row(); // Clear left-floated elements (.grid-item__content)
|
59
|
-
@include zen-grid-item(1, 1);
|
60
|
-
}
|
61
|
-
.grid-item__aside2 {
|
62
|
-
@include zen-grid-item(1, 2);
|
63
|
-
}
|
64
|
-
}
|
65
|
-
|
66
|
-
@media all and (min-width: 666px) and (max-width: 776px) {
|
67
|
-
$zen-columns: 3;
|
68
|
-
|
69
|
-
.centered {
|
70
|
-
@include zen-grid-background();
|
71
|
-
}
|
72
|
-
.grid-item__content {
|
73
|
-
@include zen-grid-item(2, 1);
|
74
|
-
}
|
75
|
-
.grid-item__aside1 {
|
76
|
-
@include zen-grid-item(1, 1, right); // Position from the right
|
77
|
-
}
|
78
|
-
.grid-item__aside2 {
|
79
|
-
@include zen-new-row(); // Clear left-floated elements (.grid-item__content)
|
80
|
-
@include zen-grid-item(2, 1);
|
81
|
-
}
|
82
|
-
}
|
83
|
-
|
84
|
-
@media all and (min-width: 777px) and (max-width: 998px) {
|
85
|
-
$zen-columns: 3;
|
86
|
-
|
87
|
-
.centered {
|
88
|
-
@include zen-grid-background();
|
89
|
-
}
|
90
|
-
.grid-item__content {
|
91
|
-
@include zen-grid-item(2, 1);
|
92
|
-
}
|
93
|
-
.grid-item__aside1 {
|
94
|
-
@include zen-grid-item(1, 1, right); // Position from the right
|
95
|
-
}
|
96
|
-
.grid-item__aside2 {
|
97
|
-
@include zen-new-row(right); // Clear right-floated elements (.grid-item__aside1)
|
98
|
-
@include zen-grid-item(1, 1, right);
|
99
|
-
}
|
100
|
-
}
|
101
|
-
|
102
|
-
@media all and (min-width: 999px) {
|
103
|
-
$zen-columns: 5;
|
104
|
-
|
105
|
-
.centered {
|
106
|
-
@include zen-grid-background();
|
107
|
-
}
|
108
|
-
.grid-item__content {
|
109
|
-
@include zen-grid-item(3, 2);
|
110
|
-
}
|
111
|
-
.grid-item__aside1 {
|
112
|
-
@include zen-grid-item(1, 1);
|
113
|
-
}
|
114
|
-
.grid-item__aside2 {
|
115
|
-
@include zen-grid-item(1, 5);
|
116
|
-
}
|
117
|
-
}
|
@@ -1,78 +0,0 @@
|
|
1
|
-
/**
|
2
|
-
* @file
|
3
|
-
* Modular styles.
|
4
|
-
*/
|
5
|
-
|
6
|
-
|
7
|
-
html {
|
8
|
-
font-size: 16px;
|
9
|
-
line-height: 1.5em;
|
10
|
-
}
|
11
|
-
|
12
|
-
p {
|
13
|
-
margin: {
|
14
|
-
top: 1.5em;
|
15
|
-
bottom: 1.5em;
|
16
|
-
}
|
17
|
-
}
|
18
|
-
|
19
|
-
/* Skip link styling */
|
20
|
-
.skip-link {
|
21
|
-
margin: 0;
|
22
|
-
}
|
23
|
-
.skip-link__link,
|
24
|
-
.skip-link__link:visited {
|
25
|
-
display: block;
|
26
|
-
width: 100%;
|
27
|
-
padding: 2px 0 3px 0;
|
28
|
-
text-align: center;
|
29
|
-
background-color: #666;
|
30
|
-
color: #fff;
|
31
|
-
}
|
32
|
-
/* The skip-link link will be completely hidden until a user tabs to the link. */
|
33
|
-
@media all and (min-width: 444px) {
|
34
|
-
.skip-link__link {
|
35
|
-
@include visually-focusable();
|
36
|
-
}
|
37
|
-
}
|
38
|
-
|
39
|
-
/* Set a consistent padding around all containers */
|
40
|
-
.header,
|
41
|
-
.footer {
|
42
|
-
@extend %grid-item;
|
43
|
-
}
|
44
|
-
.grid-item,
|
45
|
-
.footer {
|
46
|
-
padding-top: 1.5em;
|
47
|
-
}
|
48
|
-
|
49
|
-
/* Source-order meta info */
|
50
|
-
header {
|
51
|
-
h1,
|
52
|
-
h2 {
|
53
|
-
display: inline;
|
54
|
-
}
|
55
|
-
p {
|
56
|
-
display: inline;
|
57
|
-
text-transform: uppercase;
|
58
|
-
font-size: 0.8em;
|
59
|
-
color: #c00;
|
60
|
-
}
|
61
|
-
}
|
62
|
-
|
63
|
-
.pull-quote {
|
64
|
-
$font-size: 1.2em;
|
65
|
-
|
66
|
-
@include zen-float();
|
67
|
-
@include zen-grid-flow-item(1, 2);
|
68
|
-
@media all and (min-width: 999px) {
|
69
|
-
@include zen-grid-flow-item(1, 3);
|
70
|
-
}
|
71
|
-
margin: {
|
72
|
-
top: 1em*(1.5em/$font-size);
|
73
|
-
}
|
74
|
-
font-size: $font-size;
|
75
|
-
line-height: 1em*(1.5em/$font-size);
|
76
|
-
font-weight: bold;
|
77
|
-
font-style: italic;
|
78
|
-
}
|
@@ -1,16 +0,0 @@
|
|
1
|
-
UNIT TESTS FOR ZEN GRIDS
|
2
|
-
------------------------
|
3
|
-
|
4
|
-
To run the unit tests for Zen Grids:
|
5
|
-
|
6
|
-
1. Create a "tests" Compass project using the unit-tests pattern:
|
7
|
-
|
8
|
-
compass create tests -r zen-grids --using=zen-grids/unit-tests
|
9
|
-
|
10
|
-
2. From inside the "tests" project, compare the compiled stylesheets to the
|
11
|
-
previous unit test results in the test-results directory:
|
12
|
-
|
13
|
-
diff -r test-results/ stylesheets/
|
14
|
-
|
15
|
-
If the unit tests were successful, the above command should report no
|
16
|
-
differences.
|
@@ -1,37 +0,0 @@
|
|
1
|
-
description "Unit tests for the Zen Grids system."
|
2
|
-
|
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
|
-
|
15
|
-
file 'test-results/function-zen-direction-switch.css'
|
16
|
-
file 'test-results/function-zen-grid-item-width.css'
|
17
|
-
file 'test-results/function-zen-half-gutter.css'
|
18
|
-
file 'test-results/function-zen-unit-width.css'
|
19
|
-
file 'test-results/zen-new-row.css'
|
20
|
-
file 'test-results/zen-float.css'
|
21
|
-
file 'test-results/zen-grid-background.css'
|
22
|
-
file 'test-results/zen-grid-container.css'
|
23
|
-
file 'test-results/zen-grid-flow-item.css'
|
24
|
-
file 'test-results/zen-grid-item-base.css'
|
25
|
-
file 'test-results/zen-grid-item.css'
|
26
|
-
|
27
|
-
file 'README.txt'
|
28
|
-
|
29
|
-
help %Q{
|
30
|
-
To run the unit tests, simply run "compass compile" and compare the generated
|
31
|
-
CSS to those in the results directory.
|
32
|
-
diff -r results css
|
33
|
-
}
|
34
|
-
|
35
|
-
welcome_message %Q{
|
36
|
-
You rock! The unit tests for the Zen Grids system are now installed.
|
37
|
-
}
|
@@ -1,80 +0,0 @@
|
|
1
|
-
/**
|
2
|
-
* @file
|
3
|
-
* Test zen-grid-background()
|
4
|
-
*/
|
5
|
-
|
6
|
-
@import "zen-grids/background";
|
7
|
-
|
8
|
-
#test-zen-grid-background {
|
9
|
-
/* Test zen-grid-background() with 1 column grid and 20px gutter */
|
10
|
-
$zen-grid-numbers: top;
|
11
|
-
@include zen-grid-background();
|
12
|
-
$zen-grid-numbers: both;
|
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
|
-
|
25
|
-
// Turn off numbers for all other tests.
|
26
|
-
$zen-grid-numbers: none;
|
27
|
-
|
28
|
-
/* Test zen-grid-background() with 12 column grid and 20px gutter */
|
29
|
-
$zen-columns: 12;
|
30
|
-
@include zen-grid-background();
|
31
|
-
$zen-columns: 1;
|
32
|
-
|
33
|
-
/* Test zen-grid-background(), 5 column grid, 10% gutter and black grid color */
|
34
|
-
$zen-columns: 5;
|
35
|
-
$zen-gutters: 10%;
|
36
|
-
$zen-grid-color: #000;
|
37
|
-
@include zen-grid-background();
|
38
|
-
$zen-columns: 1;
|
39
|
-
$zen-gutters: 20px;
|
40
|
-
$zen-grid-color: rgba(#ffdede, 0.8);
|
41
|
-
|
42
|
-
/* Test zen-grid-background() with 5 column grid and 40px gutter */
|
43
|
-
$zen-columns: 5;
|
44
|
-
$zen-gutters: 40px;
|
45
|
-
@include zen-grid-background();
|
46
|
-
$zen-columns: 1;
|
47
|
-
$zen-gutters: 20px;
|
48
|
-
|
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;
|
53
|
-
@include zen-grid-background();
|
54
|
-
$zen-columns: 1;
|
55
|
-
$zen-gutters: 20px;
|
56
|
-
$zen-switch-direction: false;
|
57
|
-
|
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;
|
62
|
-
@include zen-grid-background();
|
63
|
-
$zen-columns: 1;
|
64
|
-
$zen-gutters: 20px;
|
65
|
-
$zen-switch-direction: false;
|
66
|
-
|
67
|
-
/* Test zen-grid-background() with $zen-grid-width: 1000px, 5 column grid and 40px gutter */
|
68
|
-
$zen-grid-width: 1000px;
|
69
|
-
$zen-columns: 5;
|
70
|
-
$zen-gutters: 40px;
|
71
|
-
@include zen-grid-background();
|
72
|
-
$zen-grid-width: 100%;
|
73
|
-
$zen-columns: 1;
|
74
|
-
$zen-gutters: 20px;
|
75
|
-
|
76
|
-
/* Test zen-grid-background() with all 24 grid numbers */
|
77
|
-
$zen-columns: 24;
|
78
|
-
@include zen-grid-background();
|
79
|
-
$zen-columns: 1;
|
80
|
-
}
|
@@ -1,44 +0,0 @@
|
|
1
|
-
/**
|
2
|
-
* @file
|
3
|
-
* Test zen-grid-container()
|
4
|
-
*/
|
5
|
-
|
6
|
-
@import "zen-grids";
|
7
|
-
|
8
|
-
#test-zen-grid-container {
|
9
|
-
/* Test zen-grid-container() */
|
10
|
-
@include zen-grid-container();
|
11
|
-
}
|
12
|
-
|
13
|
-
#test-zen-grid-container-2 {
|
14
|
-
/* Test zen-grid-container() with $legacy-support-for-ie7: true */
|
15
|
-
$legacy-support-for-ie7: true;
|
16
|
-
@include zen-grid-container();
|
17
|
-
$legacy-support-for-ie7: false;
|
18
|
-
}
|
19
|
-
|
20
|
-
#test-zen-grid-container-3 {
|
21
|
-
/* Test zen-grid-container() with $legacy-support-for-ie6: true */
|
22
|
-
$legacy-support-for-ie6: true;
|
23
|
-
$legacy-support-for-ie7: true;
|
24
|
-
@include zen-grid-container();
|
25
|
-
$legacy-support-for-ie6: false;
|
26
|
-
$legacy-support-for-ie7: false;
|
27
|
-
}
|
28
|
-
|
29
|
-
#test-zen-grid-container-4 {
|
30
|
-
/* Test zen-grid-container() with $context: grid-item */
|
31
|
-
@include zen-grid-container(grid-item);
|
32
|
-
}
|
33
|
-
|
34
|
-
#test-zen-grid-container-5 {
|
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;
|
44
|
-
}
|
@@ -1,78 +0,0 @@
|
|
1
|
-
/**
|
2
|
-
* @file
|
3
|
-
* Test zen-grid-flow-item()
|
4
|
-
*/
|
5
|
-
|
6
|
-
@import "zen-grids/flow";
|
7
|
-
|
8
|
-
#test-zen-grid-flow-item {
|
9
|
-
// We will use a 5 column grid for all tests.
|
10
|
-
$zen-columns: 5;
|
11
|
-
|
12
|
-
/* Test zen-grid-flow-item(1) without setting $parent-column-span */
|
13
|
-
@include zen-grid-flow-item(1);
|
14
|
-
|
15
|
-
/* Test zen-grid-flow-item(1, 4) with 20px gutter */
|
16
|
-
@include zen-grid-flow-item(1, 4);
|
17
|
-
|
18
|
-
/* Test zen-grid-flow-item(1, 4) with 15px gutter */
|
19
|
-
$zen-gutters: 15px;
|
20
|
-
@include zen-grid-flow-item(1, 4);
|
21
|
-
$zen-gutters: 20px;
|
22
|
-
|
23
|
-
/* Test zen-grid-flow-item(1) with 5 columns, 20px gutter and $zen-grid-width: 1000px */
|
24
|
-
$zen-grid-width: 1000px;
|
25
|
-
@include zen-grid-flow-item(1);
|
26
|
-
$zen-grid-width: 100%;
|
27
|
-
|
28
|
-
/* Test zen-grid-flow-item(1) with 5 columns, 20px gutter, $zen-grid-width: 1000px, $alpha-gutter: true and $omega-gutter: false */
|
29
|
-
$zen-grid-width: 1000px;
|
30
|
-
@include zen-grid-flow-item(1, $alpha-gutter: true, $omega-gutter: false);
|
31
|
-
$zen-grid-width: 100%;
|
32
|
-
|
33
|
-
/* Test zen-grid-flow-item(1) with 5 columns, 20px gutter, $zen-grid-width: 1000px and $omega-gutter: false */
|
34
|
-
$zen-grid-width: 1000px;
|
35
|
-
@include zen-grid-flow-item(1, $omega-gutter: false);
|
36
|
-
$zen-grid-width: 100%;
|
37
|
-
|
38
|
-
/* Test zen-grid-flow-item(1, 4) with 15px gutter and $zen-direction: right */
|
39
|
-
$zen-gutters: 15px;
|
40
|
-
$zen-direction: right;
|
41
|
-
@include zen-grid-flow-item(1, 4);
|
42
|
-
$zen-gutters: 20px;
|
43
|
-
$zen-direction: left;
|
44
|
-
|
45
|
-
/* Test zen-grid-flow-item(1, 4) with 15px gutter and $alpha-gutter: true */
|
46
|
-
$zen-gutters: 15px;
|
47
|
-
@include zen-grid-flow-item(1, 4, $alpha-gutter: true);
|
48
|
-
$zen-gutters: 20px;
|
49
|
-
|
50
|
-
/* Test zen-grid-flow-item(1, 4) with 15px gutter and $omega-gutter: false */
|
51
|
-
$zen-gutters: 15px;
|
52
|
-
@include zen-grid-flow-item(1, 4, $omega-gutter: false);
|
53
|
-
$zen-gutters: 20px;
|
54
|
-
|
55
|
-
/* Test zen-grid-flow-item(3, 4) with 20px gutter and $alpha-gutter: true */
|
56
|
-
@include zen-grid-flow-item(3, 4, $alpha-gutter: true);
|
57
|
-
|
58
|
-
/* Test zen-grid-flow-item(3, 4) with 20px gutter and $omega-gutter: false */
|
59
|
-
@include zen-grid-flow-item(3, 4, $omega-gutter: false);
|
60
|
-
|
61
|
-
/* Test zen-grid-flow-item(1, 4) with 15px gutter, $zen-direction: right and $alpha-gutter: true */
|
62
|
-
$zen-gutters: 15px;
|
63
|
-
$zen-direction: right;
|
64
|
-
@include zen-grid-flow-item(1, 4, $alpha-gutter: true);
|
65
|
-
$zen-gutters: 20px;
|
66
|
-
$zen-direction: left;
|
67
|
-
|
68
|
-
/* Test zen-grid-flow-item(1, 4) with $zen-box-sizing: content-box and 10% gutter */
|
69
|
-
$zen-gutters: 10%;
|
70
|
-
$zen-box-sizing: content-box;
|
71
|
-
@include zen-grid-flow-item(1, 4);
|
72
|
-
$zen-gutters: 20px;
|
73
|
-
$zen-box-sizing: border-box;
|
74
|
-
|
75
|
-
/* Test zen-grid-flow-item(1, 4) with $zen-auto-include-flow-item-base: false */
|
76
|
-
$zen-auto-include-flow-item-base: false;
|
77
|
-
@include zen-grid-flow-item(1, 4);
|
78
|
-
}
|