zen-grids 1.0.alpha.3 → 1.0.beta.1
Sign up to get free protection for your applications and to get access to all the features.
- 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
|