gridation 0.0.4 → 0.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 (27) hide show
  1. data/README.md +26 -9
  2. data/lib/gridation/version.rb +1 -1
  3. data/stylesheets/_gridation.sass +16 -24
  4. data/stylesheets/gridation/_base.sass +1 -4
  5. data/stylesheets/gridation/_block.sass +21 -0
  6. data/stylesheets/gridation/_column.sass +4 -5
  7. data/stylesheets/gridation/_container.sass +18 -9
  8. data/stylesheets/gridation/_debug.sass +15 -1
  9. data/stylesheets/gridation/_fill.sass +1 -1
  10. data/stylesheets/gridation/_grid.sass +30 -10
  11. data/stylesheets/gridation/_margin.sass +102 -0
  12. data/stylesheets/gridation/_push.sass +16 -2
  13. data/stylesheets/gridation/_row.sass +4 -3
  14. data/stylesheets/gridation/_slide.sass +76 -0
  15. data/stylesheets/gridation/_stack.sass +4 -0
  16. data/stylesheets/gridation/_symmetric.sass +28 -0
  17. data/stylesheets/gridation/_utilities.sass +8 -0
  18. data/stylesheets/gridation/utilities/_border-box.sass +22 -0
  19. data/stylesheets/gridation/utilities/_common.sass +19 -0
  20. data/stylesheets/gridation/utilities/_opacity.sass +10 -0
  21. data/templates/1080.psd +0 -0
  22. metadata +11 -10
  23. data/stylesheets/gridation/_border.sass +0 -22
  24. data/stylesheets/gridation/_equal.sass +0 -54
  25. data/stylesheets/gridation/_helper.sass +0 -57
  26. data/stylesheets/gridation/_mixins.sass +0 -14
  27. data/stylesheets/gridation/mixins/_helper.sass +0 -8
data/README.md CHANGED
@@ -1,42 +1,58 @@
1
1
  # Gridation
2
2
 
3
- [Gridation][gridation] is a full featured [Sass](http://http://sass-lang.com/) based grid framework built on top of [Compass](http://compass-style.org/).
3
+ [Gridation][gridation] is a full featured [Sass](http://sass-lang.com/) based grid framework built on top of [Compass](http://compass-style.org/).
4
4
 
5
5
  ## Installation
6
6
 
7
7
  ### Rails 3
8
8
  For automatic installation edit your [Gemfile][gemfile]:
9
+
9
10
  gem 'gridation'
10
11
 
11
12
  Now run [Bundler](http://gembundler.com/):
13
+
12
14
  $ bundle install
13
15
 
14
- Add this to a file included in your load path (e.g. `config/enviroment.rb` or `config/initializers/compass.rb`):
16
+ Add this to a file included in your load path (e.g. `config/enviroment.rb` or `config/initializers/gridation.rb`):
17
+
15
18
  require 'gridation'
16
19
 
17
20
  Add this to load Gridation from your existing Sass file (e.g. `app/stylesheets/screen.sass`):
21
+
18
22
  @import gridation
19
23
  @include gridation
20
- @include gridation-classes // Optional
21
24
 
22
25
  ### Manual Installation
23
26
 
24
27
  From the command line:
28
+
25
29
  $ gem install gridation
26
30
 
31
+
32
+
33
+ ## Helpful Links
34
+
35
+ * Go to the [Homepage][gridation]
36
+ * Find answers on the [Wiki][wiki]
37
+ * Report [Issues][issues]
38
+ * Gridation on [RubyGems](https://rubygems.org/gems/gridation)
39
+
40
+ ## TODO
41
+ * Add common grid sizes (Blueprint clone, gs960 clone, etc.)
42
+ * Mobile support
43
+
44
+
27
45
  ## Author
28
46
  [Gridation][gridation] was written by [David Singer][david].
29
47
 
30
48
  [David][david] is the lead web developer at [Ramaboo](http://ramaboo.com/).
31
49
 
32
50
  ## Credits
33
- Based on the [960 Grid System](http://960.gs/).
34
-
35
- Based on the [Variable Grid System](http://www.spry-soft.com/grids).
51
+ Based on the [960 Grid System](http://960.gs/) and the [Variable Grid System](http://www.spry-soft.com/grids).
36
52
 
37
- Inspired by [Blueprint](http://www.blueprintcss.org/).
53
+ Inspired by the design of [Blueprint](http://www.blueprintcss.org/).
38
54
 
39
- Built with [Compass](http://compass-style.org/).
55
+ Built with [Compass](http://compass-style.org/) and [Sass](http://sass-lang.com/).
40
56
 
41
57
 
42
58
  A special thanks to [Christopher Eppstein](http://chriseppstein.github.com/) and the
@@ -47,7 +63,8 @@ Copyright 2009 - 2011 [David Singer][david].
47
63
 
48
64
  [Gridation][gridation] is released under the [MIT License][license].
49
65
 
50
-
66
+ [issues]: https://github.com/ramaboo/gridation/issues
67
+ [wiki]: https://github.com/ramaboo/gridation/wiki
51
68
  [gridation]: http://gridation.com/
52
69
  [david]: http://ramaboo.com/david
53
70
  [license]: https://github.com/ramaboo/gridation/blob/master/LICENSE
data/lib/gridation/version.rb CHANGED
@@ -1,3 +1,3 @@
1
1
  module Gridation
2
- VERSION = '0.0.4'
2
+ VERSION = '0.1.0'
3
3
  end
data/stylesheets/_gridation.sass CHANGED
@@ -1,45 +1,37 @@
1
- @import compass/reset
2
- @import compass/utilities
3
-
1
+ @import compass
4
2
  @import gridation/base
5
- @import gridation/mixins
6
-
7
3
 
4
+ @import gridation/utilities
8
5
  @import gridation/debug
9
6
  @import gridation/grid
7
+ @import gridation/margin
10
8
  @import gridation/container
11
9
  @import gridation/block
12
10
  @import gridation/column
13
11
  @import gridation/row
12
+ @import gridation/slide
14
13
  @import gridation/stack
15
-
16
14
  @import gridation/push
17
15
  @import gridation/fill
18
16
 
19
17
 
20
- @import gridation/border
21
-
22
- //@import gridation/equal
23
-
24
- @import gridation/helper
25
-
26
-
27
18
  @mixin gridation-classes
28
- @include gridation-debug-classes
29
- @include gridation-grid-classes
30
- @include gridation-container-classes
31
19
  @include gridation-block-classes
32
20
  @include gridation-column-classes
33
- @include gridation-row-classes
34
- @include gridation-stack-classes
21
+ @include gridation-container-classes
22
+ @include gridation-debug-classes
35
23
  @include gridation-fill-classes
24
+ @include gridation-grid-classes
25
+ @include gridation-margin-classes
36
26
  @include gridation-push-classes
37
- @include gridation-border-classes
38
- @include gridation-helper-classes
39
-
40
- @mixin gridation
41
- //@include gridation-column
42
- //@include gridation-row
27
+ @include gridation-row-classes
28
+ @include gridation-slide-classes
29
+ @include gridation-stack-classes
30
+
31
+ // FIX SYMMETRIC
32
+ @include gridation-utility-classes
33
+
43
34
 
44
35
 
36
+ @mixin gridation
45
37
 
data/stylesheets/gridation/_base.sass CHANGED
@@ -43,11 +43,8 @@ $gridation-grid-margin-left: $girdation-grid-margin !default
43
43
  // Path to images folder (no trailing slash)
44
44
  $gridation-images-path: '/images/gridation' !default
45
45
 
46
-
47
-
48
-
49
46
  // Border width
50
- $gridation-border-width: 1px
47
+ $gridation-border-width: 1px !default
51
48
 
52
49
  // Border style
53
50
  $gridation-border-style: solid !default
data/stylesheets/gridation/_block.sass CHANGED
@@ -9,6 +9,14 @@
9
9
  @if $rows
10
10
  @include gridation-row-height($rows)
11
11
 
12
+
13
+ @mixin column-block($n)
14
+ @include block($n, false)
15
+
16
+ @mixin row-block($n)
17
+ @include block(false, $n)
18
+
19
+
12
20
  @mixin gridation-block-base
13
21
  @include gridation-grid-base
14
22
 
@@ -23,7 +31,20 @@
23
31
  @mixin gridation-block-classes
24
32
  .block
25
33
  @include block
34
+
35
+ @for $i from 0 through $gridation-grid-columns
36
+ .block-#{$i}
37
+ @include block($i)
38
+
26
39
  @for $i from 0 through $gridation-grid-rows
27
40
  @for $j from 0 through $gridation-grid-columns
28
41
  .block-#{$j}-#{$i}
29
42
  @include block($j, $i)
43
+
44
+ // @for $i from 0 through $gridation-grid-columns
45
+ // .column-block-#{$i}
46
+ // @include column-block($i)
47
+ //
48
+ // @for $i from 0 through $gridation-grid-rows
49
+ // .row-block-#{$i}
50
+ // @include row-block($i)
data/stylesheets/gridation/_column.sass CHANGED
@@ -2,14 +2,15 @@
2
2
  @include gridation-column
3
3
  @if $n == 0
4
4
  display: none !important
5
- @else if $n
5
+ @else
6
6
  @include gridation-column-width($n)
7
7
 
8
8
  @mixin gridation-column-base
9
9
  @include gridation-grid-base
10
10
 
11
- @mixin gridation-column-width($n)
12
- width: ($gridation-column-width * $n) + (($n - 1) * $gridation-column-gutter)
11
+ @mixin gridation-column-width($n: false)
12
+ @if $n
13
+ width: ($gridation-column-width * $n) + (($n - 1) * $gridation-column-gutter)
13
14
 
14
15
  @mixin gridation-column-margins
15
16
  margin-right: $gridation-grid-margin-right
@@ -25,5 +26,3 @@
25
26
  @for $i from 0 through $gridation-grid-columns
26
27
  .column-#{$i}
27
28
  @include column($i)
28
-
29
-
data/stylesheets/gridation/_container.sass CHANGED
@@ -16,10 +16,14 @@
16
16
  @include container(false, $n)
17
17
 
18
18
  @mixin global-container($columns: false, $rows: false)
19
- margin: 0 auto
20
- @include clearfix
21
19
  @include container($columns, $rows)
20
+ @include clearfix
22
21
 
22
+ @mixin global-container-center($columns: false, $rows: false)
23
+ @include global-container($columns, $rows)
24
+ margin: 0 auto
25
+ display: block
26
+ float: none
23
27
 
24
28
  @mixin gridation-container-base
25
29
  @include gridation-grid-base
@@ -37,15 +41,20 @@
37
41
  @mixin gridation-container-classes
38
42
  .container
39
43
  @include container
44
+
45
+ @for $i from 0 through $gridation-grid-columns
46
+ .container-#{$i}
47
+ @include container($i)
48
+
40
49
  @for $i from 0 through $gridation-grid-rows
41
50
  @for $j from 0 through $gridation-grid-columns
42
51
  .container-#{$j}-#{$i}
43
52
  @include container($j, $i)
44
53
 
45
- @for $i from 0 through $gridation-grid-columns
46
- .column-container-#{$i}
47
- @include column-container($i)
48
-
49
- @for $i from 0 through $gridation-grid-rows
50
- .row-container-#{$i}
51
- @include row-container($i)
54
+ // @for $i from 0 through $gridation-grid-columns
55
+ // .column-container-#{$i}
56
+ // @include column-container($i)
57
+ //
58
+ // @for $i from 0 through $gridation-grid-rows
59
+ // .row-container-#{$i}
60
+ // @include row-container($i)
data/stylesheets/gridation/_debug.sass CHANGED
@@ -1,6 +1,9 @@
1
1
  @mixin debug($n: false, $saturation: 100, $lightness: 50)
2
2
  @include gridation-debug-background-color($n, $saturation, $lightness)
3
3
 
4
+ @mixin debug-block($n: false)
5
+ @include gridation-debug-background-color($n, 75, 50)
6
+
4
7
  @mixin debug-container($n: false)
5
8
  @include gridation-debug-background-color($n, 100, 75)
6
9
 
@@ -36,6 +39,12 @@
36
39
  .debug-#{$i}
37
40
  @include debug($i)
38
41
 
42
+ .debug-block
43
+ @include debug-block
44
+ @for $i from 0 through $gridation-debug-colors
45
+ .debug-block-#{$i}
46
+ @include debug-block($i)
47
+
39
48
  .debug-container
40
49
  @include debug-container
41
50
  @for $i from 0 through $gridation-debug-colors
@@ -66,4 +75,9 @@
66
75
  @include debug-color(green)
67
76
  .debug-blue
68
77
  @include debug-color(blue)
69
-
78
+ .debug-magenta
79
+ @include debug-color(magenta)
80
+ .debug-cyan
81
+ @include debug-color(cyan)
82
+ .debug-yellow
83
+ @include debug-color(yellow)
data/stylesheets/gridation/_fill.sass CHANGED
@@ -25,7 +25,7 @@
25
25
  @include fill(false, false, false, $n)
26
26
 
27
27
  @mixin gridation-fill-base
28
-
28
+ // Empty
29
29
 
30
30
  @mixin gridation-fill
31
31
  @include gridation-fill-base
data/stylesheets/gridation/_grid.sass CHANGED
@@ -1,27 +1,47 @@
1
1
  @mixin grid($background: false)
2
- @include gridation-grid($background)
2
+ @include gridation-grid
3
3
  width: $gridation-grid-width
4
4
  height: $gridation-grid-height
5
+ @if $background
6
+ @include grid-background
5
7
 
6
8
  @mixin column-grid($background: false)
7
- @include gridation-grid($background)
9
+ @include gridation-grid
8
10
  width: $gridation-grid-width
11
+ @if $background
12
+ @include column-grid-background
9
13
 
10
14
  @mixin row-grid($background: false)
11
- @include gridation-grid($background)
15
+ @include gridation-grid
12
16
  height: $gridation-grid-height
13
-
14
-
15
- @mixin gridation-grid($background: false)
16
- @include gridation-grid-base
17
17
  @if $background
18
- @include background-grid
18
+ @include row-grid-background
19
19
 
20
20
  @mixin gridation-grid-base
21
21
  position: relative
22
22
  @include float-left
23
-
24
23
 
24
+ @mixin gridation-grid
25
+ @include gridation-grid-base
26
+
27
+ @mixin grid-background($path: $gridation-images-path)
28
+ background-image: url(#{$gridation-images-path}/backgrounds/grid.png)
29
+
30
+ @mixin column-grid-background($path: $gridation-images-path)
31
+ background-image: url(#{$gridation-images-path}/backgrounds/column-grid.png)
32
+
33
+ @mixin row-grid-background($path: $gridation-images-path)
34
+ background-image: url(#{$gridation-images-path}/backgrounds/row-grid.png)
35
+
25
36
  @mixin gridation-grid-classes
26
37
  .grid
27
- @include grid
38
+ @include grid
39
+
40
+ .grid-background
41
+ @include grid-background
42
+
43
+ .column-grid-background
44
+ @include column-grid-background
45
+
46
+ .row-grid-background
47
+ @include row-grid-background
data/stylesheets/gridation/_margin.sass ADDED
@@ -0,0 +1,102 @@
1
+ @mixin no-margin
2
+ margin: 0
3
+
4
+ @mixin no-margin-top
5
+ margin-top: 0
6
+
7
+ @mixin no-margin-top-bottom
8
+ margin-top: 0
9
+ margin-bottom: 0
10
+
11
+ @mixin no-margin-top-left
12
+ margin-top: 0
13
+ margin-left: 0
14
+
15
+ @mixin no-margin-top-right
16
+ margin-top: 0
17
+ margin-right: 0
18
+
19
+ @mixin no-margin-right
20
+ margin-right: 0
21
+
22
+ @mixin no-margin-bottom
23
+ margin-bottom: 0
24
+
25
+ @mixin no-margin-bottom-left
26
+ margin-bottom: 0
27
+ margin-left: 0
28
+
29
+ @mixin no-margin-bottom-right
30
+ margin-bottom: 0
31
+ margin-right: 0
32
+
33
+ @mixin no-margin-left
34
+ margin-left: 0
35
+
36
+ @mixin no-margin-left-right
37
+ margin-left: 0
38
+ @margin-right: 0
39
+
40
+
41
+
42
+ @mixin margin
43
+ @mixin margin-top
44
+ @mixin margin-top-bottom
45
+ @mixin margin-top-left
46
+ @mixin margin-top-right
47
+ @mixin margin-right
48
+ @mixin margin-bottom
49
+ @mixin margin-bottom-left
50
+ @mixin margin-bottom-right
51
+ @mixin margin-left
52
+ @mixin margin-left-right
53
+
54
+
55
+
56
+
57
+
58
+ @mixin gridation-margin-classes
59
+ .margin
60
+ @include no-margin
61
+
62
+ .no-margin-top
63
+ @include no-margin-top
64
+
65
+ .no-margin-top-bottom
66
+ @include no-margin-top-bottom
67
+
68
+ .no-margin-top-left
69
+ @include no-margin-top-left
70
+
71
+ .no-margin-top-right
72
+ @include no-margin-top-right
73
+
74
+ .no-margin-right
75
+ @include no-margin-right
76
+
77
+ .no-margin-bottom
78
+ @include no-margin-bottom
79
+
80
+ .no-margin-bottom-left
81
+ @include no-margin-bottom-left
82
+
83
+ .no-margin-bottom-right
84
+ @include no-margin-bottom-right
85
+
86
+ .no-margin-left
87
+ @include no-margin-left
88
+
89
+ .no-margin-left-right
90
+ @include no-margin-left-right
91
+
92
+ .margin
93
+ .margin-top
94
+ .margin-top-bottom
95
+ .margin-top-left
96
+ .margin-top-right
97
+ .margin-right
98
+ .margin-bottom
99
+ .margin-bottom-left
100
+ .margin-bottom-right
101
+ .margin-left
102
+ .margin-left-right
data/stylesheets/gridation/_push.sass CHANGED
@@ -14,13 +14,19 @@
14
14
  @if $left
15
15
  left: (($left * $gridation-column-width) + ($left * $gridation-column-gutter)) * - 1
16
16
 
17
-
17
+
18
+ @mixin push-up($n: 1)
19
+ @include push-top($n)
20
+
18
21
  @mixin push-top($n: 1)
19
22
  @include push($n)
20
23
 
21
24
  @mixin push-right($n: 1)
22
25
  @include push(false, $n)
23
26
 
27
+ @mixin push-down($n: 1)
28
+ @include push-bottom($n)
29
+
24
30
  @mixin push-bottom($n: 1)
25
31
  @include push(false, false, $n)
26
32
 
@@ -29,7 +35,7 @@
29
35
 
30
36
 
31
37
  @mixin gridation-push-base
32
-
38
+ // Empty
33
39
 
34
40
  @mixin gridation-push
35
41
  @include gridation-push-base
@@ -40,9 +46,13 @@
40
46
 
41
47
  .push-top
42
48
  @include push-top
49
+ .push-up
50
+ @include push-up
43
51
  @for $i from 0 through $gridation-grid-rows
44
52
  .push-top-#{$i}
45
53
  @include push-top($i)
54
+ .push-up-#{$i}
55
+ @include push-up($i)
46
56
 
47
57
  .push-right
48
58
  @include push-right
@@ -52,9 +62,13 @@
52
62
 
53
63
  .push-bottom
54
64
  @include push-bottom
65
+ .push-down
66
+ @include push-down
55
67
  @for $i from 0 through $gridation-grid-rows
56
68
  .push-bottom-#{$i}
57
69
  @include push-bottom($i)
70
+ .push-down-#{$i}
71
+ @include push-down($i)
58
72
 
59
73
  .push-left
60
74
  @include push-left
data/stylesheets/gridation/_row.sass CHANGED
@@ -2,14 +2,15 @@
2
2
  @include gridation-row
3
3
  @if $n == 0
4
4
  display: none !important
5
- @else if $n
5
+ @else
6
6
  @include gridation-row-height($n)
7
7
 
8
8
  @mixin gridation-row-base
9
9
  @include gridation-grid-base
10
10
 
11
- @mixin gridation-row-height($n)
12
- height: ($gridation-row-height * $n) + (($n - 1) * $gridation-row-gutter)
11
+ @mixin gridation-row-height($n: false)
12
+ @if $n
13
+ height: ($gridation-row-height * $n) + (($n - 1) * $gridation-row-gutter)
13
14
 
14
15
  @mixin gridation-row-margins
15
16
  margin-top: $gridation-grid-margin-top
data/stylesheets/gridation/_slide.sass ADDED
@@ -0,0 +1,76 @@
1
+ @mixin slide($top: false, $right: false, $bottom: false, $left: false)
2
+ @include gridation-slide
3
+ display: block !important
4
+ position: relative
5
+ @if $top != 0 and $top != false
6
+ margin-top: (($top *( $gridation-row-height + $gridation-row-gutter)) - $gridation-grid-margin-top) * -1
7
+
8
+ @if $right != 0 and $right != false
9
+ margin-right: (($right *( $gridation-column-width + $gridation-column-gutter)) - $gridation-grid-margin-right) * -1
10
+
11
+ @if $bottom != 0 and $bottom != false
12
+ margin-bottom: (($bottom *( $gridation-row-height + $gridation-row-gutter)) - $gridation-grid-margin-bottom) * -1
13
+
14
+ @if $left != 0 and $left != false
15
+ margin-left: (($left *( $gridation-column-width + $gridation-column-gutter)) - $gridation-grid-margin-left) * -1
16
+
17
+ @mixin slide-up($n: 1)
18
+ @include slide-top($n)
19
+
20
+ @mixin slide-top($n: 1)
21
+ @include slide($n)
22
+
23
+ @mixin slide-right($n: 1)
24
+ @include slide(false, $n)
25
+
26
+ @mixin slide-down($n: 1)
27
+ @include slide-bottom($n)
28
+
29
+ @mixin slide-bottom($n: 1)
30
+ @include slide(false, false, $n)
31
+
32
+ @mixin slide-left($n: 1)
33
+ @include slide(false, false, false, $n)
34
+
35
+
36
+ @mixin gridation-slide-base
37
+ // Empty
38
+
39
+ @mixin gridation-slide
40
+ @include gridation-slide-base
41
+
42
+ @mixin gridation-slide-classes
43
+ .slide
44
+ @include slide
45
+
46
+ .slide-top
47
+ @include slide-top
48
+ .slide-up
49
+ @include slide-up
50
+ @for $i from 0 through $gridation-grid-rows
51
+ .slide-top-#{$i}
52
+ @include slide-top($i)
53
+ .slide-up-#{$i}
54
+ @include slide-up($i)
55
+
56
+ .slide-right
57
+ @include slide-right
58
+ @for $i from 0 through $gridation-grid-columns
59
+ .slide-right-#{$i}
60
+ @include slide-right($i)
61
+
62
+ .slide-bottom
63
+ @include slide-bottom
64
+ .slide-down
65
+ @include slide-down
66
+ @for $i from 0 through $gridation-grid-rows
67
+ .slide-bottom-#{$i}
68
+ @include slide-bottom($i)
69
+ .slide-down-#{$i}
70
+ @include slide-down($i)
71
+
72
+ .slide-left
73
+ @include slide-left
74
+ @for $i from 0 through $gridation-grid-columns
75
+ .slide-left-#{$i}
76
+ @include slide-left($i)
data/stylesheets/gridation/_stack.sass CHANGED
@@ -8,7 +8,11 @@
8
8
  @mixin stack-reset($position: auto)
9
9
  @include stack(0, $position)
10
10
 
11
+ @mixin gridation-stack-base
12
+ // Empty
13
+
11
14
  @mixin gridation-stack($position: $gridation-stack-postion)
15
+ @include gridation-stack-base
12
16
  @if $position
13
17
  postion: $position
14
18
 
data/stylesheets/gridation/_symmetric.sass ADDED
@@ -0,0 +1,28 @@
1
+ @mixin symetric($columns: false, $rows: false)
2
+ @if $n == 0
3
+ display: none
4
+ @else
5
+
6
+ $width: (($gridation-columns / $n) * $gridation-column-width) + (($gridation-columns / $n - 1) * $gridation-column-gutter)
7
+
8
+ @if subpixel($width) and $gridation-debug
9
+ @debug "Subpixel rendering may occur on symmetric(#{$number})"
10
+
11
+ width: $width
12
+
13
+
14
+ @mixin gridation-symmetric-base
15
+ @include gridation-grid-base
16
+
17
+
18
+ @mixin gridation-symmetric
19
+
20
+ @mixin gridation-symmetric-classes
21
+ .symettric
22
+ @include symmetric
23
+ @for $i from 0 through $gridation-grid-columns
24
+ .symmetric-#{$i}
25
+ @include symmetric($i)
26
+
27
+
28
+
data/stylesheets/gridation/_utilities.sass ADDED
@@ -0,0 +1,8 @@
1
+ @import utilities/border-box
2
+ @import utilities/common
3
+ @import utilities/opacity
4
+
5
+ @mixin gridation-utility-classes
6
+ @include gridation-border-box-classes
7
+ @include gridation-common-classes
8
+ @include gridation-opacity-classes
data/stylesheets/gridation/utilities/_border-box.sass ADDED
@@ -0,0 +1,22 @@
1
+ @mixin border-box($width: $gridation-border-width, $style: $gridation-border-style, $color: $gridation-border-color)
2
+ @include gridation-border-box($width, $style, $color)
3
+
4
+ @mixin gridation-border-box-base
5
+ @include box-sizing(border-box)
6
+
7
+ @mixin gridation-border-box($width: $gridation-border-width, $style: $gridation-border-style, $color: $gridation-border-color)
8
+ @include gridation-border-box-base
9
+ @if $width == 0
10
+ border: none
11
+ @else
12
+ border:
13
+ width: $width
14
+ style: $style
15
+ color: $color
16
+
17
+ @mixin gridation-border-box-classes
18
+ .border-box
19
+ @include border-box
20
+ @for $i from 0 through $gridation-border-sizes
21
+ .border-box-#{$i}
22
+ @include border-box($gridation-border-width * $i)
data/stylesheets/gridation/utilities/_common.sass ADDED
@@ -0,0 +1,19 @@
1
+ @mixin hidden
2
+ display: none
3
+
4
+ @mixin clear($direction: both)
5
+ $direction: unquote($direction)
6
+ clear: $direction
7
+
8
+ @mixin gridation-common-classes
9
+ .nowrap
10
+ @include nowrap
11
+
12
+ .clearfix
13
+ @include clearfix
14
+
15
+ .hidden
16
+ @include hidden
17
+
18
+ .clear
19
+ @include clear
data/stylesheets/gridation/utilities/_opacity.sass ADDED
@@ -0,0 +1,10 @@
1
+ @mixin gridation-opacity-classes
2
+ @for $i from 0 through 10
3
+ .opacity-#{$i}
4
+ @include opacity($i / 10)
5
+
6
+ .transparent
7
+ @include transparent
8
+
9
+ .opaque
10
+ @include opaque
data/templates/1080.psd ADDED
Binary file
metadata CHANGED
@@ -2,7 +2,7 @@
2
2
  name: gridation
3
3
  version: !ruby/object:Gem::Version
4
4
  prerelease:
5
- version: 0.0.4
5
+ version: 0.1.0
6
6
  platform: ruby
7
7
  authors:
8
8
  - David Singer
@@ -10,8 +10,7 @@ autorequire:
10
10
  bindir: bin
11
11
  cert_chain: []
12
12
 
13
- date: 2011-02-27 00:00:00 -08:00
14
- default_executable:
13
+ date: 2011-12-05 00:00:00 Z
15
14
  dependencies:
16
15
  - !ruby/object:Gem::Dependency
17
16
  name: compass
@@ -46,22 +45,24 @@ files:
46
45
  - stylesheets/_gridation.sass
47
46
  - stylesheets/gridation/_base.sass
48
47
  - stylesheets/gridation/_block.sass
49
- - stylesheets/gridation/_border.sass
50
48
  - stylesheets/gridation/_column.sass
51
49
  - stylesheets/gridation/_container.sass
52
50
  - stylesheets/gridation/_debug.sass
53
- - stylesheets/gridation/_equal.sass
54
51
  - stylesheets/gridation/_fill.sass
55
52
  - stylesheets/gridation/_grid.sass
56
- - stylesheets/gridation/_helper.sass
57
- - stylesheets/gridation/_mixins.sass
53
+ - stylesheets/gridation/_margin.sass
58
54
  - stylesheets/gridation/_push.sass
59
55
  - stylesheets/gridation/_row.sass
56
+ - stylesheets/gridation/_slide.sass
60
57
  - stylesheets/gridation/_stack.sass
61
- - stylesheets/gridation/mixins/_helper.sass
58
+ - stylesheets/gridation/_symmetric.sass
59
+ - stylesheets/gridation/_utilities.sass
60
+ - stylesheets/gridation/utilities/_border-box.sass
61
+ - stylesheets/gridation/utilities/_common.sass
62
+ - stylesheets/gridation/utilities/_opacity.sass
63
+ - templates/1080.psd
62
64
  - templates/project/manifest.rb
63
65
  - templates/project/screen.sass
64
- has_rdoc: true
65
66
  homepage: http://gridation.com
66
67
  licenses: []
67
68
 
@@ -85,7 +86,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
85
86
  requirements: []
86
87
 
87
88
  rubyforge_project: gridation
88
- rubygems_version: 1.5.3
89
+ rubygems_version: 1.8.12
89
90
  signing_key:
90
91
  specification_version: 3
91
92
  summary: Sass based grid framework.
data/stylesheets/gridation/_border.sass DELETED
@@ -1,22 +0,0 @@
1
- @mixin border($width: $gridation-border-width, $style: $gridation-border-style, $color: $gridation-border-color)
2
- @include gridation-border($width, $style, $color)
3
-
4
- @mixin gridation-border-base
5
- @include box-sizing(border-box)
6
-
7
- @mixin gridation-border($width: $gridation-border-width, $style: $gridation-border-style, $color: $gridation-border-color)
8
- @include gridation-border-base
9
- @if $width == 0
10
- border: none
11
- @else
12
- border:
13
- width: $width
14
- style: $style
15
- color: $color
16
-
17
- @mixin gridation-border-classes
18
- .border
19
- @include border
20
- @for $i from 0 through $gridation-border-sizes
21
- .border-#{$i}
22
- @include border($gridation-border-width * $i)
data/stylesheets/gridation/_equal.sass DELETED
@@ -1,54 +0,0 @@
1
- @mixin equal($number, $padding-left: false, $padding-right: false, $border-left: false, $border-right: false, $debug: false)
2
- @extend .equal
3
- @if $number == 0
4
- display: none
5
- @else
6
- $width: (($gridation-columns / $number) * $gridation-column-width) + (($gridation-columns / $number - 1) * $gridation-column-gutter)
7
-
8
- @if $padding-left
9
- padding-left: $padding-left
10
- $width: $width - $padding-left
11
-
12
- @if $padding-right
13
- padding-right: $padding-right
14
- $width: $width - $padding-right
15
-
16
- @if $border-left
17
- border-left-width: $border-left
18
- border-style: solid
19
- $width: $width - $border-left
20
-
21
- @if $border-right
22
- border-right-width: $border-right
23
- border-style: solid
24
- $width: $width - $border-right
25
-
26
- @if subpixel($width) and $gridation-debug
27
- @debug "Subpixel rendering may occur on .equal-#{$number}"
28
-
29
- width: $width
30
- @if $gridation-debug or $debug
31
- @include gridation-equal-debug-background-color($number)
32
-
33
- @mixin equal-border($number, $border-left: false, $border-right: false)
34
- @include equal($number, false, false, $border-left, $border-right)
35
-
36
- @mixin equal-padding($number, $padding-left: false, $padding-right: false)
37
- @include equal($number, $padding-left, $padding-right)
38
-
39
- @mixin equal-debug($number, $padding-left: false, $padding-right: false, $border-left: false, $border-right: false)
40
- @include equal($number, $padding-left, $padding-right, $border-left, $border-right, true)
41
-
42
- @mixin gridation-equal
43
- .equal
44
- @extend .grid
45
-
46
- @mixin gridation-equal-classes
47
- @for $i from 0 through $gridation-grid-columns
48
- .equal-#{$i}
49
- @include equal($i)
50
- &.debug
51
- @include gridation-equal-debug-background-color($i)
52
-
53
-
54
-
data/stylesheets/gridation/_helper.sass DELETED
@@ -1,57 +0,0 @@
1
- // Helper classes used by Gridation
2
- @mixin gridation-helper-classes
3
- .clear
4
- clear: both
5
-
6
- .clear-right
7
- clear: right
8
-
9
- .clear-left
10
- clear: left
11
-
12
- .uppercase
13
- text-transform: uppercase
14
-
15
- .lowercase
16
- text-transform: lowercase
17
-
18
- .capitalize
19
- text-transform: capitalize
20
-
21
- .nowrap
22
- @include nowrap
23
-
24
- .clearfix
25
- @include clearfix
26
-
27
- .hidden
28
- display: none
29
-
30
- .font-bold
31
- font-style: bold
32
-
33
- .font-normal
34
- font-style: normal
35
- font-weight: normal
36
- font-variant: normal
37
-
38
- .font-italic
39
- font-style: italic
40
-
41
- .font-oblique
42
- font-style: oblique
43
-
44
- .font-bold
45
- font-weight: bold
46
-
47
- .font-small-caps
48
- font-variant: small-caps
49
-
50
- .text-indent
51
- @include text-indent
52
-
53
- .text-indent-left
54
- @include text-indent-left
55
-
56
- .text-indent-right
57
- @include text-indent-right
data/stylesheets/gridation/_mixins.sass DELETED
@@ -1,14 +0,0 @@
1
- // Put all generic mixins here; this file is included directly after _base.sass
2
- @import mixins/helper
3
-
4
- @mixin background-grid($path: $gridation-images-path)
5
- background-image: url(#{$gridation-images-path}/grid/block.png)
6
-
7
- @mixin background-column-grid($path: $gridation-images-path)
8
- background-image: url(#{$gridation-images-path}/grid/column.png)
9
-
10
- @mixin background-row-grid($path: $gridation-images-path)
11
- background-image: url(#{$gridation-images-path}/grid/row.png)
12
-
13
-
14
-
data/stylesheets/gridation/mixins/_helper.sass DELETED
@@ -1,8 +0,0 @@
1
- @mixin text-indent
2
- @include text-indent-left
3
-
4
- @mixin text-indent-left
5
- text-indent: -99999px
6
-
7
- @mixin text-indent-right
8
- text-indent: 99999px