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
data/zen-grids/_flow.scss
CHANGED
@@ -3,29 +3,26 @@
|
|
3
3
|
//
|
4
4
|
|
5
5
|
|
6
|
-
@import "grids";
|
7
|
-
|
8
|
-
// @see http://zengrids.com/help/#zen-auto-include-grid-item-base
|
9
|
-
$zen-auto-include-flow-item-base : true !default;
|
6
|
+
@import "zen-grids/grids";
|
10
7
|
|
11
8
|
|
12
9
|
//
|
13
10
|
// Apply this to an HTML item that is in the normal flow of a document to help
|
14
|
-
// align it to the grid. @see http://zengrids.com/
|
11
|
+
// align it to the grid. @see http://next.zengrids.com/reference/flow/#zen-float
|
15
12
|
//
|
16
|
-
@mixin zen-
|
13
|
+
@mixin zen-flow-item-width(
|
17
14
|
$column-span,
|
18
|
-
$parent-column-span
|
19
|
-
$alpha-gutter
|
20
|
-
$omega-gutter
|
21
|
-
$direction
|
22
|
-
$columns
|
23
|
-
$gutters
|
24
|
-
$gutter-method
|
25
|
-
$grid-width
|
26
|
-
$box-sizing
|
27
|
-
$switch-direction
|
28
|
-
$
|
15
|
+
$parent-column-span : false,
|
16
|
+
$alpha-gutter : false,
|
17
|
+
$omega-gutter : true,
|
18
|
+
$direction : $zen-direction,
|
19
|
+
$columns : $zen-columns,
|
20
|
+
$gutters : $zen-gutters,
|
21
|
+
$gutter-method : $zen-gutter-method,
|
22
|
+
$grid-width : $zen-grid-width,
|
23
|
+
$box-sizing : $zen-box-sizing,
|
24
|
+
$switch-direction : $zen-switch-direction,
|
25
|
+
$include-base : $zen-auto-include-flow-item-base
|
29
26
|
) {
|
30
27
|
|
31
28
|
// Save the columns and gutters from the parent context.
|
@@ -64,14 +61,14 @@ $zen-auto-include-flow-item-base : true !default;
|
|
64
61
|
$gutters: $main-gutters * ($grid-width / $parent-width);
|
65
62
|
}
|
66
63
|
|
67
|
-
//
|
68
|
-
@if $
|
69
|
-
@include zen-
|
64
|
+
// Include the flow item base mixin.
|
65
|
+
@if $include-base {
|
66
|
+
@include zen-flow-item-base($gutters, $gutter-method, $box-sizing, $direction, $switch-direction);
|
70
67
|
}
|
71
68
|
|
72
69
|
// Calculate the item's width.
|
73
70
|
$width: zen-grid-item-width($column-span, $columns, $gutters, $gutter-method, $grid-width, $box-sizing);
|
74
|
-
@if $gutter-method == padding and unit($grid-width) != "%" and not $alpha-gutter and not $omega-gutter and $box-sizing == border-box {
|
71
|
+
@if $gutter-method == padding and unit($grid-width) != "%" and not $alpha-gutter and not $omega-gutter and ($box-sizing == border-box or $box-sizing == universal-border-box) {
|
75
72
|
$width: $width - $gutters;
|
76
73
|
}
|
77
74
|
width: $width;
|
@@ -130,9 +127,29 @@ $zen-auto-include-flow-item-base : true !default;
|
|
130
127
|
}
|
131
128
|
}
|
132
129
|
|
130
|
+
//
|
131
|
+
// Applies a standard set of properites to all flow items.
|
132
|
+
// @see http://next.zengrids.com/reference/grids/#zen-grid-item-base
|
133
|
+
//
|
134
|
+
@mixin zen-flow-item-base(
|
135
|
+
$gutters : $zen-gutters,
|
136
|
+
$gutter-method : $zen-gutter-method,
|
137
|
+
$box-sizing : $zen-box-sizing,
|
138
|
+
$direction : $zen-direction,
|
139
|
+
$switch-direction : $zen-switch-direction
|
140
|
+
) {
|
141
|
+
|
142
|
+
// Since we have to set padding in zen-flow-item-width(), supress extraneous
|
143
|
+
// padding declarations in the base by setting $gutter-method to none.
|
144
|
+
@if $gutter-method == padding {
|
145
|
+
$gutter-method: none;
|
146
|
+
}
|
147
|
+
@include zen-grid-item-base($gutters, $gutter-method, $box-sizing, $direction, $switch-direction);
|
148
|
+
}
|
149
|
+
|
133
150
|
//
|
134
151
|
// Apply this to flow items that need to be floated.
|
135
|
-
// @see http://zengrids.com/
|
152
|
+
// @see http://next.zengrids.com/reference/flow/#zen-float
|
136
153
|
//
|
137
154
|
@mixin zen-float(
|
138
155
|
$direction : $zen-direction,
|
@@ -0,0 +1,119 @@
|
|
1
|
+
//
|
2
|
+
// Helper functions for the Zen Grids system.
|
3
|
+
//
|
4
|
+
|
5
|
+
|
6
|
+
@import "zen-grids/variables";
|
7
|
+
|
8
|
+
|
9
|
+
//
|
10
|
+
// Returns a half gutter width. @see http://next.zengrids.com/reference/functions/#zen-half-gutter
|
11
|
+
//
|
12
|
+
@function zen-half-gutter(
|
13
|
+
$gutters : $zen-gutters,
|
14
|
+
$gutter-side : $zen-direction,
|
15
|
+
$direction : $zen-direction
|
16
|
+
) {
|
17
|
+
$half-gutter: $gutters / 2;
|
18
|
+
// Special handling in case gutter has an odd number of pixels.
|
19
|
+
@if unit($gutters) == "px" {
|
20
|
+
@if $gutter-side == $direction {
|
21
|
+
@return floor($half-gutter);
|
22
|
+
}
|
23
|
+
@else {
|
24
|
+
@return ceil($half-gutter);
|
25
|
+
}
|
26
|
+
}
|
27
|
+
@return $half-gutter;
|
28
|
+
}
|
29
|
+
|
30
|
+
//
|
31
|
+
// Warns if the gutter and grid width units are not comparable.
|
32
|
+
//
|
33
|
+
@function zen-compare-units(
|
34
|
+
$feature,
|
35
|
+
$gutters : $zen-gutters,
|
36
|
+
$grid-width : $zen-grid-width
|
37
|
+
) {
|
38
|
+
@if not comparable($gutters, $grid-width) {
|
39
|
+
$units-gutter: unit($gutters);
|
40
|
+
$units-grid: unit($grid-width);
|
41
|
+
@warn "The layout cannot be calculated correctly; when using #{$feature}, the units of the gutter (#{$units-gutter} must match the units of the grid width (#{$units-grid}).";
|
42
|
+
@return false;
|
43
|
+
}
|
44
|
+
@return true;
|
45
|
+
}
|
46
|
+
|
47
|
+
//
|
48
|
+
// Calculates the unit width of a column. @see http://next.zengrids.com/reference/functions/#zen-unit-width
|
49
|
+
//
|
50
|
+
@function zen-unit-width(
|
51
|
+
$columns : $zen-columns,
|
52
|
+
$gutters : $zen-gutters,
|
53
|
+
$gutter-method : $zen-gutter-method,
|
54
|
+
$grid-width : $zen-grid-width
|
55
|
+
) {
|
56
|
+
$unit-width: 0;
|
57
|
+
@if $gutter-method == margin {
|
58
|
+
$test: zen-compare-units('gutter-method: margin', $gutters, $grid-width);
|
59
|
+
$unit-width: ($grid-width - ($columns - 1) * $gutters) / $columns;
|
60
|
+
}
|
61
|
+
@else {
|
62
|
+
$unit-width: $grid-width / $columns;
|
63
|
+
}
|
64
|
+
@if unit($unit-width) == "px" and floor($unit-width) != ceil($unit-width) {
|
65
|
+
@if $gutter-method == margin {
|
66
|
+
$num_gutters: $columns - 1;
|
67
|
+
@warn "You may experience rounding errors as the grid width, #{$grid-width}, does not divide evenly into #{$columns} columns with #{$num_gutters} of #{$gutters} gutters.";
|
68
|
+
}
|
69
|
+
@else {
|
70
|
+
@warn "You may experience rounding errors as the grid width, #{$grid-width}, does not divide evenly into #{$columns} columns.";
|
71
|
+
}
|
72
|
+
}
|
73
|
+
@return $unit-width;
|
74
|
+
}
|
75
|
+
|
76
|
+
//
|
77
|
+
// Calculates the width of a grid item that spans the specified number of columns.
|
78
|
+
// @see http://next.zengrids.com/reference/functions/#zen-grid-item-width
|
79
|
+
//
|
80
|
+
@function zen-grid-item-width(
|
81
|
+
$column-span,
|
82
|
+
$columns : $zen-columns,
|
83
|
+
$gutters : $zen-gutters,
|
84
|
+
$gutter-method : $zen-gutter-method,
|
85
|
+
$grid-width : $zen-grid-width,
|
86
|
+
$box-sizing : $zen-box-sizing
|
87
|
+
) {
|
88
|
+
$width: $column-span * zen-unit-width($columns, $gutters, $gutter-method, $grid-width);
|
89
|
+
|
90
|
+
// Add the margin gutters internal to the spanning grid item.
|
91
|
+
@if $gutter-method == margin {
|
92
|
+
$width: $width + (floor($column-span) - 1) * $gutters;
|
93
|
+
}
|
94
|
+
// For the original box model, remove the padding from the width.
|
95
|
+
@elseif $box-sizing == content-box {
|
96
|
+
$test: zen-compare-units('box-sizing: content-box', $gutters, $grid-width);
|
97
|
+
$width: $width - $gutters;
|
98
|
+
}
|
99
|
+
@return $width;
|
100
|
+
}
|
101
|
+
|
102
|
+
//
|
103
|
+
// Returns the opposite direction, given "left" or "right".
|
104
|
+
// @see http://next.zengrids.com/reference/functions/#zen-direction-switch
|
105
|
+
//
|
106
|
+
@function zen-direction-switch(
|
107
|
+
$dir
|
108
|
+
) {
|
109
|
+
@if $dir == left {
|
110
|
+
@return right;
|
111
|
+
}
|
112
|
+
@else if $dir == right {
|
113
|
+
@return left;
|
114
|
+
}
|
115
|
+
@else if $dir != none and $dir != both {
|
116
|
+
@warn "Invalid direction passed to zen-direction-switch().";
|
117
|
+
}
|
118
|
+
@return $dir;
|
119
|
+
}
|
data/zen-grids/_grids.scss
CHANGED
@@ -3,51 +3,39 @@
|
|
3
3
|
//
|
4
4
|
|
5
5
|
|
6
|
-
//
|
7
|
-
|
8
|
-
|
9
|
-
// Specify the width of the gutters (as padding). @see http://zengrids.com/help/#zen-gutters
|
10
|
-
$zen-gutters : 20px !default;
|
11
|
-
|
12
|
-
// Specify the gutter method. Can be padding or margin.
|
13
|
-
$zen-gutter-method : padding !default;
|
14
|
-
|
15
|
-
// @see http://zengrids.com/help/#zen-auto-include-grid-item-base
|
16
|
-
$zen-auto-include-grid-item-base : true !default;
|
17
|
-
|
18
|
-
// Specify the width of the entire grid. @see http://zengrids.com/help/#zen-grid-width
|
19
|
-
$zen-grid-width : 100% !default;
|
20
|
-
|
21
|
-
// The box-sizing polyfill for IE6/7 requires an absolute path. @see http://zengrids.com/help/#box-sizing-polyfill-path
|
22
|
-
$box-sizing-polyfill-path : "" !default;
|
23
|
-
|
24
|
-
// Specify the CSS3 box-sizing method. @see http://zengrids.com/help/#zen-box-sizing
|
25
|
-
$zen-box-sizing : border-box !default;
|
26
|
-
|
27
|
-
// @see http://zengrids.com/help/#legacy-support-for-ie7
|
28
|
-
$legacy-support-for-ie7 : false !default;
|
29
|
-
$legacy-support-for-ie6 : false !default;
|
30
|
-
|
31
|
-
// Specify the default floating direction for zen's mixins. @see http://zengrids.com/help/#zen-direction
|
32
|
-
$zen-direction : left !default;
|
33
|
-
|
34
|
-
// Reverse the floating direction in all zen's mixins. @see http://zengrids.com/help/#zen-switch-direction
|
35
|
-
$zen-switch-direction : false !default;
|
6
|
+
@import "zen-grids/variables"; // Import the global variables needed by all of Zen Grids.
|
7
|
+
@import "zen-grids/functions"; // Import the helper functions.
|
8
|
+
@import "zen-grids/internal/functions-compass-polyfill";
|
36
9
|
|
37
10
|
|
38
11
|
//
|
39
12
|
// Apply this to create a grid container element.
|
40
|
-
// @see http://zengrids.com/
|
13
|
+
// @see http://next.zengrids.com/reference/grids/#zen-grid-container
|
41
14
|
//
|
42
15
|
@mixin zen-grid-container(
|
43
|
-
$context
|
44
|
-
$gutters
|
45
|
-
$gutter-method
|
46
|
-
$direction
|
16
|
+
$context : none,
|
17
|
+
$gutters : $zen-gutters,
|
18
|
+
$gutter-method : $zen-gutter-method,
|
19
|
+
$direction : $zen-direction,
|
20
|
+
$switch-direction : $zen-switch-direction
|
47
21
|
) {
|
48
22
|
|
23
|
+
$dir: $direction;
|
24
|
+
@if $switch-direction {
|
25
|
+
$dir: zen-direction-switch($dir);
|
26
|
+
}
|
27
|
+
|
28
|
+
@if $context == flow-item {
|
29
|
+
@warn "zen-grid-container()'s $context cannot be set to: flow-item. It has been set to: flow.";
|
30
|
+
$context: flow;
|
31
|
+
}
|
32
|
+
@else if $context == grid {
|
33
|
+
@warn "zen-grid-container()'s $context cannot be set to: grid. It has been set to: grid-item.";
|
34
|
+
$context: grid-item;
|
35
|
+
}
|
36
|
+
|
49
37
|
// @TODO: This is a pre-IE8 line of code; don't remember why its needed.
|
50
|
-
@if
|
38
|
+
@if zen-support-for(ie, "7") {
|
51
39
|
*position: relative;
|
52
40
|
}
|
53
41
|
|
@@ -60,15 +48,15 @@ $zen-switch-direction : false !default;
|
|
60
48
|
&:after {
|
61
49
|
clear: both;
|
62
50
|
}
|
63
|
-
@if
|
51
|
+
@if zen-support-for(ie, "7") {
|
64
52
|
*zoom: 1;
|
65
53
|
}
|
66
54
|
|
67
55
|
// Un-do the gutter padding of the parent grid item.
|
68
56
|
@if $context == flow and $gutter-method == padding {
|
69
57
|
margin: {
|
70
|
-
left: -(zen-half-gutter($gutters, left, $
|
71
|
-
right: -(zen-half-gutter($gutters, right, $
|
58
|
+
left: -(zen-half-gutter($gutters, left, $dir));
|
59
|
+
right: -(zen-half-gutter($gutters, right, $dir));
|
72
60
|
}
|
73
61
|
}
|
74
62
|
|
@@ -82,19 +70,19 @@ $zen-switch-direction : false !default;
|
|
82
70
|
}
|
83
71
|
|
84
72
|
//
|
85
|
-
// Apply this to each grid item. @see http://zengrids.com/
|
73
|
+
// Apply this to each grid item. @see http://next.zengrids.com/reference/grids/#zen-grid-item
|
86
74
|
//
|
87
75
|
@mixin zen-grid-item(
|
88
76
|
$column-span,
|
89
77
|
$column-position,
|
90
|
-
$direction
|
91
|
-
$columns
|
92
|
-
$gutters
|
93
|
-
$gutter-method
|
94
|
-
$grid-width
|
95
|
-
$box-sizing
|
96
|
-
$switch-direction
|
97
|
-
$
|
78
|
+
$direction : $zen-direction,
|
79
|
+
$columns : $zen-columns,
|
80
|
+
$gutters : $zen-gutters,
|
81
|
+
$gutter-method : $zen-gutter-method,
|
82
|
+
$grid-width : $zen-grid-width,
|
83
|
+
$box-sizing : $zen-box-sizing,
|
84
|
+
$switch-direction : $zen-switch-direction,
|
85
|
+
$include-base : $zen-auto-include-grid-item-base
|
98
86
|
) {
|
99
87
|
|
100
88
|
// Calculate the unit width.
|
@@ -122,39 +110,38 @@ $zen-switch-direction : false !default;
|
|
122
110
|
#{$dir}: $margin;
|
123
111
|
#{$rev}: -100%;
|
124
112
|
}
|
125
|
-
@if
|
113
|
+
@if zen-support-for(ie, "7") {
|
126
114
|
*margin-#{$rev}: -99.9%;
|
127
115
|
}
|
128
116
|
|
129
|
-
//
|
130
|
-
@if $
|
117
|
+
// Include the grid item base mixin.
|
118
|
+
@if $include-base {
|
131
119
|
@include zen-grid-item-base($gutters, $gutter-method, $box-sizing, $direction, $switch-direction);
|
132
120
|
}
|
121
|
+
// If the $gutters parameter has been used, set the gutters even if
|
122
|
+
// $include-base is false.
|
123
|
+
@else if $gutters != $zen-gutters and $gutter-method == padding {
|
124
|
+
@include zen-apply-gutter-padding($gutters, $direction, $switch-direction);
|
125
|
+
}
|
133
126
|
}
|
134
127
|
|
135
128
|
//
|
136
129
|
// Applies a standard set of properites to all grid items in the layout.
|
137
|
-
// @see http://zengrids.com/
|
130
|
+
// @see http://next.zengrids.com/reference/grids/#zen-grid-item-base
|
138
131
|
//
|
139
132
|
@mixin zen-grid-item-base(
|
140
|
-
$gutters
|
141
|
-
$gutter-method
|
142
|
-
$box-sizing
|
143
|
-
$direction
|
144
|
-
$switch-direction
|
133
|
+
$gutters : $zen-gutters,
|
134
|
+
$gutter-method : $zen-gutter-method,
|
135
|
+
$box-sizing : $zen-box-sizing,
|
136
|
+
$direction : $zen-direction,
|
137
|
+
$switch-direction : $zen-switch-direction
|
145
138
|
) {
|
146
139
|
|
147
|
-
|
148
|
-
@if $switch-direction {
|
149
|
-
$dir: zen-direction-switch($dir);
|
150
|
-
}
|
151
|
-
|
140
|
+
// Specify the padding if the gutter method uses padding.
|
152
141
|
@if $gutter-method == padding {
|
153
|
-
padding
|
154
|
-
left: zen-half-gutter($gutters, left, $dir);
|
155
|
-
right: zen-half-gutter($gutters, right, $dir);
|
156
|
-
}
|
142
|
+
@include zen-apply-gutter-padding($gutters, $direction, $switch-direction);
|
157
143
|
}
|
144
|
+
|
158
145
|
// Specify the border-box properties.
|
159
146
|
@if $box-sizing == border-box {
|
160
147
|
-moz-box-sizing: border-box;
|
@@ -163,7 +150,7 @@ $zen-switch-direction : false !default;
|
|
163
150
|
box-sizing: border-box;
|
164
151
|
}
|
165
152
|
// Prevent left/right borders since they'll break the layout with content-box.
|
166
|
-
@
|
153
|
+
@elseif $box-sizing == content-box {
|
167
154
|
border: {
|
168
155
|
left: 0 !important;
|
169
156
|
right: 0 !important;
|
@@ -175,17 +162,15 @@ $zen-switch-direction : false !default;
|
|
175
162
|
}
|
176
163
|
}
|
177
164
|
}
|
178
|
-
// Prevent overflowing content from being hidden beneath other grid items.
|
179
|
-
word-wrap: break-word;
|
180
165
|
|
181
|
-
@if
|
166
|
+
@if zen-support-for(ie, "7") {
|
182
167
|
@if $box-sizing == border-box and $box-sizing-polyfill-path == "" {
|
183
168
|
@warn "Setting $box-sizing to #{$box-sizing} will fail for legacy IE browsers because the $box-sizing-polyfill-path is empty.";
|
184
169
|
}
|
185
170
|
@if $box-sizing-polyfill-path != "" {
|
186
171
|
*behavior: url($box-sizing-polyfill-path);
|
187
172
|
}
|
188
|
-
@if
|
173
|
+
@if zen-support-for(ie, "6") {
|
189
174
|
// Display inline or double your floated margin!
|
190
175
|
// @see http://www.positioniseverything.net/explorer/doubled-margin.html
|
191
176
|
_display: inline;
|
@@ -195,12 +180,14 @@ $zen-switch-direction : false !default;
|
|
195
180
|
// @see http://www.howtocreate.co.uk/wrongWithIE/?chapter=overflow%3Avisible%3B
|
196
181
|
_overflow-y: visible;
|
197
182
|
}
|
183
|
+
// Prevent overflowing content from being hidden beneath other grid items.
|
184
|
+
*word-wrap: break-word;
|
198
185
|
}
|
199
186
|
}
|
200
187
|
|
201
188
|
//
|
202
189
|
// Apply this to a grid item so that it starts a new row.
|
203
|
-
// @see http://zengrids.com/
|
190
|
+
// @see http://next.zengrids.com/reference/grids/#zen-new-row
|
204
191
|
//
|
205
192
|
@mixin zen-new-row(
|
206
193
|
$clear : $zen-direction,
|
@@ -213,110 +200,23 @@ $zen-switch-direction : false !default;
|
|
213
200
|
clear: $clear;
|
214
201
|
}
|
215
202
|
|
216
|
-
|
217
203
|
//
|
218
|
-
//
|
204
|
+
// Applies the gutter to a grid item when using the padding gutter method.
|
205
|
+
// @see http://next.zengrids.com/reference/grids/#zen-apply-gutter-padding
|
219
206
|
//
|
220
|
-
|
221
|
-
|
222
|
-
|
223
|
-
$
|
224
|
-
$gutter-side : $zen-direction,
|
225
|
-
$direction : $zen-direction
|
226
|
-
) {
|
227
|
-
$half-gutter: $gutters / 2;
|
228
|
-
// Special handling in case gutter has an odd number of pixels.
|
229
|
-
@if unit($gutters) == "px" {
|
230
|
-
@if $gutter-side == $direction {
|
231
|
-
@return floor($half-gutter);
|
232
|
-
}
|
233
|
-
@else {
|
234
|
-
@return ceil($half-gutter);
|
235
|
-
}
|
236
|
-
}
|
237
|
-
@return $half-gutter;
|
238
|
-
}
|
239
|
-
|
240
|
-
// Warns if the gutter and grid width units are not comparable.
|
241
|
-
@function zen-compare-units(
|
242
|
-
$feature,
|
243
|
-
$gutters : $zen-gutters,
|
244
|
-
$grid-width : $zen-grid-width
|
245
|
-
) {
|
246
|
-
@if not comparable($gutters, $grid-width) {
|
247
|
-
$units-gutter: unit($gutters);
|
248
|
-
$units-grid: unit($grid-width);
|
249
|
-
@warn "The layout cannot be calculated correctly; when using #{$feature}, the units of the gutter (#{$units-gutter} must match the units of the grid width (#{$units-grid}).";
|
250
|
-
@return false;
|
251
|
-
}
|
252
|
-
@return true;
|
253
|
-
}
|
254
|
-
|
255
|
-
// Calculates the unit width of a column. @see http://zengrids.com/help/#zen-unit-width
|
256
|
-
@function zen-unit-width(
|
257
|
-
$columns : $zen-columns,
|
258
|
-
$gutters : $zen-gutters,
|
259
|
-
$gutter-method : $zen-gutter-method,
|
260
|
-
$grid-width : $zen-grid-width
|
261
|
-
) {
|
262
|
-
$unit-width: 0;
|
263
|
-
@if $gutter-method == margin {
|
264
|
-
$test: zen-compare-units('gutter-method: margin', $gutters, $grid-width);
|
265
|
-
$unit-width: ($grid-width - ($columns - 1) * $gutters) / $columns;
|
266
|
-
}
|
267
|
-
@else {
|
268
|
-
$unit-width: $grid-width / $columns;
|
269
|
-
}
|
270
|
-
@if unit($unit-width) == "px" and floor($unit-width) != ceil($unit-width) {
|
271
|
-
@if $gutter-method == margin {
|
272
|
-
$num_gutters: $columns - 1;
|
273
|
-
@warn "You may experience rounding errors as the grid width, #{$grid-width}, does not divide evenly into #{$columns} columns with #{$num_gutters} of #{$gutters} gutters.";
|
274
|
-
}
|
275
|
-
@else {
|
276
|
-
@warn "You may experience rounding errors as the grid width, #{$grid-width}, does not divide evenly into #{$columns} columns.";
|
277
|
-
}
|
278
|
-
}
|
279
|
-
@return $unit-width;
|
280
|
-
}
|
281
|
-
|
282
|
-
// Calculates the width of a grid item that spans the specified number of columns.
|
283
|
-
// @see http://zengrids.com/help/#zen-grid-item-width
|
284
|
-
@function zen-grid-item-width(
|
285
|
-
$column-span,
|
286
|
-
$columns : $zen-columns,
|
287
|
-
$gutters : $zen-gutters,
|
288
|
-
$gutter-method : $zen-gutter-method,
|
289
|
-
$grid-width : $zen-grid-width,
|
290
|
-
$box-sizing : $zen-box-sizing
|
207
|
+
@mixin zen-apply-gutter-padding(
|
208
|
+
$gutters : $zen-gutters,
|
209
|
+
$direction : $zen-direction,
|
210
|
+
$switch-direction : $zen-switch-direction
|
291
211
|
) {
|
292
|
-
$width: $column-span * zen-unit-width($columns, $gutters, $gutter-method, $grid-width);
|
293
212
|
|
294
|
-
|
295
|
-
@if $
|
296
|
-
$
|
297
|
-
}
|
298
|
-
// For the original box model, remove the padding from the width.
|
299
|
-
@elseif $box-sizing == content-box {
|
300
|
-
$test: zen-compare-units('box-sizing: content-box', $gutters, $grid-width);
|
301
|
-
$width: $width - $gutters;
|
213
|
+
$dir: $direction;
|
214
|
+
@if $switch-direction {
|
215
|
+
$dir: zen-direction-switch($dir);
|
302
216
|
}
|
303
|
-
@return $width;
|
304
|
-
}
|
305
217
|
|
306
|
-
|
307
|
-
|
308
|
-
|
309
|
-
$dir
|
310
|
-
) {
|
311
|
-
@if $dir == left {
|
312
|
-
@return right;
|
313
|
-
}
|
314
|
-
@else if $dir == right {
|
315
|
-
@return left;
|
316
|
-
}
|
317
|
-
@else if $dir == none or $dir == both {
|
318
|
-
@return $dir;
|
218
|
+
padding: {
|
219
|
+
left: zen-half-gutter($gutters, left, $dir);
|
220
|
+
right: zen-half-gutter($gutters, right, $dir);
|
319
221
|
}
|
320
|
-
@warn "Invalid direction passed to zen-direction-switch().";
|
321
|
-
@return both;
|
322
222
|
}
|