grid-coordinates 1.0.8 → 1.1.0

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.
Files changed (9) hide show
  1. data/README.mdown +22 -2
  2. data/VERSION +1 -1
  3. data/lib/grid-coordinates.rb +1 -1
  4. data/stylesheets/_grid-coordinates.sass +48 -29
  5. data/stylesheets/_grid-coordinates.scss +38 -18
  6. data/templates/project/index.haml +10 -16
  7. data/templates/project/screen.css +274 -121
  8. data/templates/project/screen.sass +20 -44
  9. metadata +3 -3
data/README.mdown CHANGED
@@ -22,16 +22,36 @@ See `templates/project/screen.sass` for an example.
22
22
 
23
23
  // Configure grid coordinates
24
24
  $grid-columns: 12 !default
25
- $grid-pixels: 60px !default
25
+ $grid-width: 60px !default
26
26
  $grid-gutter-width: 20px !default
27
+ $overflow-allowed: false !default
27
28
 
28
29
  @import grid-coordinates
29
30
 
31
+ // Only needed if you're using the classes instead of the mixins
30
32
  @include grid-coordinates
31
33
 
32
34
  ...
33
35
 
34
- ### Available extends
36
+ The `$overflow-allowed` setting controls which of Compass' two clearfix mixins is used. The default setting, false, will clip any content that overflows a grid block. If you need overflowing content to remain visible (i.e., a drop-down menu inside a grid block) change this setting the true.
37
+
38
+ ### Using the Mixins
39
+
40
+ Use these mixins in your Sass stylesheets. For an example of this in use, see `templates/project`.
41
+
42
+ `@include grid-container`
43
+
44
+ `@include nested-grid-container`
45
+
46
+ `@include grid(4)`
47
+
48
+ `@include grid-prefix(4)`
49
+
50
+ `@include grid-suffix(4)`
51
+
52
+ `@include grid-full`
53
+
54
+ ### Using the Classes
35
55
 
36
56
  Use the extend classes in your HTML or use them to extend in your Sass stylesheets. For an example of this in use, see `templates/project`.
37
57
 
data/VERSION CHANGED
@@ -1 +1 @@
1
- 1.0.7
1
+ 1.1.0
data/lib/grid-coordinates.rb CHANGED
@@ -5,6 +5,6 @@ Compass::Frameworks.register("grid-coordinates", :path => "#{File.dirname(__FILE
5
5
 
6
6
  module GridCoordinates
7
7
 
8
- VERSION = "1.0.8".freeze
8
+ VERSION = "1.1.0".freeze
9
9
 
10
10
  end
data/stylesheets/_grid-coordinates.sass CHANGED
@@ -4,56 +4,75 @@
4
4
  $grid-columns: 12 !default
5
5
  $grid-width: 60px !default
6
6
  $grid-gutter-width: 20px !default
7
+ $overflow-allowed: false !default
7
8
 
8
- @mixin grid-coordinates
9
- /*
10
- Grid-Coordinates by Adam Stacoviak
11
- Fork me: http://adamstac.com/grid-coordinates */
9
+ =grid-coordinates
12
10
  .grid-container
13
- margin: 0 auto
14
- overflow: hidden
15
- width: ($grid-columns * $grid-width) + ($grid-columns * $grid-gutter-width)
11
+ +grid-container
16
12
  .nested-grid-container
17
- display: inline-block
18
- margin:
19
- left: -$grid-gutter-width / 2
20
- right: -$grid-gutter-width / 2
21
- overflow: hidden
22
- width: auto
13
+ +nested-grid-container
23
14
  .grid-block
24
- @include float-left
25
- overflow: hidden
26
- margin: 0 ($grid-gutter-width / 2)
15
+ +grid-block
27
16
  @for $i from 1 through $grid-columns
28
17
  .grid-#{$i}
29
- @include grid($i)
30
- @extend .grid-block
18
+ +grid($i)
31
19
  .grid-full
32
- @include grid($grid-columns)
20
+ +grid-full
33
21
  @for $i from 1 through $grid-columns - 1
34
22
  .grid-prefix-#{$i}
35
- @include grid-prefix($i)
23
+ +grid-prefix($i)
36
24
  @for $i from 1 through $grid-columns - 1
37
25
  .grid-suffix-#{$i}
38
- @include grid-suffix($i)
26
+ +grid-suffix($i)
39
27
 
40
- @mixin grid($grid-columns)
41
- @include grid-width($grid-columns)
28
+ =grid-container
29
+ margin: 0 auto
30
+ @if $overflow-allowed
31
+ +pie-clearfix
32
+ @else
33
+ +clearfix
34
+ width: $grid-columns * $grid-width + $grid-columns * $grid-gutter-width
35
+
36
+ =nested-grid-container
37
+ display: inline-block
38
+ margin:
39
+ left: -$grid-gutter-width / 2
40
+ right: -$grid-gutter-width / 2
41
+ @if $overflow-allowed
42
+ +pie-clearfix
43
+ @else
44
+ +clearfix
45
+ width: auto
42
46
 
43
- @mixin grid-width($grid-columns)
47
+ =grid-block
48
+ +float-left
49
+ @if $overflow-allowed
50
+ +pie-clearfix
51
+ @else
52
+ +clearfix
53
+ margin: 0 $grid-gutter-width / 2
54
+
55
+ =grid($grid-columns)
56
+ +grid-width($grid-columns)
57
+ +grid-block
58
+
59
+ =grid-width($grid-columns)
44
60
  @if $grid-columns == 1
45
61
  width: $grid-width
46
62
  @else
47
- width: ($grid-columns * $grid-width) + (($grid-columns * $grid-gutter-width) - $grid-gutter-width)
63
+ width: $grid-columns * $grid-width + $grid-columns * $grid-gutter-width - $grid-gutter-width
64
+
65
+ =grid-full
66
+ +grid($grid-columns)
48
67
 
49
- @mixin grid-prefix($grid-columns)
68
+ =grid-prefix($grid-columns)
50
69
  @if $grid-columns == 1
51
70
  padding-left: $grid-width + $grid-gutter-width
52
71
  @else
53
- padding-left: ($grid-columns * $grid-width) + ($grid-columns * $grid-gutter-width)
72
+ padding-left: $grid-columns * $grid-width + $grid-columns * $grid-gutter-width
54
73
 
55
- @mixin grid-suffix($grid-columns)
74
+ =grid-suffix($grid-columns)
56
75
  @if $grid-columns == 1
57
76
  padding-right: $grid-width + $grid-gutter-width
58
77
  @else
59
- padding-right: ($grid-columns * $grid-width) + ($grid-columns * $grid-gutter-width)
78
+ padding-right: $grid-columns * $grid-width + $grid-columns * $grid-gutter-width
data/stylesheets/_grid-coordinates.scss CHANGED
@@ -4,31 +4,20 @@
4
4
  $grid-columns: 12 !default;
5
5
  $grid-width: 60px !default;
6
6
  $grid-gutter-width: 20px !default;
7
+ $overflow-allowed: false !default;
7
8
 
8
9
  @mixin grid-coordinates {
9
- /* Grid-Coordinates by Adam Stacoviak
10
- * Fork me: http://adamstac.com/grid-coordinates */
11
10
  .grid-container {
12
- margin: 0 auto;
13
- overflow: hidden;
14
- width: $grid-columns * $grid-width + $grid-columns * $grid-gutter-width; }
11
+ @include grid-container; }
15
12
  .nested-grid-container {
16
- display: inline-block;
17
- margin: {
18
- left: -$grid-gutter-width / 2;
19
- right: -$grid-gutter-width / 2; };
20
- overflow: hidden;
21
- width: auto; }
13
+ @include nested-grid-container; }
22
14
  .grid-block {
23
- @include float-left;
24
- overflow: hidden;
25
- margin: 0 $grid-gutter-width / 2; }
15
+ @include grid-block; }
26
16
  @for $i from 1 through $grid-columns {
27
17
  .grid-#{$i} {
28
- @include grid($i);
29
- @extend .grid-block; } }
18
+ @include grid($i); } }
30
19
  .grid-full {
31
- @include grid($grid-columns); }
20
+ @include grid-full; }
32
21
  @for $i from 1 through $grid-columns - 1 {
33
22
  .grid-prefix-#{$i} {
34
23
  @include grid-prefix($i); } }
@@ -36,8 +25,36 @@ $grid-gutter-width: 20px !default;
36
25
  .grid-suffix-#{$i} {
37
26
  @include grid-suffix($i); } } }
38
27
 
28
+ @mixin grid-container {
29
+ margin: 0 auto;
30
+ @if $overflow-allowed {
31
+ @include pie-clearfix; }
32
+ @else {
33
+ @include clearfix; }
34
+ width: $grid-columns * $grid-width + $grid-columns * $grid-gutter-width; }
35
+
36
+ @mixin nested-grid-container {
37
+ display: inline-block;
38
+ margin: {
39
+ left: -$grid-gutter-width / 2;
40
+ right: -$grid-gutter-width / 2; };
41
+ @if $overflow-allowed {
42
+ @include pie-clearfix; }
43
+ @else {
44
+ @include clearfix; }
45
+ width: auto; }
46
+
47
+ @mixin grid-block {
48
+ @include float-left;
49
+ @if $overflow-allowed {
50
+ @include pie-clearfix; }
51
+ @else {
52
+ @include clearfix; }
53
+ margin: 0 $grid-gutter-width / 2; }
54
+
39
55
  @mixin grid($grid-columns) {
40
- @include grid-width($grid-columns); }
56
+ @include grid-width($grid-columns);
57
+ @include grid-block; }
41
58
 
42
59
  @mixin grid-width($grid-columns) {
43
60
  @if $grid-columns == 1 {
@@ -45,6 +62,9 @@ $grid-gutter-width: 20px !default;
45
62
  @else {
46
63
  width: $grid-columns * $grid-width + $grid-columns * $grid-gutter-width - $grid-gutter-width; } }
47
64
 
65
+ @mixin grid-full {
66
+ @include grid($grid-columns); }
67
+
48
68
  @mixin grid-prefix($grid-columns) {
49
69
  @if $grid-columns == 1 {
50
70
  padding-left: $grid-width + $grid-gutter-width; }
data/templates/project/index.haml CHANGED
@@ -1,23 +1,17 @@
1
1
  !!! Strict
2
2
  %html
3
3
  %head
4
- %title Grid Coordinates - Sample
4
+ %title Grid Coordinates - Example
5
5
  %link{:href => "screen.css", :media => "all", :rel => "stylesheet", :type => "text/css"}
6
- %body{:id => body_id, :class => body_class}
6
+ %body
7
7
  #header
8
- #brand
9
- .content
10
- %p brand
11
- #nav
12
- .content
13
- %p nav
8
+ %h1 Website Name
9
+ #nav-main
10
+ This is the main navigation
14
11
  #page
15
- #page-body
16
- .content
17
- %p page-body
18
- #page-sidebar
19
- .content
20
- %p page-sidebar
12
+ #content
13
+ This is the content section
14
+ #sidebar
15
+ This is the sidebar section
21
16
  #footer
22
- .content
23
- %p footer
17
+ This is the footer section
data/templates/project/screen.css CHANGED
@@ -1,279 +1,432 @@
1
- html, body, div, span, applet, object, iframe,
2
- h1, h2, h3, h4, h5, h6, p, blockquote, pre,
3
- a, abbr, acronym, address, big, cite, code,
4
- del, dfn, em, font, img, ins, kbd, q, s, samp,
5
- small, strike, strong, sub, sup, tt, var,
6
- dl, dt, dd, ol, ul, li,
7
- fieldset, form, label, legend,
8
- table, caption, tbody, tfoot, thead, tr, th, td {
9
- margin: 0;
10
- padding: 0;
11
- border: 0;
12
- outline: 0;
13
- font-weight: inherit;
14
- font-style: inherit;
15
- font-size: 100%;
16
- font-family: inherit;
17
- vertical-align: baseline;
1
+ .grid-container, #header, #page, #footer {
2
+ margin: 0 auto;
3
+ overflow: hidden;
4
+ *zoom: 1;
5
+ width: 960px;
18
6
  }
19
7
 
20
- body {
21
- line-height: 1;
22
- color: black;
23
- background: white;
8
+ .nested-grid-container {
9
+ display: inline-block;
10
+ margin-left: -5px;
11
+ margin-right: -5px;
12
+ overflow: hidden;
13
+ *zoom: 1;
14
+ width: auto;
24
15
  }
25
16
 
26
- ol, ul {
27
- list-style: none;
17
+ .grid-block {
18
+ display: inline;
19
+ float: left;
20
+ overflow: hidden;
21
+ *zoom: 1;
22
+ margin: 0 5px;
28
23
  }
29
24
 
30
- table {
31
- border-collapse: separate;
32
- border-spacing: 0;
33
- vertical-align: middle;
25
+ .grid-1 {
26
+ width: 30px;
27
+ display: inline;
28
+ float: left;
29
+ overflow: hidden;
30
+ *zoom: 1;
31
+ margin: 0 5px;
34
32
  }
35
33
 
36
- caption, th, td {
37
- text-align: left;
38
- font-weight: normal;
39
- vertical-align: middle;
34
+ .grid-2 {
35
+ width: 70px;
36
+ display: inline;
37
+ float: left;
38
+ overflow: hidden;
39
+ *zoom: 1;
40
+ margin: 0 5px;
40
41
  }
41
42
 
42
- q, blockquote {
43
- quotes: "" "";
43
+ .grid-3 {
44
+ width: 110px;
45
+ display: inline;
46
+ float: left;
47
+ overflow: hidden;
48
+ *zoom: 1;
49
+ margin: 0 5px;
44
50
  }
45
- q:before, q:after, blockquote:before, blockquote:after {
46
- content: "";
51
+
52
+ .grid-4 {
53
+ width: 150px;
54
+ display: inline;
55
+ float: left;
56
+ overflow: hidden;
57
+ *zoom: 1;
58
+ margin: 0 5px;
47
59
  }
48
60
 
49
- a img {
50
- border: none;
61
+ .grid-5 {
62
+ width: 190px;
63
+ display: inline;
64
+ float: left;
65
+ overflow: hidden;
66
+ *zoom: 1;
67
+ margin: 0 5px;
51
68
  }
52
69
 
53
- body {
54
- font: bold 14px helvetica, arial, sans-serif;
55
- padding-top: 20px;
70
+ .grid-6, #header h1, #page #sidebar {
71
+ width: 230px;
72
+ display: inline;
73
+ float: left;
74
+ overflow: hidden;
75
+ *zoom: 1;
76
+ margin: 0 5px;
56
77
  }
57
78
 
58
- /* Grid-Coordinates by Adam Stacoviak
59
- * Fork me: http://adamstac.com/grid-coordinates */
60
- .grid-container, #header, #page, #footer {
61
- margin: 0 auto;
79
+ .grid-7 {
80
+ width: 270px;
81
+ display: inline;
82
+ float: left;
62
83
  overflow: hidden;
63
- width: 960px;
84
+ *zoom: 1;
85
+ margin: 0 5px;
64
86
  }
65
87
 
66
- .nested-grid-container {
67
- display: inline-block;
68
- margin-left: -10px;
69
- margin-right: -10px;
88
+ .grid-8 {
89
+ width: 310px;
90
+ display: inline;
91
+ float: left;
70
92
  overflow: hidden;
71
- width: auto;
93
+ *zoom: 1;
94
+ margin: 0 5px;
72
95
  }
73
96
 
74
- .grid-1 {
75
- width: 60px;
97
+ .grid-9 {
98
+ width: 350px;
76
99
  display: inline;
77
100
  float: left;
78
- margin: 0 10px;
79
101
  overflow: hidden;
102
+ *zoom: 1;
103
+ margin: 0 5px;
80
104
  }
81
105
 
82
- .grid-2 {
83
- width: 140px;
106
+ .grid-10 {
107
+ width: 390px;
84
108
  display: inline;
85
109
  float: left;
86
- margin: 0 10px;
87
110
  overflow: hidden;
111
+ *zoom: 1;
112
+ margin: 0 5px;
88
113
  }
89
114
 
90
- .grid-3, #brand {
91
- width: 220px;
115
+ .grid-11 {
116
+ width: 430px;
92
117
  display: inline;
93
118
  float: left;
94
- margin: 0 10px;
95
119
  overflow: hidden;
120
+ *zoom: 1;
121
+ margin: 0 5px;
96
122
  }
97
123
 
98
- .grid-4, #page-sidebar {
99
- width: 300px;
124
+ .grid-12 {
125
+ width: 470px;
100
126
  display: inline;
101
127
  float: left;
102
- margin: 0 10px;
103
128
  overflow: hidden;
129
+ *zoom: 1;
130
+ margin: 0 5px;
104
131
  }
105
132
 
106
- .grid-5 {
107
- width: 380px;
133
+ .grid-13 {
134
+ width: 510px;
108
135
  display: inline;
109
136
  float: left;
110
- margin: 0 10px;
111
137
  overflow: hidden;
138
+ *zoom: 1;
139
+ margin: 0 5px;
112
140
  }
113
141
 
114
- .grid-6 {
115
- width: 460px;
142
+ .grid-14 {
143
+ width: 550px;
116
144
  display: inline;
117
145
  float: left;
118
- margin: 0 10px;
119
146
  overflow: hidden;
147
+ *zoom: 1;
148
+ margin: 0 5px;
120
149
  }
121
150
 
122
- .grid-7 {
123
- width: 540px;
151
+ .grid-15 {
152
+ width: 590px;
124
153
  display: inline;
125
154
  float: left;
126
- margin: 0 10px;
127
155
  overflow: hidden;
156
+ *zoom: 1;
157
+ margin: 0 5px;
128
158
  }
129
159
 
130
- .grid-8, #page-body {
131
- width: 620px;
160
+ .grid-16, #header #nav-main {
161
+ width: 630px;
132
162
  display: inline;
133
163
  float: left;
134
- margin: 0 10px;
135
164
  overflow: hidden;
165
+ *zoom: 1;
166
+ margin: 0 5px;
136
167
  }
137
168
 
138
- .grid-9, #nav {
139
- width: 700px;
169
+ .grid-17, #page #content {
170
+ width: 670px;
140
171
  display: inline;
141
172
  float: left;
142
- margin: 0 10px;
143
173
  overflow: hidden;
174
+ *zoom: 1;
175
+ margin: 0 5px;
144
176
  }
145
177
 
146
- .grid-10 {
147
- width: 780px;
178
+ .grid-18 {
179
+ width: 710px;
148
180
  display: inline;
149
181
  float: left;
150
- margin: 0 10px;
151
182
  overflow: hidden;
183
+ *zoom: 1;
184
+ margin: 0 5px;
152
185
  }
153
186
 
154
- .grid-11 {
155
- width: 860px;
187
+ .grid-19 {
188
+ width: 750px;
156
189
  display: inline;
157
190
  float: left;
158
- margin: 0 10px;
159
191
  overflow: hidden;
192
+ *zoom: 1;
193
+ margin: 0 5px;
160
194
  }
161
195
 
162
- .grid-12 {
163
- width: 940px;
196
+ .grid-20 {
197
+ width: 790px;
198
+ display: inline;
199
+ float: left;
200
+ overflow: hidden;
201
+ *zoom: 1;
202
+ margin: 0 5px;
203
+ }
204
+
205
+ .grid-21 {
206
+ width: 830px;
164
207
  display: inline;
165
208
  float: left;
166
- margin: 0 10px;
167
209
  overflow: hidden;
210
+ *zoom: 1;
211
+ margin: 0 5px;
168
212
  }
169
213
 
170
- .grid-full, #page-body.wide, #footer .content {
171
- width: 940px;
214
+ .grid-22 {
215
+ width: 870px;
172
216
  display: inline;
173
217
  float: left;
174
- margin: 0 10px;
175
218
  overflow: hidden;
219
+ *zoom: 1;
220
+ margin: 0 5px;
221
+ }
222
+
223
+ .grid-23 {
224
+ width: 910px;
225
+ display: inline;
226
+ float: left;
227
+ overflow: hidden;
228
+ *zoom: 1;
229
+ margin: 0 5px;
230
+ }
231
+
232
+ .grid-24 {
233
+ width: 950px;
234
+ display: inline;
235
+ float: left;
236
+ overflow: hidden;
237
+ *zoom: 1;
238
+ margin: 0 5px;
239
+ }
240
+
241
+ .grid-full {
242
+ width: 950px;
243
+ display: inline;
244
+ float: left;
245
+ overflow: hidden;
246
+ *zoom: 1;
247
+ margin: 0 5px;
176
248
  }
177
249
 
178
250
  .grid-prefix-1 {
179
- padding-left: 80px;
251
+ padding-left: 40px;
180
252
  }
181
253
 
182
254
  .grid-prefix-2 {
183
- padding-left: 160px;
255
+ padding-left: 80px;
184
256
  }
185
257
 
186
258
  .grid-prefix-3 {
187
- padding-left: 240px;
259
+ padding-left: 120px;
188
260
  }
189
261
 
190
262
  .grid-prefix-4 {
191
- padding-left: 320px;
263
+ padding-left: 160px;
192
264
  }
193
265
 
194
266
  .grid-prefix-5 {
195
- padding-left: 400px;
267
+ padding-left: 200px;
196
268
  }
197
269
 
198
270
  .grid-prefix-6 {
199
- padding-left: 480px;
271
+ padding-left: 240px;
200
272
  }
201
273
 
202
274
  .grid-prefix-7 {
203
- padding-left: 560px;
275
+ padding-left: 280px;
204
276
  }
205
277
 
206
278
  .grid-prefix-8 {
207
- padding-left: 640px;
279
+ padding-left: 320px;
208
280
  }
209
281
 
210
282
  .grid-prefix-9 {
211
- padding-left: 720px;
283
+ padding-left: 360px;
212
284
  }
213
285
 
214
286
  .grid-prefix-10 {
215
- padding-left: 800px;
287
+ padding-left: 400px;
216
288
  }
217
289
 
218
290
  .grid-prefix-11 {
291
+ padding-left: 440px;
292
+ }
293
+
294
+ .grid-prefix-12 {
295
+ padding-left: 480px;
296
+ }
297
+
298
+ .grid-prefix-13 {
299
+ padding-left: 520px;
300
+ }
301
+
302
+ .grid-prefix-14 {
303
+ padding-left: 560px;
304
+ }
305
+
306
+ .grid-prefix-15 {
307
+ padding-left: 600px;
308
+ }
309
+
310
+ .grid-prefix-16 {
311
+ padding-left: 640px;
312
+ }
313
+
314
+ .grid-prefix-17 {
315
+ padding-left: 680px;
316
+ }
317
+
318
+ .grid-prefix-18 {
319
+ padding-left: 720px;
320
+ }
321
+
322
+ .grid-prefix-19 {
323
+ padding-left: 760px;
324
+ }
325
+
326
+ .grid-prefix-20 {
327
+ padding-left: 800px;
328
+ }
329
+
330
+ .grid-prefix-21 {
331
+ padding-left: 840px;
332
+ }
333
+
334
+ .grid-prefix-22 {
219
335
  padding-left: 880px;
220
336
  }
221
337
 
222
- .grid-suffix-1 {
223
- padding-right: 80px;
338
+ .grid-prefix-23 {
339
+ padding-left: 920px;
224
340
  }
225
341
 
226
- .grid-suffix-2 {
227
- padding-right: 160px;
342
+ .grid-suffix-1, #page #content {
343
+ padding-right: 40px;
344
+ }
345
+
346
+ .grid-suffix-2, #header h1 {
347
+ padding-right: 80px;
228
348
  }
229
349
 
230
350
  .grid-suffix-3 {
231
- padding-right: 240px;
351
+ padding-right: 120px;
232
352
  }
233
353
 
234
354
  .grid-suffix-4 {
235
- padding-right: 320px;
355
+ padding-right: 160px;
236
356
  }
237
357
 
238
358
  .grid-suffix-5 {
239
- padding-right: 400px;
359
+ padding-right: 200px;
240
360
  }
241
361
 
242
362
  .grid-suffix-6 {
243
- padding-right: 480px;
363
+ padding-right: 240px;
244
364
  }
245
365
 
246
366
  .grid-suffix-7 {
247
- padding-right: 560px;
367
+ padding-right: 280px;
248
368
  }
249
369
 
250
370
  .grid-suffix-8 {
251
- padding-right: 640px;
371
+ padding-right: 320px;
252
372
  }
253
373
 
254
374
  .grid-suffix-9 {
255
- padding-right: 720px;
375
+ padding-right: 360px;
256
376
  }
257
377
 
258
378
  .grid-suffix-10 {
259
- padding-right: 800px;
379
+ padding-right: 400px;
260
380
  }
261
381
 
262
382
  .grid-suffix-11 {
263
- padding-right: 880px;
383
+ padding-right: 440px;
264
384
  }
265
385
 
266
- .common, #brand, #nav, #page-body, #page-sidebar, #footer .content {
267
- background: #444444;
268
- color: white;
269
- margin-bottom: 20px;
270
- text-align: center;
386
+ .grid-suffix-12 {
387
+ padding-right: 480px;
388
+ }
389
+
390
+ .grid-suffix-13 {
391
+ padding-right: 520px;
271
392
  }
272
393
 
273
- #brand, #nav, #footer .content {
274
- line-height: 100px;
394
+ .grid-suffix-14 {
395
+ padding-right: 560px;
396
+ }
397
+
398
+ .grid-suffix-15 {
399
+ padding-right: 600px;
400
+ }
401
+
402
+ .grid-suffix-16 {
403
+ padding-right: 640px;
404
+ }
405
+
406
+ .grid-suffix-17 {
407
+ padding-right: 680px;
408
+ }
409
+
410
+ .grid-suffix-18 {
411
+ padding-right: 720px;
412
+ }
413
+
414
+ .grid-suffix-19 {
415
+ padding-right: 760px;
416
+ }
417
+
418
+ .grid-suffix-20 {
419
+ padding-right: 800px;
420
+ }
421
+
422
+ .grid-suffix-21 {
423
+ padding-right: 840px;
424
+ }
425
+
426
+ .grid-suffix-22 {
427
+ padding-right: 880px;
275
428
  }
276
429
 
277
- #page-body, #page-sidebar {
278
- line-height: 400px;
430
+ .grid-suffix-23 {
431
+ padding-right: 920px;
279
432
  }
data/templates/project/screen.sass CHANGED
@@ -1,50 +1,26 @@
1
- @import compass/reset
2
- @import compass/utilities
3
-
4
- body
5
- font: bold 14px helvetica, arial, sans-serif
6
- padding-top: 20px
7
-
8
- // // Configure grid coordinates
9
- // $grid-columns: 16
10
- // $grid-pixels: 40px
11
- // $grid-gutter-width: 20px
1
+ // Configure grid coordinates
2
+ $grid-columns: 24
3
+ $grid-width: 30px
4
+ $grid-gutter-width: 10px
12
5
 
13
6
  @import grid-coordinates
14
7
 
15
- @include grid-coordinates
8
+ +grid-coordinates
16
9
 
17
10
  #header, #page, #footer
18
11
  @extend .grid-container
19
-
20
- #brand
21
- @extend .grid-3
22
-
23
- #nav
24
- @extend .grid-9
25
-
26
- #page-body
27
- @extend .grid-8
28
- &.wide
29
- @extend .grid-full
30
-
31
- #page-sidebar
32
- @extend .grid-4
33
-
34
- #footer .content
35
- @extend .grid-full
36
-
37
- .common
38
- background: #444
39
- color: #fff
40
- margin-bottom: 20px
41
- text-align: center
42
-
43
- #brand, #nav, #page-body, #page-sidebar, #footer .content
44
- @extend .common
45
-
46
- #brand, #nav, #footer .content
47
- line-height: 100px
48
-
49
- #page-body, #page-sidebar
50
- line-height: 400px
12
+ +box-sizing(border-box)
13
+
14
+ #header
15
+ h1
16
+ @extend .grid-6
17
+ @extend .grid-suffix-2
18
+ #nav-main
19
+ @extend .grid-16
20
+
21
+ #page
22
+ #content
23
+ @extend .grid-17
24
+ @extend .grid-suffix-1
25
+ #sidebar
26
+ @extend .grid-6
metadata CHANGED
@@ -1,13 +1,13 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: grid-coordinates
3
3
  version: !ruby/object:Gem::Version
4
- hash: 7
4
+ hash: 19
5
5
  prerelease: false
6
6
  segments:
7
7
  - 1
8
+ - 1
8
9
  - 0
9
- - 8
10
- version: 1.0.8
10
+ version: 1.1.0
11
11
  platform: ruby
12
12
  authors:
13
13
  - Adam Stacoviak