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.
- data/README.md +26 -9
- data/lib/gridation/version.rb +1 -1
- data/stylesheets/_gridation.sass +16 -24
- data/stylesheets/gridation/_base.sass +1 -4
- data/stylesheets/gridation/_block.sass +21 -0
- data/stylesheets/gridation/_column.sass +4 -5
- data/stylesheets/gridation/_container.sass +18 -9
- data/stylesheets/gridation/_debug.sass +15 -1
- data/stylesheets/gridation/_fill.sass +1 -1
- data/stylesheets/gridation/_grid.sass +30 -10
- data/stylesheets/gridation/_margin.sass +102 -0
- data/stylesheets/gridation/_push.sass +16 -2
- data/stylesheets/gridation/_row.sass +4 -3
- data/stylesheets/gridation/_slide.sass +76 -0
- data/stylesheets/gridation/_stack.sass +4 -0
- data/stylesheets/gridation/_symmetric.sass +28 -0
- data/stylesheets/gridation/_utilities.sass +8 -0
- data/stylesheets/gridation/utilities/_border-box.sass +22 -0
- data/stylesheets/gridation/utilities/_common.sass +19 -0
- data/stylesheets/gridation/utilities/_opacity.sass +10 -0
- data/templates/1080.psd +0 -0
- metadata +11 -10
- data/stylesheets/gridation/_border.sass +0 -22
- data/stylesheets/gridation/_equal.sass +0 -54
- data/stylesheets/gridation/_helper.sass +0 -57
- data/stylesheets/gridation/_mixins.sass +0 -14
- 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://
|
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/
|
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
data/stylesheets/_gridation.sass
CHANGED
@@ -1,45 +1,37 @@
|
|
1
|
-
@import compass
|
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-
|
34
|
-
@include gridation-
|
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-
|
38
|
-
@include gridation-
|
39
|
-
|
40
|
-
|
41
|
-
|
42
|
-
|
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
|
|
@@ -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
|
@@ -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)
|
@@ -2,14 +2,15 @@
|
|
2
2
|
@include gridation-column
|
3
3
|
@if $n == 0
|
4
4
|
display: none !important
|
5
|
-
@else
|
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
|
-
|
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
|
-
|
@@ -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
|
-
|
47
|
-
|
48
|
-
|
49
|
-
@for $i from 0 through $gridation-grid-rows
|
50
|
-
|
51
|
-
|
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)
|
@@ -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)
|
@@ -1,27 +1,47 @@
|
|
1
1
|
@mixin grid($background: false)
|
2
|
-
@include gridation-grid
|
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
|
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
|
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
|
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
|
@@ -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
|
@@ -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
|
@@ -2,14 +2,15 @@
|
|
2
2
|
@include gridation-row
|
3
3
|
@if $n == 0
|
4
4
|
display: none !important
|
5
|
-
@else
|
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
|
-
|
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
|
@@ -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)
|
@@ -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
|
+
|
@@ -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)
|
@@ -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/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
|
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-
|
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/
|
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/
|
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.
|
89
|
+
rubygems_version: 1.8.12
|
89
90
|
signing_key:
|
90
91
|
specification_version: 3
|
91
92
|
summary: Sass based grid framework.
|
@@ -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)
|
@@ -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
|
-
|
@@ -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
|
@@ -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
|
-
|