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