zen-grids 1.0.alpha.3 → 1.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.
- data/README.txt +1 -1
- data/stylesheets/zen/_columns.scss +4 -4
- data/stylesheets/zen/_grids.scss +43 -28
- data/zen-grids.gemspec +2 -2
- metadata +6 -6
data/README.txt
CHANGED
@@ -40,7 +40,7 @@ INSTALLATION
|
|
40
40
|
|
41
41
|
Zen grids is distributed as a Ruby Gem. On your computer, simply run:
|
42
42
|
|
43
|
-
sudo gem install zen-grids
|
43
|
+
sudo gem install zen-grids --pre
|
44
44
|
|
45
45
|
Then to add it to an existing project, edit the project's configuration file,
|
46
46
|
config.rb, and add this line:
|
@@ -7,8 +7,8 @@ $legacy-support-for-ie6: true !default;
|
|
7
7
|
|
8
8
|
|
9
9
|
//
|
10
|
-
// This mixin should be applied to a container so that the children
|
11
|
-
//
|
10
|
+
// This mixin should be applied to a container so that the children items become
|
11
|
+
// columns arranged with the Zen Columns layout method.
|
12
12
|
//
|
13
13
|
// The mixin has the following required parameters:
|
14
14
|
// - $selectors: A list of selectors for all the columns inside the container.
|
@@ -39,8 +39,8 @@ $legacy-support-for-ie6: true !default;
|
|
39
39
|
// In addition to standard columns, the mixin supports one horizontal navbar
|
40
40
|
// that will appear (with a fixed height) above all the other columns. The
|
41
41
|
// parameters for this optional navbar are:
|
42
|
-
// - $navbar-selector: The selector for the navbar. It should be a child
|
43
|
-
//
|
42
|
+
// - $navbar-selector: The selector for the navbar. It should be a child item of
|
43
|
+
// the container just as a normal column is.
|
44
44
|
// - $navbar-height: The fixed height of the navbar. Required if the
|
45
45
|
// $navbar-selector is used.
|
46
46
|
// - $navbar-width: The width of the navbar. Defaults to 100% of the container
|
data/stylesheets/zen/_grids.scss
CHANGED
@@ -26,9 +26,10 @@ $zen-box-sizing: border-box !default;
|
|
26
26
|
// This is a helper variable for RTL layouts.
|
27
27
|
$zen-reverse-all-floats: false !default;
|
28
28
|
|
29
|
-
// You can generate more efficient CSS if you manually apply the
|
30
|
-
// all grid
|
31
|
-
$zen-auto-include-
|
29
|
+
// You can generate more efficient CSS if you manually apply the
|
30
|
+
// zen-grid-item-base mixin to all grid items from within a single ruleset.
|
31
|
+
$zen-auto-include-item-base: true !default;
|
32
|
+
$zen-auto-include-html-item-base: true !default;
|
32
33
|
|
33
34
|
// Turn off IE6/7 support since we're defaulting to box-sizing: border-box.
|
34
35
|
$legacy-support-for-ie7: false !default;
|
@@ -42,7 +43,7 @@ $legacy-support-for-ie6: false !default;
|
|
42
43
|
|
43
44
|
|
44
45
|
//
|
45
|
-
// Apply this to the container element.
|
46
|
+
// Apply this to the grid container element.
|
46
47
|
//
|
47
48
|
@mixin zen-grid-container () {
|
48
49
|
position: relative;
|
@@ -50,11 +51,11 @@ $legacy-support-for-ie6: false !default;
|
|
50
51
|
}
|
51
52
|
|
52
53
|
//
|
53
|
-
// Apply this to any
|
54
|
-
// grid.
|
54
|
+
// Apply this to any grid item that is also a grid container element for a
|
55
|
+
// nested grid.
|
55
56
|
//
|
56
57
|
@mixin zen-nested-container () {
|
57
|
-
@include zen-grid-container
|
58
|
+
@include zen-grid-container;
|
58
59
|
padding: {
|
59
60
|
left: 0;
|
60
61
|
right: 0;
|
@@ -62,21 +63,23 @@ $legacy-support-for-ie6: false !default;
|
|
62
63
|
}
|
63
64
|
|
64
65
|
//
|
65
|
-
// Apply this to each
|
66
|
-
// the
|
67
|
-
// that the
|
66
|
+
// Apply this to each grid item. Set the $column-position to the column number
|
67
|
+
// the grid item starts on. And set the $column-span to the number of columns
|
68
|
+
// that the grid item spans.
|
68
69
|
//
|
69
|
-
// For
|
70
|
+
// For grid items that are floated right, the $column-position is counted
|
70
71
|
// from the right instead of from the left.
|
71
72
|
//
|
72
|
-
@mixin zen-grid (
|
73
|
+
@mixin zen-grid-item (
|
73
74
|
$column-position,
|
74
75
|
$column-span,
|
75
76
|
$float-direction: $zen-float-direction,
|
76
77
|
$column-count: $zen-column-count,
|
77
78
|
$gutter-width: $zen-gutter-width,
|
78
79
|
$grid-width: $zen-grid-width,
|
79
|
-
$box-sizing: $zen-box-sizing
|
80
|
+
$box-sizing: $zen-box-sizing,
|
81
|
+
$reverse-all-floats: $zen-reverse-all-floats,
|
82
|
+
$auto-include-item-base: $zen-auto-include-item-base
|
80
83
|
) {
|
81
84
|
|
82
85
|
// Calculate the unit width.
|
@@ -84,7 +87,7 @@ $legacy-support-for-ie6: false !default;
|
|
84
87
|
|
85
88
|
// Determine the float direction and its reverse.
|
86
89
|
$dir: $float-direction;
|
87
|
-
@if $
|
90
|
+
@if $reverse-all-floats {
|
88
91
|
$dir: zen-direction-flip($dir);
|
89
92
|
}
|
90
93
|
$rev: zen-direction-flip($dir);
|
@@ -97,8 +100,8 @@ $legacy-support-for-ie6: false !default;
|
|
97
100
|
}
|
98
101
|
|
99
102
|
// Auto-apply the unit base mixin.
|
100
|
-
@if $
|
101
|
-
@include zen-grid-
|
103
|
+
@if $auto-include-item-base {
|
104
|
+
@include zen-grid-item-base($gutter-width, $box-sizing);
|
102
105
|
}
|
103
106
|
}
|
104
107
|
|
@@ -109,17 +112,17 @@ $legacy-support-for-ie6: false !default;
|
|
109
112
|
// The mixin has the following optional parameters, but its better to use the
|
110
113
|
// $zen-gutter-width and $zen-box-sizing variables instead:
|
111
114
|
// - $gutter-width: Half of this value is applied as padding to the left and
|
112
|
-
// right sides of the
|
115
|
+
// right sides of the item.
|
113
116
|
// - $box-sizing: The type of CSS3 box model each box should use. Can be set to
|
114
117
|
// content-box or border-box. Defaults to content-box, but border-box is way
|
115
118
|
// cooler. IE 6 and 7 don't support border-box.
|
116
|
-
@mixin zen-grid-
|
119
|
+
@mixin zen-grid-item-base (
|
117
120
|
$gutter-width: $zen-gutter-width,
|
118
121
|
$box-sizing: $zen-box-sizing
|
119
122
|
) {
|
120
123
|
padding: {
|
121
|
-
left: $gutter-width
|
122
|
-
right: $gutter-width
|
124
|
+
left: zen-half-gutter($gutter-width);
|
125
|
+
right: zen-half-gutter($gutter-width);
|
123
126
|
}
|
124
127
|
// Specify the border-box properties.
|
125
128
|
@if $box-sizing == border-box {
|
@@ -152,29 +155,38 @@ $legacy-support-for-ie6: false !default;
|
|
152
155
|
// Apply this to content boxes that need to be cleared below other content boxes.
|
153
156
|
//
|
154
157
|
@mixin zen-clear (
|
155
|
-
$float-direction: $zen-float-direction
|
158
|
+
$float-direction: $zen-float-direction,
|
159
|
+
$reverse-all-floats: $zen-reverse-all-floats
|
156
160
|
) {
|
157
161
|
// Determine the float direction.
|
158
162
|
$dir: $float-direction;
|
159
|
-
@if $
|
163
|
+
@if $reverse-all-floats {
|
160
164
|
$dir: zen-direction-flip($dir);
|
161
165
|
}
|
162
166
|
clear: $dir;
|
163
167
|
}
|
164
168
|
|
165
169
|
//
|
166
|
-
// Apply this to an
|
167
|
-
//
|
168
|
-
// the number of columns that
|
170
|
+
// Apply this to an HTML item that is in the normal flow of a document to help
|
171
|
+
// align it to the grid. Set the $column-span to the number of columns that the
|
172
|
+
// HTML element should span. Set the $column-count to the number of columns that
|
173
|
+
// the parent element spans.
|
169
174
|
//
|
170
|
-
|
175
|
+
// Unlike the zen-grid-item() mixin, this mixin does not float the HTML item. To
|
176
|
+
// help position the item to align flush with the left edge of a containing grid
|
177
|
+
// item, you can set the $alpha-margin to true. To help position the item to
|
178
|
+
// align to align flush with the right edge of a containing grid item, you can
|
179
|
+
// set the $omega-margin to true.
|
180
|
+
//
|
181
|
+
@mixin zen-grid-html-item (
|
171
182
|
$column-span,
|
172
183
|
$column-count: $zen-column-count,
|
173
184
|
$alpha-margin: false,
|
174
185
|
$omega-margin: false,
|
175
186
|
$gutter-width: $zen-gutter-width,
|
176
187
|
$grid-width: $zen-grid-width,
|
177
|
-
$box-sizing: $zen-box-sizing
|
188
|
+
$box-sizing: $zen-box-sizing,
|
189
|
+
$auto-include-html-item-base: $zen-auto-include-html-item-base
|
178
190
|
) {
|
179
191
|
|
180
192
|
$dir: $zen-float-direction;
|
@@ -194,7 +206,9 @@ $legacy-support-for-ie6: false !default;
|
|
194
206
|
width: $column-span * $unit-width;
|
195
207
|
|
196
208
|
// Auto-apply the unit base mixin.
|
197
|
-
@
|
209
|
+
@if $auto-include-html-item-base {
|
210
|
+
@include zen-grid-item-base($gutter-width, $box-sizing);
|
211
|
+
}
|
198
212
|
}
|
199
213
|
|
200
214
|
|
@@ -212,5 +226,6 @@ $legacy-support-for-ie6: false !default;
|
|
212
226
|
|
213
227
|
// Returns a half gutter width.
|
214
228
|
@function zen-half-gutter($gutter-width: $zen-gutter-width) {
|
229
|
+
// @todo Handle odd-pixel-sized gutters.
|
215
230
|
@return $gutter-width / 2;
|
216
231
|
}
|
data/zen-grids.gemspec
CHANGED
@@ -9,8 +9,8 @@ Gem::Specification.new do |s|
|
|
9
9
|
s.homepage = 'http://zengrids.com'
|
10
10
|
s.rubyforge_project =
|
11
11
|
|
12
|
-
s.version = '1.0.
|
13
|
-
s.date = '2012-01-
|
12
|
+
s.version = '1.0.beta.1'
|
13
|
+
s.date = '2012-01-20'
|
14
14
|
|
15
15
|
s.authors = ['John Albin Wilkins']
|
16
16
|
s.email = 'virtually.johnalbin@gmail.com'
|
metadata
CHANGED
@@ -1,14 +1,14 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: zen-grids
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
hash:
|
4
|
+
hash: 62196289
|
5
5
|
prerelease: 4
|
6
6
|
segments:
|
7
7
|
- 1
|
8
8
|
- 0
|
9
|
-
-
|
10
|
-
-
|
11
|
-
version: 1.0.
|
9
|
+
- beta
|
10
|
+
- 1
|
11
|
+
version: 1.0.beta.1
|
12
12
|
platform: ruby
|
13
13
|
authors:
|
14
14
|
- John Albin Wilkins
|
@@ -16,7 +16,7 @@ autorequire:
|
|
16
16
|
bindir: bin
|
17
17
|
cert_chain: []
|
18
18
|
|
19
|
-
date: 2012-01-
|
19
|
+
date: 2012-01-20 00:00:00 Z
|
20
20
|
dependencies:
|
21
21
|
- !ruby/object:Gem::Dependency
|
22
22
|
name: sass
|
@@ -84,7 +84,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
|
|
84
84
|
version: 1.3.1
|
85
85
|
requirements: []
|
86
86
|
|
87
|
-
rubyforge_project: 1.0.
|
87
|
+
rubyforge_project: 1.0.beta.1
|
88
88
|
rubygems_version: 1.8.15
|
89
89
|
signing_key:
|
90
90
|
specification_version: 3
|