grid-coordinates 1.1.1 → 1.1.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.
data/Rakefile ADDED
@@ -0,0 +1,25 @@
1
+ require 'lib/grid-coordinates'
2
+
3
+ namespace :sass do
4
+
5
+ desc "Converts the Sass to SCSS"
6
+ task :convert do
7
+ puts "*** Converting Sass to SCSS ***"
8
+ system "sass-convert stylesheets/*.sass stylesheets/*.scss"
9
+ end
10
+
11
+ end
12
+
13
+ namespace :gem do
14
+
15
+ desc "Build the gem"
16
+ task :build do
17
+ system "gem build *.gemspec"
18
+ end
19
+
20
+ desc "Build and release the gem"
21
+ task :release => :build do
22
+ system "gem push grid-coordinates-#{GridCoordinates::VERSION}.gem"
23
+ end
24
+
25
+ end
@@ -5,6 +5,6 @@ Compass::Frameworks.register("grid-coordinates", :path => "#{File.dirname(__FILE
5
5
 
6
6
  module GridCoordinates
7
7
 
8
- VERSION = "1.1.1".freeze
8
+ VERSION = "1.1.2".freeze
9
9
 
10
10
  end
@@ -4,20 +4,42 @@
4
4
  $grid-columns: 12 !default
5
5
  $grid-width: 60px !default
6
6
  $grid-gutter-width: 20px !default
7
- $overflow-allowed: true !default
7
+ $overflow: true !default
8
8
 
9
9
  =grid-coordinates
10
+ @if $overflow
11
+ .grid-pie-clearfix
12
+ +pie-clearfix
13
+ @else
14
+ .grid-clearfix
15
+ +clearfix
10
16
  .grid-container
11
- +grid-container
17
+ +grid-container-base
18
+ @if $overflow
19
+ @extend .grid-pie-clearfix
20
+ @else
21
+ @extend .grid-clearfix
12
22
  .nested-grid-container
13
- +nested-grid-container
23
+ +nested-grid-container-base
24
+ @if $overflow
25
+ @extend .grid-pie-clearfix
26
+ @else
27
+ @extend .grid-clearfix
14
28
  .grid-block
15
- +grid-block
29
+ +grid-block-base
30
+ @if $overflow
31
+ @extend .grid-pie-clearfix
32
+ @else
33
+ @extend .grid-clearfix
34
+ .grid-full
35
+ +grid-base($grid-columns)
36
+ @extend .grid-block
37
+
38
+ // Loops
16
39
  @for $i from 1 through $grid-columns
17
40
  .grid-#{$i}
18
- +grid($i)
19
- .grid-full
20
- +grid-full
41
+ +grid-base($i)
42
+ @extend .grid-block
21
43
  @for $i from 1 through $grid-columns - 1
22
44
  .grid-prefix-#{$i}
23
45
  +grid-prefix($i)
@@ -31,38 +53,55 @@ $overflow-allowed: true !default
31
53
  .grid-pull-#{$i}
32
54
  +grid-pull($i)
33
55
 
34
- =overflow-allowed($boolean: $overflow-allowed)
35
- @if $boolean
56
+ =overflow
57
+ @if $overflow
36
58
  +pie-clearfix
37
59
  @else
38
60
  +clearfix
39
61
 
40
- =grid-container
41
- +overflow-allowed
62
+ // Grid Container
63
+ =grid-container-base
42
64
  margin: 0 auto
43
65
  width: $grid-columns * $grid-width + $grid-columns * $grid-gutter-width
44
66
 
45
- =nested-grid-container
46
- +overflow-allowed
67
+ =grid-container
68
+ +overflow
69
+ +grid-container-base
70
+
71
+ // Nested Container
72
+ =nested-grid-container-base
47
73
  display: inline-block
48
74
  margin:
49
75
  left: -$grid-gutter-width / 2
50
76
  right: -$grid-gutter-width / 2
51
77
  width: auto
52
78
 
53
- =grid-block
79
+ =nested-grid-container
80
+ +overflow
81
+ +nested-grid-container-base
82
+
83
+ // Grid Block
84
+ =grid-block-base
54
85
  +float-left
55
- +overflow-allowed
86
+ position: relative
56
87
  margin: 0 $grid-gutter-width / 2
57
88
 
58
- =grid($grid-columns)
59
- position: relative
89
+ =grid-block
90
+ +grid-block-base
91
+ +overflow
92
+
93
+ // Grid
94
+ =grid-base($grid-columns)
60
95
  +grid-width($grid-columns)
96
+
97
+ =grid($grid-columns)
98
+ +grid-base($grid-columns)
61
99
  +grid-block
62
100
 
63
101
  =grid-full
64
102
  +grid($grid-columns)
65
103
 
104
+ // Grid logic
66
105
  =grid-width($grid-columns)
67
106
  @if $grid-columns == 1
68
107
  width: $grid-width
@@ -4,20 +4,41 @@
4
4
  $grid-columns: 12 !default;
5
5
  $grid-width: 60px !default;
6
6
  $grid-gutter-width: 20px !default;
7
- $overflow-allowed: true !default;
7
+ $overflow: true !default;
8
8
 
9
9
  @mixin grid-coordinates {
10
+ @if $overflow {
11
+ .grid-pie-clearfix {
12
+ @include pie-clearfix; } }
13
+ @else {
14
+ .grid-clearfix {
15
+ @include clearfix; } }
10
16
  .grid-container {
11
- @include grid-container; }
17
+ @include grid-container-base;
18
+ @if $overflow {
19
+ @extend .grid-pie-clearfix; }
20
+ @else {
21
+ @extend .grid-clearfix; } }
12
22
  .nested-grid-container {
13
- @include nested-grid-container; }
23
+ @include nested-grid-container-base;
24
+ @if $overflow {
25
+ @extend .grid-pie-clearfix; }
26
+ @else {
27
+ @extend .grid-clearfix; } }
14
28
  .grid-block {
15
- @include grid-block; }
29
+ @include grid-block-base;
30
+ @if $overflow {
31
+ @extend .grid-pie-clearfix; }
32
+ @else {
33
+ @extend .grid-clearfix; } }
34
+ .grid-full {
35
+ @include grid-base($grid-columns);
36
+ @extend .grid-block; }
37
+ // Loops
16
38
  @for $i from 1 through $grid-columns {
17
39
  .grid-#{$i} {
18
- @include grid($i); } }
19
- .grid-full {
20
- @include grid-full; }
40
+ @include grid-base($i);
41
+ @extend .grid-block; } }
21
42
  @for $i from 1 through $grid-columns - 1 {
22
43
  .grid-prefix-#{$i} {
23
44
  @include grid-prefix($i); } }
@@ -31,38 +52,55 @@ $overflow-allowed: true !default;
31
52
  .grid-pull-#{$i} {
32
53
  @include grid-pull($i); } } }
33
54
 
34
- @mixin overflow-allowed($boolean: $overflow-allowed) {
35
- @if $boolean {
55
+ @mixin overflow {
56
+ @if $overflow {
36
57
  @include pie-clearfix; }
37
58
  @else {
38
59
  @include clearfix; } }
39
60
 
40
- @mixin grid-container {
41
- @include overflow-allowed;
61
+ // Grid Container
62
+ @mixin grid-container-base {
42
63
  margin: 0 auto;
43
64
  width: $grid-columns * $grid-width + $grid-columns * $grid-gutter-width; }
44
65
 
45
- @mixin nested-grid-container {
46
- @include overflow-allowed;
66
+ @mixin grid-container {
67
+ @include overflow;
68
+ @include grid-container-base; }
69
+
70
+ // Nested Container
71
+ @mixin nested-grid-container-base {
47
72
  display: inline-block;
48
73
  margin: {
49
74
  left: -$grid-gutter-width / 2;
50
75
  right: -$grid-gutter-width / 2; };
51
76
  width: auto; }
52
77
 
53
- @mixin grid-block {
78
+ @mixin nested-grid-container {
79
+ @include overflow;
80
+ @include nested-grid-container-base; }
81
+
82
+ // Grid Block
83
+ @mixin grid-block-base {
54
84
  @include float-left;
55
- @include overflow-allowed;
85
+ position: relative;
56
86
  margin: 0 $grid-gutter-width / 2; }
57
87
 
88
+ @mixin grid-block {
89
+ @include grid-block-base;
90
+ @include overflow; }
91
+
92
+ // Grid
93
+ @mixin grid-base($grid-columns) {
94
+ @include grid-width($grid-columns); }
95
+
58
96
  @mixin grid($grid-columns) {
59
- position: relative;
60
- @include grid-width($grid-columns);
97
+ @include grid-base($grid-columns);
61
98
  @include grid-block; }
62
99
 
63
100
  @mixin grid-full {
64
101
  @include grid($grid-columns); }
65
102
 
103
+ // Grid logic
66
104
  @mixin grid-width($grid-columns) {
67
105
  @if $grid-columns == 1 {
68
106
  width: $grid-width; }
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: 17
4
+ hash: 23
5
5
  prerelease: false
6
6
  segments:
7
7
  - 1
8
8
  - 1
9
- - 1
10
- version: 1.1.1
9
+ - 2
10
+ version: 1.1.2
11
11
  platform: ruby
12
12
  authors:
13
13
  - Adam Stacoviak
@@ -43,15 +43,11 @@ extensions: []
43
43
  extra_rdoc_files: []
44
44
 
45
45
  files:
46
+ - Rakefile
46
47
  - README.mdown
47
- - VERSION
48
48
  - lib/grid-coordinates.rb
49
49
  - stylesheets/_grid-coordinates.sass
50
50
  - stylesheets/_grid-coordinates.scss
51
- - templates/project/index.haml
52
- - templates/project/manifest.rb
53
- - templates/project/screen.css
54
- - templates/project/screen.sass
55
51
  has_rdoc: true
56
52
  homepage: http://adamstacoviak.com/
57
53
  licenses: []
data/VERSION DELETED
@@ -1 +0,0 @@
1
- 1.1.1
@@ -1,17 +0,0 @@
1
- !!! Strict
2
- %html
3
- %head
4
- %title Grid Coordinates - Example
5
- %link{:href => "screen.css", :media => "all", :rel => "stylesheet", :type => "text/css"}
6
- %body
7
- #header
8
- %h1 Website Name
9
- #nav-main
10
- This is the main navigation
11
- #page
12
- #content
13
- This is the content section
14
- #sidebar
15
- This is the sidebar section
16
- #footer
17
- This is the footer section
@@ -1,3 +0,0 @@
1
- description "Grid Coordinates"
2
-
3
- discover :all
@@ -1,432 +0,0 @@
1
- .grid-container, #header, #page, #footer {
2
- margin: 0 auto;
3
- overflow: hidden;
4
- *zoom: 1;
5
- width: 960px;
6
- }
7
-
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;
15
- }
16
-
17
- .grid-block {
18
- display: inline;
19
- float: left;
20
- overflow: hidden;
21
- *zoom: 1;
22
- margin: 0 5px;
23
- }
24
-
25
- .grid-1 {
26
- width: 30px;
27
- display: inline;
28
- float: left;
29
- overflow: hidden;
30
- *zoom: 1;
31
- margin: 0 5px;
32
- }
33
-
34
- .grid-2 {
35
- width: 70px;
36
- display: inline;
37
- float: left;
38
- overflow: hidden;
39
- *zoom: 1;
40
- margin: 0 5px;
41
- }
42
-
43
- .grid-3 {
44
- width: 110px;
45
- display: inline;
46
- float: left;
47
- overflow: hidden;
48
- *zoom: 1;
49
- margin: 0 5px;
50
- }
51
-
52
- .grid-4 {
53
- width: 150px;
54
- display: inline;
55
- float: left;
56
- overflow: hidden;
57
- *zoom: 1;
58
- margin: 0 5px;
59
- }
60
-
61
- .grid-5 {
62
- width: 190px;
63
- display: inline;
64
- float: left;
65
- overflow: hidden;
66
- *zoom: 1;
67
- margin: 0 5px;
68
- }
69
-
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;
77
- }
78
-
79
- .grid-7 {
80
- width: 270px;
81
- display: inline;
82
- float: left;
83
- overflow: hidden;
84
- *zoom: 1;
85
- margin: 0 5px;
86
- }
87
-
88
- .grid-8 {
89
- width: 310px;
90
- display: inline;
91
- float: left;
92
- overflow: hidden;
93
- *zoom: 1;
94
- margin: 0 5px;
95
- }
96
-
97
- .grid-9 {
98
- width: 350px;
99
- display: inline;
100
- float: left;
101
- overflow: hidden;
102
- *zoom: 1;
103
- margin: 0 5px;
104
- }
105
-
106
- .grid-10 {
107
- width: 390px;
108
- display: inline;
109
- float: left;
110
- overflow: hidden;
111
- *zoom: 1;
112
- margin: 0 5px;
113
- }
114
-
115
- .grid-11 {
116
- width: 430px;
117
- display: inline;
118
- float: left;
119
- overflow: hidden;
120
- *zoom: 1;
121
- margin: 0 5px;
122
- }
123
-
124
- .grid-12 {
125
- width: 470px;
126
- display: inline;
127
- float: left;
128
- overflow: hidden;
129
- *zoom: 1;
130
- margin: 0 5px;
131
- }
132
-
133
- .grid-13 {
134
- width: 510px;
135
- display: inline;
136
- float: left;
137
- overflow: hidden;
138
- *zoom: 1;
139
- margin: 0 5px;
140
- }
141
-
142
- .grid-14 {
143
- width: 550px;
144
- display: inline;
145
- float: left;
146
- overflow: hidden;
147
- *zoom: 1;
148
- margin: 0 5px;
149
- }
150
-
151
- .grid-15 {
152
- width: 590px;
153
- display: inline;
154
- float: left;
155
- overflow: hidden;
156
- *zoom: 1;
157
- margin: 0 5px;
158
- }
159
-
160
- .grid-16, #header #nav-main {
161
- width: 630px;
162
- display: inline;
163
- float: left;
164
- overflow: hidden;
165
- *zoom: 1;
166
- margin: 0 5px;
167
- }
168
-
169
- .grid-17, #page #content {
170
- width: 670px;
171
- display: inline;
172
- float: left;
173
- overflow: hidden;
174
- *zoom: 1;
175
- margin: 0 5px;
176
- }
177
-
178
- .grid-18 {
179
- width: 710px;
180
- display: inline;
181
- float: left;
182
- overflow: hidden;
183
- *zoom: 1;
184
- margin: 0 5px;
185
- }
186
-
187
- .grid-19 {
188
- width: 750px;
189
- display: inline;
190
- float: left;
191
- overflow: hidden;
192
- *zoom: 1;
193
- margin: 0 5px;
194
- }
195
-
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;
207
- display: inline;
208
- float: left;
209
- overflow: hidden;
210
- *zoom: 1;
211
- margin: 0 5px;
212
- }
213
-
214
- .grid-22 {
215
- width: 870px;
216
- display: inline;
217
- float: left;
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;
248
- }
249
-
250
- .grid-prefix-1 {
251
- padding-left: 40px;
252
- }
253
-
254
- .grid-prefix-2 {
255
- padding-left: 80px;
256
- }
257
-
258
- .grid-prefix-3 {
259
- padding-left: 120px;
260
- }
261
-
262
- .grid-prefix-4 {
263
- padding-left: 160px;
264
- }
265
-
266
- .grid-prefix-5 {
267
- padding-left: 200px;
268
- }
269
-
270
- .grid-prefix-6 {
271
- padding-left: 240px;
272
- }
273
-
274
- .grid-prefix-7 {
275
- padding-left: 280px;
276
- }
277
-
278
- .grid-prefix-8 {
279
- padding-left: 320px;
280
- }
281
-
282
- .grid-prefix-9 {
283
- padding-left: 360px;
284
- }
285
-
286
- .grid-prefix-10 {
287
- padding-left: 400px;
288
- }
289
-
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 {
335
- padding-left: 880px;
336
- }
337
-
338
- .grid-prefix-23 {
339
- padding-left: 920px;
340
- }
341
-
342
- .grid-suffix-1, #page #content {
343
- padding-right: 40px;
344
- }
345
-
346
- .grid-suffix-2, #header h1 {
347
- padding-right: 80px;
348
- }
349
-
350
- .grid-suffix-3 {
351
- padding-right: 120px;
352
- }
353
-
354
- .grid-suffix-4 {
355
- padding-right: 160px;
356
- }
357
-
358
- .grid-suffix-5 {
359
- padding-right: 200px;
360
- }
361
-
362
- .grid-suffix-6 {
363
- padding-right: 240px;
364
- }
365
-
366
- .grid-suffix-7 {
367
- padding-right: 280px;
368
- }
369
-
370
- .grid-suffix-8 {
371
- padding-right: 320px;
372
- }
373
-
374
- .grid-suffix-9 {
375
- padding-right: 360px;
376
- }
377
-
378
- .grid-suffix-10 {
379
- padding-right: 400px;
380
- }
381
-
382
- .grid-suffix-11 {
383
- padding-right: 440px;
384
- }
385
-
386
- .grid-suffix-12 {
387
- padding-right: 480px;
388
- }
389
-
390
- .grid-suffix-13 {
391
- padding-right: 520px;
392
- }
393
-
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;
428
- }
429
-
430
- .grid-suffix-23 {
431
- padding-right: 920px;
432
- }
@@ -1,26 +0,0 @@
1
- // Configure grid coordinates
2
- $grid-columns: 24
3
- $grid-width: 30px
4
- $grid-gutter-width: 10px
5
-
6
- @import grid-coordinates
7
-
8
- +grid-coordinates
9
-
10
- #header, #page, #footer
11
- @extend .grid-container
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