zen-grids 1.2 → 1.3
Sign up to get free protection for your applications and to get access to all the features.
- data/README.txt +2 -0
- data/stylesheets/zen/_background-grid.scss +7 -0
- data/stylesheets/zen/_grids.scss +148 -139
- data/templates/project/_init.scss +20 -0
- data/templates/project/_layout.scss +102 -0
- data/templates/project/_modules.scss +72 -0
- data/templates/project/_visually-hidden.scss +51 -0
- data/templates/project/example.html +12 -12
- data/templates/project/manifest.rb +6 -4
- data/templates/project/styles.scss +5 -2
- data/templates/unit-tests/sass/function-zen-grid-item-width.scss +8 -2
- data/templates/unit-tests/sass/zen-grid-flow-item.scss +22 -1
- data/templates/unit-tests/sass/zen-grid-item.scss +16 -0
- data/templates/unit-tests/test-results/function-zen-direction-flip.css +0 -1
- data/templates/unit-tests/test-results/function-zen-grid-item-width.css +6 -3
- data/templates/unit-tests/test-results/function-zen-half-gutter.css +0 -1
- data/templates/unit-tests/test-results/function-zen-unit-width.css +0 -1
- data/templates/unit-tests/test-results/zen-clear.css +0 -1
- data/templates/unit-tests/test-results/zen-float.css +0 -1
- data/templates/unit-tests/test-results/zen-grid-container.css +0 -9
- data/templates/unit-tests/test-results/zen-grid-flow-item.css +46 -13
- data/templates/unit-tests/test-results/zen-grid-item-base.css +2 -2
- data/templates/unit-tests/test-results/zen-grid-item.css +2 -2
- data/templates/unit-tests/test-results/zen-nested-container.css +0 -3
- data/zen-grids.gemspec +6 -4
- metadata +8 -6
- data/templates/project/common.scss +0 -57
- data/templates/project/layout.scss +0 -137
|
@@ -0,0 +1,102 @@
|
|
|
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
|
+
.header,
|
|
10
|
+
.main,
|
|
11
|
+
.footer {
|
|
12
|
+
margin: {
|
|
13
|
+
left: auto;
|
|
14
|
+
right: auto;
|
|
15
|
+
}
|
|
16
|
+
max-width: 1111px;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
/* Set the shared properties for all grid items. */
|
|
20
|
+
%grid-item,
|
|
21
|
+
.grid-item {
|
|
22
|
+
@include zen-grid-item-base();
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
/* Set the container for our grid items. */
|
|
26
|
+
.main {
|
|
27
|
+
@include zen-grid-container();
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
/* Horizontal navigation bar */
|
|
31
|
+
@media all and (min-width: 444px) {
|
|
32
|
+
$zen-column-count: 1;
|
|
33
|
+
$navbar-height: 4em;
|
|
34
|
+
|
|
35
|
+
.main {
|
|
36
|
+
padding-top: $navbar-height;
|
|
37
|
+
}
|
|
38
|
+
.menu {
|
|
39
|
+
@include zen-grid-item(1, 1);
|
|
40
|
+
margin-top: -$navbar-height;
|
|
41
|
+
height: $navbar-height;
|
|
42
|
+
}
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
@media all and (min-width: 444px) and (max-width: 665px) {
|
|
46
|
+
$zen-column-count: 2;
|
|
47
|
+
|
|
48
|
+
.grid-item__content {
|
|
49
|
+
@include zen-grid-item(2, 1);
|
|
50
|
+
}
|
|
51
|
+
.grid-item__aside1 {
|
|
52
|
+
@include zen-clear(); // Clear left-floated elements (.grid-item__content)
|
|
53
|
+
@include zen-grid-item(1, 1);
|
|
54
|
+
}
|
|
55
|
+
.grid-item__aside2 {
|
|
56
|
+
@include zen-grid-item(1, 2);
|
|
57
|
+
}
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
@media all and (min-width: 666px) and (max-width: 776px) {
|
|
61
|
+
$zen-column-count: 3;
|
|
62
|
+
|
|
63
|
+
.grid-item__content {
|
|
64
|
+
@include zen-grid-item(2, 1);
|
|
65
|
+
}
|
|
66
|
+
.grid-item__aside1 {
|
|
67
|
+
@include zen-grid-item(1, 1, right); // Position from the right
|
|
68
|
+
}
|
|
69
|
+
.grid-item__aside2 {
|
|
70
|
+
@include zen-clear(); // Clear left-floated elements (.grid-item__content)
|
|
71
|
+
@include zen-grid-item(2, 1);
|
|
72
|
+
}
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
@media all and (min-width: 777px) and (max-width: 998px) {
|
|
76
|
+
$zen-column-count: 3;
|
|
77
|
+
|
|
78
|
+
.grid-item__content {
|
|
79
|
+
@include zen-grid-item(2, 1);
|
|
80
|
+
}
|
|
81
|
+
.grid-item__aside1 {
|
|
82
|
+
@include zen-grid-item(1, 1, right); // Position from the right
|
|
83
|
+
}
|
|
84
|
+
.grid-item__aside2 {
|
|
85
|
+
@include zen-clear(right); // Clear right-floated elements (.grid-item__aside1)
|
|
86
|
+
@include zen-grid-item(1, 1, right);
|
|
87
|
+
}
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
@media all and (min-width: 999px) {
|
|
91
|
+
$zen-column-count: 5;
|
|
92
|
+
|
|
93
|
+
.grid-item__content {
|
|
94
|
+
@include zen-grid-item(3, 2);
|
|
95
|
+
}
|
|
96
|
+
.grid-item__aside1 {
|
|
97
|
+
@include zen-grid-item(1, 1);
|
|
98
|
+
}
|
|
99
|
+
.grid-item__aside2 {
|
|
100
|
+
@include zen-grid-item(1, 5);
|
|
101
|
+
}
|
|
102
|
+
}
|
|
@@ -0,0 +1,72 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @file
|
|
3
|
+
* Modular styles.
|
|
4
|
+
*/
|
|
5
|
+
|
|
6
|
+
|
|
7
|
+
/* Skip link styling */
|
|
8
|
+
.skip-link {
|
|
9
|
+
margin: 0;
|
|
10
|
+
}
|
|
11
|
+
.skip-link__link,
|
|
12
|
+
.skip-link__link:visited {
|
|
13
|
+
display: block;
|
|
14
|
+
width: 100%;
|
|
15
|
+
padding: 2px 0 3px 0;
|
|
16
|
+
text-align: center;
|
|
17
|
+
background-color: #666;
|
|
18
|
+
color: #fff;
|
|
19
|
+
}
|
|
20
|
+
/* The skip-link link will be completely hidden until a user tabs to the link. */
|
|
21
|
+
@media all and (min-width: 444px) {
|
|
22
|
+
.skip-link__link {
|
|
23
|
+
@include visually-focusable();
|
|
24
|
+
}
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
/* Set a consistent padding around all containers */
|
|
28
|
+
.header,
|
|
29
|
+
.menu,
|
|
30
|
+
.footer {
|
|
31
|
+
@extend %grid-item;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
/* Alternate border styling */
|
|
35
|
+
.header,
|
|
36
|
+
.menu,
|
|
37
|
+
.grid-item__aside2 {
|
|
38
|
+
border: 1px solid #ccc;
|
|
39
|
+
}
|
|
40
|
+
.grid-item__content,
|
|
41
|
+
.grid-item__aside1,
|
|
42
|
+
.footer {
|
|
43
|
+
border: 1px solid #09f;
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
/* Source-order meta info */
|
|
47
|
+
header {
|
|
48
|
+
h1,
|
|
49
|
+
h2 {
|
|
50
|
+
display: inline;
|
|
51
|
+
}
|
|
52
|
+
p {
|
|
53
|
+
display: inline;
|
|
54
|
+
text-transform: uppercase;
|
|
55
|
+
font-size: 0.8em;
|
|
56
|
+
color: #c00;
|
|
57
|
+
}
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
.pull-quote {
|
|
61
|
+
$font-size: 1.2em;
|
|
62
|
+
|
|
63
|
+
@include zen-grid-flow-item(1, 3);
|
|
64
|
+
@include zen-float();
|
|
65
|
+
margin: {
|
|
66
|
+
top: (1em/$font-size);
|
|
67
|
+
bottom: (1em/$font-size);
|
|
68
|
+
}
|
|
69
|
+
font-size: $font-size;
|
|
70
|
+
font-weight: bold;
|
|
71
|
+
font-style: italic;
|
|
72
|
+
}
|
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
//
|
|
2
|
+
// @file
|
|
3
|
+
// Accessibility features.
|
|
4
|
+
//
|
|
5
|
+
|
|
6
|
+
// As defined by http://snook.ca/archives/html_and_css/hiding-content-for-accessibility
|
|
7
|
+
@mixin visually-hidden {
|
|
8
|
+
position: absolute !important;
|
|
9
|
+
height: 1px;
|
|
10
|
+
width: 1px;
|
|
11
|
+
overflow: hidden;
|
|
12
|
+
@if $legacy-support-for-ie6 or $legacy-support-for-ie7 {
|
|
13
|
+
clip: rect(1px 1px 1px 1px); // IE6 and IE7 use the wrong syntax.
|
|
14
|
+
}
|
|
15
|
+
clip: rect(1px, 1px, 1px, 1px);
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
// Turns off the visually-hidden effect.
|
|
19
|
+
@mixin visually-hidden-off {
|
|
20
|
+
position: static !important;
|
|
21
|
+
clip: auto;
|
|
22
|
+
height: auto;
|
|
23
|
+
width: auto;
|
|
24
|
+
overflow: auto;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
// Makes an element visually hidden, except when it receives focus.
|
|
28
|
+
@mixin visually-focusable {
|
|
29
|
+
@include visually-hidden();
|
|
30
|
+
|
|
31
|
+
&:active,
|
|
32
|
+
&:focus {
|
|
33
|
+
@include visually-hidden-off();
|
|
34
|
+
}
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
// Placeholder styles for use with @extend.
|
|
38
|
+
%visually-hidden {
|
|
39
|
+
@include visually-hidden();
|
|
40
|
+
}
|
|
41
|
+
%visually-hidden-off {
|
|
42
|
+
@include visually-hidden-off();
|
|
43
|
+
}
|
|
44
|
+
%visually-focusable {
|
|
45
|
+
@extend %visually-hidden;
|
|
46
|
+
|
|
47
|
+
&:active,
|
|
48
|
+
&:focus {
|
|
49
|
+
@extend %visually-hidden-off;
|
|
50
|
+
}
|
|
51
|
+
}
|
|
@@ -7,29 +7,29 @@
|
|
|
7
7
|
</head>
|
|
8
8
|
<body>
|
|
9
9
|
|
|
10
|
-
<p
|
|
11
|
-
<a href="#main-menu">Jump to main menu</a>
|
|
10
|
+
<p class="skip-link">
|
|
11
|
+
<a href="#main-menu" class="skip-link__link">Jump to main menu</a>
|
|
12
12
|
</p>
|
|
13
13
|
|
|
14
|
-
<header
|
|
15
|
-
<h1>Zen Grids: sample usage</h1>
|
|
14
|
+
<header class="header">
|
|
15
|
+
<h1 class="header__title">Zen Grids: sample usage</h1>
|
|
16
16
|
</header>
|
|
17
17
|
|
|
18
|
-
<div
|
|
18
|
+
<div class="main">
|
|
19
19
|
|
|
20
|
-
<article
|
|
20
|
+
<article class="grid-item grid-item__content" role="main">
|
|
21
21
|
<header>
|
|
22
22
|
<h1>Main content</h1>
|
|
23
23
|
<p>Source order: 1</p>
|
|
24
24
|
</header>
|
|
25
|
-
<aside>‘There’s no such thing!’</aside>
|
|
25
|
+
<aside class="pull-quote">‘There’s no such thing!’</aside>
|
|
26
26
|
<p>Alice did not quite know what to say to this: so she helped herself to some tea and bread-and-butter, and then turned to the Dormouse, and repeated her question. ‘Why did they live at the bottom of a well?’</p>
|
|
27
27
|
<p>The Dormouse again took a minute or two to think about it, and then said, ‘It was a treacle-well.’</p>
|
|
28
28
|
<p>‘There’s no such thing!’ Alice was beginning very angrily, but the Hatter and the March Hare went ‘Sh! sh!’ and the Dormouse sulkily remarked, ‘If you can’t be civil, you’d better finish the story for yourself.’</p>
|
|
29
29
|
<p>‘No, please go on!’ Alice said very humbly; ‘I won’t interrupt again. I dare say there may be ONE.’</p>
|
|
30
30
|
</article>
|
|
31
31
|
|
|
32
|
-
<nav
|
|
32
|
+
<nav class="menu" role="navigation" id="main-menu">
|
|
33
33
|
<header>
|
|
34
34
|
<h2>Menu</h2>
|
|
35
35
|
<p>Source order: 2</p>
|
|
@@ -40,7 +40,7 @@
|
|
|
40
40
|
<a href="#">Tom Petty</a>
|
|
41
41
|
</nav>
|
|
42
42
|
|
|
43
|
-
<aside
|
|
43
|
+
<aside class="grid-item grid-item__aside1">
|
|
44
44
|
<header>
|
|
45
45
|
<h2>Aside</h2>
|
|
46
46
|
<p>Source order: 3</p>
|
|
@@ -48,7 +48,7 @@
|
|
|
48
48
|
<p>‘Have some wine,’ the March Hare said in an encouraging tone.</p>
|
|
49
49
|
</aside>
|
|
50
50
|
|
|
51
|
-
<aside
|
|
51
|
+
<aside class="grid-item grid-item__aside2">
|
|
52
52
|
<header>
|
|
53
53
|
<h2>Aside</h2>
|
|
54
54
|
<p>Source order: 4</p>
|
|
@@ -59,8 +59,8 @@
|
|
|
59
59
|
|
|
60
60
|
</div>
|
|
61
61
|
|
|
62
|
-
<footer
|
|
63
|
-
<small>©
|
|
62
|
+
<footer class="footer">
|
|
63
|
+
<small>© 2013. The small print.</small>
|
|
64
64
|
</footer>
|
|
65
65
|
|
|
66
66
|
</body>
|
|
@@ -1,10 +1,12 @@
|
|
|
1
1
|
description "The Zen Grids system."
|
|
2
2
|
|
|
3
|
-
stylesheet
|
|
4
|
-
stylesheet
|
|
5
|
-
stylesheet
|
|
3
|
+
stylesheet '_init.scss', :media => 'all'
|
|
4
|
+
stylesheet '_layout.scss', :media => 'all'
|
|
5
|
+
stylesheet '_modules.scss', :media => 'all'
|
|
6
|
+
stylesheet '_visually-hidden.scss', :media => 'all'
|
|
7
|
+
stylesheet 'styles.scss', :media => 'all'
|
|
6
8
|
|
|
7
|
-
html
|
|
9
|
+
html 'example.html'
|
|
8
10
|
|
|
9
11
|
help %Q{
|
|
10
12
|
Zen Grids is an intuitive, flexible grid system that leverages the natural source order of your content to make it easier to create fluid responsive designs. With an easy-to-use Sass mixin set, the Zen Grids system can be applied to an infinite number of layouts, including responsive, adaptive, fluid and fixed-width layouts. To learn more, visit:
|
|
@@ -27,6 +27,12 @@
|
|
|
27
27
|
width: zen-grid-item-width(2, 5);
|
|
28
28
|
$zen-grid-width: 100%;
|
|
29
29
|
|
|
30
|
-
/* Test zen-grid-item-width(2, 5,
|
|
31
|
-
width: zen-grid-item-width(2, 5,
|
|
30
|
+
/* Test zen-grid-item-width(2, 5, $grid-width: 1000px) */
|
|
31
|
+
width: zen-grid-item-width(2, 5, $grid-width: 1000px);
|
|
32
|
+
|
|
33
|
+
/* Test zen-grid-item-width(2, 5, $grid-width: 1000px, $box-sizing: content-box) */
|
|
34
|
+
width: zen-grid-item-width(2, 5, $grid-width: 1000px, $box-sizing: content-box);
|
|
35
|
+
|
|
36
|
+
/* Test zen-grid-item-width(2, 5, $gutter-width: 10px, $grid-width: 1000px, $box-sizing: content-box) */
|
|
37
|
+
width: zen-grid-item-width(2, 5, $gutter-width: 10px, $grid-width: 1000px, $box-sizing: content-box);
|
|
32
38
|
}
|
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
/* Test zen-grid-flow-item(1) without setting $column-count */
|
|
10
10
|
@include zen-grid-flow-item(1);
|
|
11
11
|
|
|
12
|
-
/* Test zen-grid-flow-item(1, 4) with
|
|
12
|
+
/* Test zen-grid-flow-item(1, 4) with 20px gutter */
|
|
13
13
|
@include zen-grid-flow-item(1, 4);
|
|
14
14
|
|
|
15
15
|
/* Test zen-grid-flow-item(1, 4) with 15px gutter */
|
|
@@ -17,6 +17,27 @@
|
|
|
17
17
|
@include zen-grid-flow-item(1, 4);
|
|
18
18
|
$zen-gutter-width: 20px;
|
|
19
19
|
|
|
20
|
+
/* Test zen-grid-flow-item(1) with 5 columns, 20px gutter and $zen-grid-width: 1000px */
|
|
21
|
+
$zen-column-count: 5;
|
|
22
|
+
$zen-grid-width: 1000px;
|
|
23
|
+
@include zen-grid-flow-item(1);
|
|
24
|
+
$zen-column-count: 1;
|
|
25
|
+
$zen-grid-width: 100%;
|
|
26
|
+
|
|
27
|
+
/* Test zen-grid-flow-item(1) with 5 columns, 20px gutter, $zen-grid-width: 1000px, $alpha-gutter: true and $omega-gutter: false */
|
|
28
|
+
$zen-column-count: 5;
|
|
29
|
+
$zen-grid-width: 1000px;
|
|
30
|
+
@include zen-grid-flow-item(1, $alpha-gutter: true, $omega-gutter: false);
|
|
31
|
+
$zen-column-count: 1;
|
|
32
|
+
$zen-grid-width: 100%;
|
|
33
|
+
|
|
34
|
+
/* Test zen-grid-flow-item(1) with 5 columns, 20px gutter, $zen-grid-width: 1000px and $omega-gutter: false */
|
|
35
|
+
$zen-column-count: 5;
|
|
36
|
+
$zen-grid-width: 1000px;
|
|
37
|
+
@include zen-grid-flow-item(1, $omega-gutter: false);
|
|
38
|
+
$zen-column-count: 1;
|
|
39
|
+
$zen-grid-width: 100%;
|
|
40
|
+
|
|
20
41
|
/* Test zen-grid-flow-item(1, 4) with 15px gutter and $zen-float-direction: right */
|
|
21
42
|
$zen-gutter-width: 15px;
|
|
22
43
|
$zen-float-direction: right;
|
|
@@ -9,12 +9,15 @@
|
|
|
9
9
|
/* Test zen-grid-item(6, 4) with 12 column grid and 20px gutter */
|
|
10
10
|
$zen-column-count: 12;
|
|
11
11
|
@include zen-grid-item(6, 4);
|
|
12
|
+
$zen-column-count: 1;
|
|
12
13
|
|
|
13
14
|
/* Test zen-grid-item(3, 3) with box-sizing: content-box, 5 column grid and 10% gutter */
|
|
14
15
|
$zen-column-count: 5;
|
|
15
16
|
$zen-gutter-width: 10%;
|
|
16
17
|
$zen-box-sizing: content-box;
|
|
17
18
|
@include zen-grid-item(3, 3);
|
|
19
|
+
$zen-column-count: 1;
|
|
20
|
+
$zen-gutter-width: 20px;
|
|
18
21
|
$zen-box-sizing: border-box;
|
|
19
22
|
|
|
20
23
|
/* Turn off $zen-auto-include-item-base */
|
|
@@ -24,17 +27,23 @@
|
|
|
24
27
|
$zen-column-count: 5;
|
|
25
28
|
$zen-gutter-width: 40px;
|
|
26
29
|
@include zen-grid-item(3, 3);
|
|
30
|
+
$zen-column-count: 1;
|
|
31
|
+
$zen-gutter-width: 20px;
|
|
27
32
|
|
|
28
33
|
/* Test zen-grid-item(3, 3, right) with 5 column grid and 40px gutter */
|
|
29
34
|
$zen-column-count: 5;
|
|
30
35
|
$zen-gutter-width: 40px;
|
|
31
36
|
@include zen-grid-item(3, 3, right);
|
|
37
|
+
$zen-column-count: 1;
|
|
38
|
+
$zen-gutter-width: 20px;
|
|
32
39
|
|
|
33
40
|
/* Test zen-grid-item(3, 3) with 5 column grid and 40px gutter and $zen-reverse-all-floats */
|
|
34
41
|
$zen-column-count: 5;
|
|
35
42
|
$zen-gutter-width: 40px;
|
|
36
43
|
$zen-reverse-all-floats: true;
|
|
37
44
|
@include zen-grid-item(3, 3);
|
|
45
|
+
$zen-column-count: 1;
|
|
46
|
+
$zen-gutter-width: 20px;
|
|
38
47
|
$zen-reverse-all-floats: false;
|
|
39
48
|
|
|
40
49
|
/* Test zen-grid-item(3, 3, right) with 5 column grid and 40px gutter and $zen-reverse-all-floats */
|
|
@@ -42,16 +51,23 @@
|
|
|
42
51
|
$zen-gutter-width: 40px;
|
|
43
52
|
$zen-reverse-all-floats: true;
|
|
44
53
|
@include zen-grid-item(3, 3, right);
|
|
54
|
+
$zen-column-count: 1;
|
|
55
|
+
$zen-gutter-width: 20px;
|
|
45
56
|
$zen-reverse-all-floats: false;
|
|
46
57
|
|
|
47
58
|
/* Test zen-grid-item(3, 2.5) with 5 column grid and 40px gutter */
|
|
48
59
|
$zen-column-count: 5;
|
|
49
60
|
$zen-gutter-width: 40px;
|
|
50
61
|
@include zen-grid-item(3, 2.5);
|
|
62
|
+
$zen-column-count: 1;
|
|
63
|
+
$zen-gutter-width: 20px;
|
|
51
64
|
|
|
52
65
|
/* Test zen-grid-item(3, 3) with $zen-grid-width: 1000px, 5 column grid and 40px gutter */
|
|
53
66
|
$zen-grid-width: 1000px;
|
|
54
67
|
$zen-column-count: 5;
|
|
55
68
|
$zen-gutter-width: 40px;
|
|
56
69
|
@include zen-grid-item(3, 3);
|
|
70
|
+
$zen-grid-width: 100%;
|
|
71
|
+
$zen-column-count: 1;
|
|
72
|
+
$zen-gutter-width: 20px;
|
|
57
73
|
}
|
|
@@ -2,7 +2,6 @@
|
|
|
2
2
|
* @file
|
|
3
3
|
* Test zen-grid-item-width()
|
|
4
4
|
*/
|
|
5
|
-
/* line 8, ../sass/function-zen-grid-item-width.scss */
|
|
6
5
|
#test-zen-grid-item-width {
|
|
7
6
|
/* Test zen-grid-item-width(1) with default $zen-column-count: 1 */
|
|
8
7
|
width: 100%;
|
|
@@ -14,6 +13,10 @@
|
|
|
14
13
|
width: 100px;
|
|
15
14
|
/* Test zen-grid-item-width(2, 5) with $zen-grid-width: 100px */
|
|
16
15
|
width: 40px;
|
|
17
|
-
/* Test zen-grid-item-width(2, 5,
|
|
18
|
-
width:
|
|
16
|
+
/* Test zen-grid-item-width(2, 5, $grid-width: 1000px) */
|
|
17
|
+
width: 400px;
|
|
18
|
+
/* Test zen-grid-item-width(2, 5, $grid-width: 1000px, $box-sizing: content-box) */
|
|
19
|
+
width: 380px;
|
|
20
|
+
/* Test zen-grid-item-width(2, 5, $gutter-width: 10px, $grid-width: 1000px, $box-sizing: content-box) */
|
|
21
|
+
width: 390px;
|
|
19
22
|
}
|