zen-grids 1.0.beta.4 → 1.0.beta.5
Sign up to get free protection for your applications and to get access to all the features.
- data/README.txt +3 -3
- data/stylesheets/zen/_background-grid.scss +91 -0
- data/stylesheets/zen/_grids.scss +109 -30
- data/zen-grids.gemspec +3 -2
- metadata +6 -5
data/README.txt
CHANGED
@@ -22,13 +22,13 @@ to a 12 column grid.
|
|
22
22
|
@include zen-grid-container;
|
23
23
|
}
|
24
24
|
.sidebar1 {
|
25
|
-
@include zen-grid(
|
25
|
+
@include zen-grid(3, 1); // 3 col. wide sidebar starting in the 1st column
|
26
26
|
}
|
27
27
|
.content {
|
28
|
-
@include zen-grid(
|
28
|
+
@include zen-grid(6, 4); // 6 col. wide element starting in the 4th column
|
29
29
|
}
|
30
30
|
.sidebar2 {
|
31
|
-
@include zen-grid(
|
31
|
+
@include zen-grid(3, 10); // 3 col. wide sidebar starting in the 10th column
|
32
32
|
}
|
33
33
|
|
34
34
|
Within the .container element, the .sidebar1, .sidebar2 and .content elements
|
@@ -0,0 +1,91 @@
|
|
1
|
+
@import "zen/grids";
|
2
|
+
|
3
|
+
// Specify the number of columns in the grid.
|
4
|
+
$bg-grid-column-count: $zen-column-count !default;
|
5
|
+
|
6
|
+
// Specify the width of the gutters; half of the gutter will be placed on each
|
7
|
+
// side of a grid column.
|
8
|
+
$bg-grid-gutter-width: $zen-gutter-width !default;
|
9
|
+
|
10
|
+
// Specify the column background color.
|
11
|
+
$bg-grid-color: #ffdede !default;
|
12
|
+
|
13
|
+
// Specify the width of the entire grid. Defaults to 100% for a fluid responsive
|
14
|
+
// design, but you can change this to a pixel value if you need a fixed grid.
|
15
|
+
$bg-grid-width: $zen-grid-width !default;
|
16
|
+
|
17
|
+
// Specify the default floating direction for zen's mixins.
|
18
|
+
$bg-float-direction: $zen-float-direction !default;
|
19
|
+
|
20
|
+
|
21
|
+
//
|
22
|
+
// This mixin currently requires the following markup at the top of the responsive container (e.g. body or div#page, etc.).
|
23
|
+
// <p class="bg-grid">
|
24
|
+
// <span class="bgcol-1">1</span><span class="bgcol-2">2</span><span class="bgcol-3">3</span><span class="bgcol-4">4</span><span class="bgcol-5">5</span><span class="bgcol-6">6</span><span class="bgcol-7">7</span><span class="bgcol-8">8</span><span class="bgcol-9">9</span><span class="bgcol-10">10</span><span class="bgcol-11">11</span><span class="bgcol-12">12</span><span class="bgcol-13">13</span><span class="bgcol-14">14</span><span class="bgcol-15">15</span><span class="bgcol-16">16</span><span class="bgcol-17">17</span><span class="bgcol-18">18</span><span class="bgcol-19">19</span><span class="bgcol-20">20</span><span class="bgcol-21">21</span><span class="bgcol-22">22</span><span class="bgcol-23">23</span><span class="bgcol-24">24</span><span class="bgcol-25">25</span><span class="bgcol-26">26</span><span class="bgcol-27">27</span><span class="bgcol-28">28</span><span class="bgcol-29">29</span><span class="bgcol-30">30</span>
|
25
|
+
// <span class="bgcolrev-1">1</span><span class="bgcolrev-2">2</span><span class="bgcolrev-3">3</span><span class="bgcolrev-4">4</span><span class="bgcolrev-5">5</span><span class="bgcolrev-6">6</span><span class="bgcolrev-7">7</span><span class="bgcolrev-8">8</span><span class="bgcolrev-9">9</span><span class="bgcolrev-10">10</span><span class="bgcolrev-11">11</span><span class="bgcolrev-12">12</span><span class="bgcolrev-13">13</span><span class="bgcolrev-14">14</span><span class="bgcolrev-15">15</span><span class="bgcolrev-16">16</span><span class="bgcolrev-17">17</span><span class="bgcolrev-18">18</span><span class="bgcolrev-19">19</span><span class="bgcolrev-20">20</span><span class="bgcolrev-21">21</span><span class="bgcolrev-22">22</span><span class="bgcolrev-23">23</span><span class="bgcolrev-24">24</span><span class="bgcolrev-25">25</span><span class="bgcolrev-26">26</span><span class="bgcolrev-27">27</span><span class="bgcolrev-28">28</span><span class="bgcolrev-29">29</span><span class="bgcolrev-30">30</span>
|
26
|
+
// </p>
|
27
|
+
//
|
28
|
+
@mixin -experimental-bg-grid(
|
29
|
+
$column-count: $bg-grid-column-count,
|
30
|
+
$gutter-width: $bg-grid-gutter-width,
|
31
|
+
$grid-color: $bg-grid-color,
|
32
|
+
$grid-width: $bg-grid-width,
|
33
|
+
$flow-direction: $bg-float-direction
|
34
|
+
) {
|
35
|
+
|
36
|
+
// Internal variables.
|
37
|
+
$dir: $flow-direction;
|
38
|
+
@if $zen-reverse-all-floats {
|
39
|
+
$dir: zen-direction-flip($dir);
|
40
|
+
}
|
41
|
+
$rev: zen-direction-flip($dir);
|
42
|
+
|
43
|
+
$font-size: 16px;
|
44
|
+
$line-height: 24px;
|
45
|
+
$color-bg: #fff;
|
46
|
+
|
47
|
+
@include zen-grid-container;
|
48
|
+
position: absolute;
|
49
|
+
position: fixed;
|
50
|
+
z-index: -1;
|
51
|
+
margin: 0 auto;
|
52
|
+
width: $grid-width;
|
53
|
+
height: 100%;
|
54
|
+
font-size: $font-size;
|
55
|
+
line-height: $line-height;
|
56
|
+
font-weight: bold;
|
57
|
+
font-family: sans-serif;
|
58
|
+
background-color: $color-bg;
|
59
|
+
|
60
|
+
span {
|
61
|
+
@include zen-grid-item-base;
|
62
|
+
padding: 0;
|
63
|
+
text-align: center;
|
64
|
+
color: $color-bg;
|
65
|
+
@include text-shadow(darken($grid-color, 75%) 0 0 4px);
|
66
|
+
}
|
67
|
+
@for $i from 1 through $column-count {
|
68
|
+
.bgcol-#{$i} {
|
69
|
+
@include zen-grid-item(1, $i, $column-count: $column-count, $gutter-width: $gutter-width, $float-direction: $dir, $auto-include-item-base: false);
|
70
|
+
height: 100%;
|
71
|
+
margin-bottom: -($line-height);
|
72
|
+
background-color: $grid-color;
|
73
|
+
border: {
|
74
|
+
left: zen-half-gutter($gutter-width) solid $color-bg;
|
75
|
+
right: zen-half-gutter($gutter-width) solid $color-bg;
|
76
|
+
}
|
77
|
+
}
|
78
|
+
.bgcolrev-#{$i} {
|
79
|
+
@if $i == 1 {
|
80
|
+
@include zen-clear();
|
81
|
+
}
|
82
|
+
@include zen-grid-item(1, $i, $column-count: $column-count, $gutter-width: $gutter-width, $float-direction: $rev, $auto-include-item-base: false);
|
83
|
+
}
|
84
|
+
}
|
85
|
+
@for $i from ($column-count + 1) through 30 {
|
86
|
+
.bgcol-#{$i},
|
87
|
+
.bgcolrev-#{$i} {
|
88
|
+
display: none;
|
89
|
+
}
|
90
|
+
}
|
91
|
+
}
|
data/stylesheets/zen/_grids.scss
CHANGED
@@ -33,6 +33,16 @@ $zen-box-sizing: border-box !default;
|
|
33
33
|
$legacy-support-for-ie7: false !default;
|
34
34
|
$legacy-support-for-ie6: false !default;
|
35
35
|
|
36
|
+
// Specify the method to add IE legacy support; can be hack or class. Setting
|
37
|
+
// this to class will result in generated CSS rules using html/body classes
|
38
|
+
// specified in $default-legacy-ie*-class variables, like those used in HTML5
|
39
|
+
// Boilerplate.
|
40
|
+
$default-legacy-ie-approach: hack !default;
|
41
|
+
|
42
|
+
// The html/body classes to use when $default-legacy-ie-approach equals class.
|
43
|
+
$default-legacy-ie6-class: lt-ie7;
|
44
|
+
$default-legacy-ie7-class: lt-ie8;
|
45
|
+
|
36
46
|
// Specify the default floating direction for zen's mixins.
|
37
47
|
$zen-float-direction: left !default;
|
38
48
|
|
@@ -89,6 +99,10 @@ $zen-reverse-all-floats: false !default;
|
|
89
99
|
// Calculate the unit width.
|
90
100
|
$unit-width: $grid-width / $column-count;
|
91
101
|
|
102
|
+
@if unit($unit-width) == "px" and floor($unit-width) != ceil($unit-width) {
|
103
|
+
@warn "You may experience rounding errors as the grid width, #{$grid-width}, does not divide evenly into #{$column-count} columns.";
|
104
|
+
}
|
105
|
+
|
92
106
|
// Determine the float direction and its reverse.
|
93
107
|
$dir: $float-direction;
|
94
108
|
@if $reverse-all-floats {
|
@@ -97,7 +111,16 @@ $zen-reverse-all-floats: false !default;
|
|
97
111
|
$rev: zen-direction-flip($dir);
|
98
112
|
|
99
113
|
float: $dir;
|
100
|
-
width: $column-span * $unit-width;
|
114
|
+
$width: $column-span * $unit-width;
|
115
|
+
@if $box-sizing == content-box {
|
116
|
+
@if not comparable($width, $gutter-width) {
|
117
|
+
$units-gutter: unit($gutter-width);
|
118
|
+
$units-grid: unit($grid-width);
|
119
|
+
@warn "The layout cannot be calculated correctly; when using box-sizing: content-box, the units of the gutter (#{$units-gutter} did not match the units of the grid width (#{$units-grid}).";
|
120
|
+
}
|
121
|
+
$width: $width - $gutter-width;
|
122
|
+
}
|
123
|
+
width: $width;
|
101
124
|
margin: {
|
102
125
|
#{$dir}: ($column-position - 1) * $unit-width;
|
103
126
|
#{$rev}: (1 - $column-position - $column-span) * $unit-width;
|
@@ -122,11 +145,20 @@ $zen-reverse-all-floats: false !default;
|
|
122
145
|
// cooler. IE 6 and 7 don't support border-box.
|
123
146
|
@mixin zen-grid-item-base (
|
124
147
|
$gutter-width: $zen-gutter-width,
|
125
|
-
$box-sizing: $zen-box-sizing
|
148
|
+
$box-sizing: $zen-box-sizing,
|
149
|
+
$flow-direction: $zen-float-direction,
|
150
|
+
$reverse-all-flows: $zen-reverse-all-floats
|
126
151
|
) {
|
152
|
+
|
153
|
+
$dir: $flow-direction;
|
154
|
+
@if $reverse-all-flows {
|
155
|
+
$dir: zen-direction-flip($dir);
|
156
|
+
}
|
157
|
+
$rev: zen-direction-flip($dir);
|
158
|
+
|
127
159
|
padding: {
|
128
|
-
left: zen-half-gutter($gutter-width);
|
129
|
-
right: zen-half-gutter($gutter-width);
|
160
|
+
left: zen-half-gutter($gutter-width, $dir);
|
161
|
+
right: zen-half-gutter($gutter-width, $rev);
|
130
162
|
}
|
131
163
|
// Specify the border-box properties.
|
132
164
|
@if $box-sizing == border-box {
|
@@ -147,18 +179,29 @@ $zen-reverse-all-floats: false !default;
|
|
147
179
|
@warn "IE legacy support is on, but $box-sizing is set to #{$box-sizing} and the $box-sizing-polyfill-path is empty.";
|
148
180
|
}
|
149
181
|
@else {
|
150
|
-
@if $legacy-support-for-
|
151
|
-
|
152
|
-
|
182
|
+
@if ($legacy-support-for-ie6 or $legacy-support-for-ie7) {
|
183
|
+
@if $box-sizing-polyfill-path {
|
184
|
+
@if $default-legacy-ie-approach == hack {
|
185
|
+
*behavior: url($box-sizing-polyfill-path);
|
186
|
+
}
|
187
|
+
@else {
|
188
|
+
#{$default-legacy-ie7-class} & {
|
189
|
+
behavior: url($box-sizing-polyfill-path);
|
190
|
+
}
|
191
|
+
}
|
153
192
|
}
|
154
|
-
|
155
|
-
|
156
|
-
|
157
|
-
|
158
|
-
|
159
|
-
|
160
|
-
@
|
161
|
-
|
193
|
+
@if $legacy-support-for-ie6 {
|
194
|
+
@if $default-legacy-ie-approach == hack {
|
195
|
+
_display: inline; // display inline or double your floated margin! [1]
|
196
|
+
_overflow: hidden; // in IE6, overflow auto is broken [2] and so is overflow visible [3]
|
197
|
+
_overflow-y: visible;
|
198
|
+
}
|
199
|
+
@else {
|
200
|
+
#{$default-legacy-ie6-class} & {
|
201
|
+
display: inline; // display inline or double your floated margin! [1]
|
202
|
+
overflow: hidden; // in IE6, overflow auto is broken [2] and so is overflow visible [3]
|
203
|
+
overflow-y: visible;
|
204
|
+
}
|
162
205
|
}
|
163
206
|
// 1. http://www.positioniseverything.net/explorer/doubled-margin.html
|
164
207
|
// 2. http://browservulsel.blogspot.com/2005/04/ie-overflow-auto-scrollbar-overlap.html
|
@@ -186,8 +229,10 @@ $zen-reverse-all-floats: false !default;
|
|
186
229
|
//
|
187
230
|
// Apply this to an HTML item that is in the normal flow of a document to help
|
188
231
|
// align it to the grid. Set the $column-span to the number of columns that the
|
189
|
-
// HTML element should span.
|
190
|
-
// the parent
|
232
|
+
// HTML element should span. For responsive layouts with a percentage-based grid
|
233
|
+
// width, set the $parent-column-count to the number of columns that the parent
|
234
|
+
// element spans; fixed-unit layouts using px, em, etc. do not need to specify
|
235
|
+
// this.
|
191
236
|
//
|
192
237
|
// Unlike the zen-grid-item() mixin, this mixin does not float the HTML item; it
|
193
238
|
// also does not have a half-gutter on each side. By default, it has no gutter
|
@@ -201,39 +246,60 @@ $zen-reverse-all-floats: false !default;
|
|
201
246
|
//
|
202
247
|
@mixin zen-grid-flow-item (
|
203
248
|
$column-span,
|
204
|
-
$column-count,
|
249
|
+
$parent-column-count: false,
|
205
250
|
$alpha-gutter: false,
|
206
251
|
$omega-gutter: true,
|
252
|
+
$flow-direction: $zen-float-direction,
|
253
|
+
$column-count: $zen-column-count,
|
207
254
|
$gutter-width: $zen-gutter-width,
|
208
255
|
$grid-width: $zen-grid-width,
|
209
256
|
$box-sizing: $zen-box-sizing,
|
210
|
-
$
|
211
|
-
$flow-
|
257
|
+
$reverse-all-flows: $zen-reverse-all-floats,
|
258
|
+
$auto-include-flow-item-base: $zen-auto-include-flow-item-base
|
212
259
|
) {
|
213
260
|
|
261
|
+
$columns: $column-count;
|
262
|
+
@if unit($grid-width) == "%" {
|
263
|
+
@if $parent-column-count == false {
|
264
|
+
@warn "For responsive layouts with a percentage-based grid width, you must set the $column-count to the number of columns that the parent element spans.";
|
265
|
+
}
|
266
|
+
@else {
|
267
|
+
$columns: $parent-column-count;
|
268
|
+
}
|
269
|
+
}
|
270
|
+
|
214
271
|
$dir: $flow-direction;
|
215
|
-
@if $
|
272
|
+
@if $reverse-all-flows {
|
216
273
|
$dir: zen-direction-flip($dir);
|
217
274
|
}
|
218
275
|
$rev: zen-direction-flip($dir);
|
219
276
|
|
220
277
|
// Ensure the HTML item either has a full gutter or no gutter on each side.
|
221
278
|
@if $alpha-gutter {
|
222
|
-
margin-#{$dir}: zen-half-gutter($gutter-width);
|
279
|
+
margin-#{$dir}: zen-half-gutter($gutter-width, $rev);
|
223
280
|
}
|
224
281
|
@else {
|
225
|
-
margin-#{$dir}: -
|
282
|
+
margin-#{$dir}: -(zen-half-gutter($gutter-width, $dir));
|
226
283
|
}
|
227
284
|
@if $omega-gutter {
|
228
|
-
margin-#{$rev}: zen-half-gutter($gutter-width);
|
285
|
+
margin-#{$rev}: zen-half-gutter($gutter-width, $dir);
|
229
286
|
}
|
230
287
|
@else {
|
231
|
-
margin-#{$rev}: -
|
288
|
+
margin-#{$rev}: -(zen-half-gutter($gutter-width, $rev));
|
232
289
|
}
|
233
290
|
|
234
291
|
// Calculate the unit width.
|
235
|
-
$unit-width: $grid-width / $
|
236
|
-
width: $column-span * $unit-width;
|
292
|
+
$unit-width: $grid-width / $columns;
|
293
|
+
$width: $column-span * $unit-width;
|
294
|
+
@if $box-sizing == content-box {
|
295
|
+
@if not comparable($width, $gutter-width) {
|
296
|
+
$units-gutter: unit($gutter-width);
|
297
|
+
$units-grid: unit($grid-width);
|
298
|
+
@warn "The layout cannot be calculated correctly; when using box-sizing: content-box, the units of the gutter (#{$units-gutter} did not match the units of the grid width (#{$units-grid}).";
|
299
|
+
}
|
300
|
+
$width: $width - $gutter-width;
|
301
|
+
}
|
302
|
+
width: $width;
|
237
303
|
|
238
304
|
// Auto-apply the unit base mixin.
|
239
305
|
@if $auto-include-flow-item-base {
|
@@ -247,9 +313,22 @@ $zen-reverse-all-floats: false !default;
|
|
247
313
|
//
|
248
314
|
|
249
315
|
// Returns a half gutter width.
|
250
|
-
@function zen-half-gutter(
|
251
|
-
|
252
|
-
|
316
|
+
@function zen-half-gutter(
|
317
|
+
$gutter-width: $zen-gutter-width,
|
318
|
+
$gutter-side: $zen-float-direction,
|
319
|
+
$flow-direction: $zen-float-direction
|
320
|
+
) {
|
321
|
+
$half-gutter: $gutter-width / 2;
|
322
|
+
// Special handling in case gutter has an odd number of pixels.
|
323
|
+
@if unit($gutter-width) == "px" {
|
324
|
+
@if $gutter-side == $flow-direction {
|
325
|
+
@return floor($half-gutter);
|
326
|
+
}
|
327
|
+
@else {
|
328
|
+
@return ceil($half-gutter);
|
329
|
+
}
|
330
|
+
}
|
331
|
+
@return $half-gutter;
|
253
332
|
}
|
254
333
|
|
255
334
|
// Returns the opposite direction, given "left" or "right".
|
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.beta.
|
13
|
-
s.date = '2012-02-
|
12
|
+
s.version = '1.0.beta.5'
|
13
|
+
s.date = '2012-02-13'
|
14
14
|
|
15
15
|
s.authors = ['John Albin Wilkins']
|
16
16
|
s.email = 'virtually.johnalbin@gmail.com'
|
@@ -22,6 +22,7 @@ Gem::Specification.new do |s|
|
|
22
22
|
README.txt
|
23
23
|
lib/zen-grids.rb
|
24
24
|
stylesheets/_zen.scss
|
25
|
+
stylesheets/zen/_background-grid.scss
|
25
26
|
stylesheets/zen/_columns.scss
|
26
27
|
stylesheets/zen/_grids.scss
|
27
28
|
templates/project/example.html
|
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: 62196297
|
5
5
|
prerelease: 4
|
6
6
|
segments:
|
7
7
|
- 1
|
8
8
|
- 0
|
9
9
|
- beta
|
10
|
-
-
|
11
|
-
version: 1.0.beta.
|
10
|
+
- 5
|
11
|
+
version: 1.0.beta.5
|
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-02-
|
19
|
+
date: 2012-02-13 00:00:00 Z
|
20
20
|
dependencies:
|
21
21
|
- !ruby/object:Gem::Dependency
|
22
22
|
name: sass
|
@@ -46,6 +46,7 @@ files:
|
|
46
46
|
- README.txt
|
47
47
|
- lib/zen-grids.rb
|
48
48
|
- stylesheets/_zen.scss
|
49
|
+
- stylesheets/zen/_background-grid.scss
|
49
50
|
- stylesheets/zen/_columns.scss
|
50
51
|
- stylesheets/zen/_grids.scss
|
51
52
|
- templates/project/example.html
|
@@ -84,7 +85,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
|
|
84
85
|
version: 1.3.1
|
85
86
|
requirements: []
|
86
87
|
|
87
|
-
rubyforge_project: 1.0.beta.
|
88
|
+
rubyforge_project: 1.0.beta.5
|
88
89
|
rubygems_version: 1.8.15
|
89
90
|
signing_key:
|
90
91
|
specification_version: 3
|