grid-coordinates 1.1.1 → 1.1.2

Sign up to get free protection for your applications and to get access to all the features.
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