gridation 0.0.4
Sign up to get free protection for your applications and to get access to all the features.
- data/.gitignore +5 -0
- data/Gemfile +4 -0
- data/LICENSE +20 -0
- data/README.md +55 -0
- data/Rakefile +2 -0
- data/gridation.gemspec +22 -0
- data/lib/gridation/sass_extensions.rb +6 -0
- data/lib/gridation/version.rb +3 -0
- data/lib/gridation.rb +7 -0
- data/stylesheets/_gridation.sass +45 -0
- data/stylesheets/gridation/_base.sass +72 -0
- data/stylesheets/gridation/_block.sass +29 -0
- data/stylesheets/gridation/_border.sass +22 -0
- data/stylesheets/gridation/_column.sass +29 -0
- data/stylesheets/gridation/_container.sass +51 -0
- data/stylesheets/gridation/_debug.sass +69 -0
- data/stylesheets/gridation/_equal.sass +54 -0
- data/stylesheets/gridation/_fill.sass +61 -0
- data/stylesheets/gridation/_grid.sass +27 -0
- data/stylesheets/gridation/_helper.sass +57 -0
- data/stylesheets/gridation/_mixins.sass +14 -0
- data/stylesheets/gridation/_push.sass +63 -0
- data/stylesheets/gridation/_row.sass +27 -0
- data/stylesheets/gridation/_stack.sass +20 -0
- data/stylesheets/gridation/mixins/_helper.sass +8 -0
- data/templates/project/manifest.rb +1 -0
- data/templates/project/screen.sass +0 -0
- metadata +93 -0
data/Gemfile
ADDED
data/LICENSE
ADDED
@@ -0,0 +1,20 @@
|
|
1
|
+
Copyright (c) 2009-2011 David Singer
|
2
|
+
|
3
|
+
Permission is hereby granted, free of charge, to any person obtaining
|
4
|
+
a copy of this software and associated documentation files (the
|
5
|
+
"Software"), to deal in the Software without restriction, including
|
6
|
+
without limitation the rights to use, copy, modify, merge, publish,
|
7
|
+
distribute, sublicense, and/or sell copies of the Software, and to
|
8
|
+
permit persons to whom the Software is furnished to do so, subject to
|
9
|
+
the following conditions:
|
10
|
+
|
11
|
+
The above copyright notice and this permission notice shall be
|
12
|
+
included in all copies or substantial portions of the Software.
|
13
|
+
|
14
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
|
15
|
+
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
|
16
|
+
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
|
17
|
+
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
|
18
|
+
LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
|
19
|
+
OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
|
20
|
+
WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
data/README.md
ADDED
@@ -0,0 +1,55 @@
|
|
1
|
+
# Gridation
|
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/).
|
4
|
+
|
5
|
+
## Installation
|
6
|
+
|
7
|
+
### Rails 3
|
8
|
+
For automatic installation edit your [Gemfile][gemfile]:
|
9
|
+
gem 'gridation'
|
10
|
+
|
11
|
+
Now run [Bundler](http://gembundler.com/):
|
12
|
+
$ bundle install
|
13
|
+
|
14
|
+
Add this to a file included in your load path (e.g. `config/enviroment.rb` or `config/initializers/compass.rb`):
|
15
|
+
require 'gridation'
|
16
|
+
|
17
|
+
Add this to load Gridation from your existing Sass file (e.g. `app/stylesheets/screen.sass`):
|
18
|
+
@import gridation
|
19
|
+
@include gridation
|
20
|
+
@include gridation-classes // Optional
|
21
|
+
|
22
|
+
### Manual Installation
|
23
|
+
|
24
|
+
From the command line:
|
25
|
+
$ gem install gridation
|
26
|
+
|
27
|
+
## Author
|
28
|
+
[Gridation][gridation] was written by [David Singer][david].
|
29
|
+
|
30
|
+
[David][david] is the lead web developer at [Ramaboo](http://ramaboo.com/).
|
31
|
+
|
32
|
+
## 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).
|
36
|
+
|
37
|
+
Inspired by [Blueprint](http://www.blueprintcss.org/).
|
38
|
+
|
39
|
+
Built with [Compass](http://compass-style.org/).
|
40
|
+
|
41
|
+
|
42
|
+
A special thanks to [Christopher Eppstein](http://chriseppstein.github.com/) and the
|
43
|
+
Compass [contributors](https://github.com/chriseppstein/compass/contributors) for their hard work.
|
44
|
+
|
45
|
+
## License
|
46
|
+
Copyright 2009 - 2011 [David Singer][david].
|
47
|
+
|
48
|
+
[Gridation][gridation] is released under the [MIT License][license].
|
49
|
+
|
50
|
+
|
51
|
+
[gridation]: http://gridation.com/
|
52
|
+
[david]: http://ramaboo.com/david
|
53
|
+
[license]: https://github.com/ramaboo/gridation/blob/master/LICENSE
|
54
|
+
[gemfile]: http://gembundler.com/gemfile.html
|
55
|
+
[bundler]: http://gembundler.com/
|
data/Rakefile
ADDED
data/gridation.gemspec
ADDED
@@ -0,0 +1,22 @@
|
|
1
|
+
# -*- encoding: utf-8 -*-
|
2
|
+
$:.push File.expand_path('../lib', __FILE__)
|
3
|
+
require 'gridation/version'
|
4
|
+
|
5
|
+
Gem::Specification.new do |s|
|
6
|
+
s.name = 'gridation'
|
7
|
+
s.version = Gridation::VERSION
|
8
|
+
s.platform = Gem::Platform::RUBY
|
9
|
+
s.authors = ['David Singer']
|
10
|
+
s.email = ['david@ramaboo.com']
|
11
|
+
s.homepage = 'http://gridation.com'
|
12
|
+
s.summary = 'Sass based grid framework.'
|
13
|
+
s.description = 'Gridation is a full featured Sass based grid framework built on top of Compass.'
|
14
|
+
|
15
|
+
s.rubyforge_project = 'gridation'
|
16
|
+
|
17
|
+
s.files = `git ls-files`.split("\n")
|
18
|
+
s.test_files = `git ls-files -- {test,spec,features}/*`.split("\n")
|
19
|
+
s.executables = `git ls-files -- bin/*`.split("\n").map{ |f| File.basename(f) }
|
20
|
+
s.require_paths = ['lib']
|
21
|
+
s.add_dependency('compass')
|
22
|
+
end
|
data/lib/gridation.rb
ADDED
@@ -0,0 +1,45 @@
|
|
1
|
+
@import compass/reset
|
2
|
+
@import compass/utilities
|
3
|
+
|
4
|
+
@import gridation/base
|
5
|
+
@import gridation/mixins
|
6
|
+
|
7
|
+
|
8
|
+
@import gridation/debug
|
9
|
+
@import gridation/grid
|
10
|
+
@import gridation/container
|
11
|
+
@import gridation/block
|
12
|
+
@import gridation/column
|
13
|
+
@import gridation/row
|
14
|
+
@import gridation/stack
|
15
|
+
|
16
|
+
@import gridation/push
|
17
|
+
@import gridation/fill
|
18
|
+
|
19
|
+
|
20
|
+
@import gridation/border
|
21
|
+
|
22
|
+
//@import gridation/equal
|
23
|
+
|
24
|
+
@import gridation/helper
|
25
|
+
|
26
|
+
|
27
|
+
@mixin gridation-classes
|
28
|
+
@include gridation-debug-classes
|
29
|
+
@include gridation-grid-classes
|
30
|
+
@include gridation-container-classes
|
31
|
+
@include gridation-block-classes
|
32
|
+
@include gridation-column-classes
|
33
|
+
@include gridation-row-classes
|
34
|
+
@include gridation-stack-classes
|
35
|
+
@include gridation-fill-classes
|
36
|
+
@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
|
43
|
+
|
44
|
+
|
45
|
+
|
@@ -0,0 +1,72 @@
|
|
1
|
+
// Number of columns in the grid
|
2
|
+
$gridation-grid-columns: 24 !default
|
3
|
+
|
4
|
+
// Width of a column
|
5
|
+
$gridation-column-width: 25px !default
|
6
|
+
|
7
|
+
// Number of rows in the grid
|
8
|
+
$gridation-grid-rows: 24 !default
|
9
|
+
|
10
|
+
// Height of a row
|
11
|
+
$gridation-row-height: 25px !default
|
12
|
+
|
13
|
+
// Stack multiplier
|
14
|
+
$gridation-stack-multiplier: 10 !default
|
15
|
+
|
16
|
+
// Stack position approach
|
17
|
+
$gridation-stack-position-approach: relative !default
|
18
|
+
|
19
|
+
// Nynber if levels in the stack
|
20
|
+
$gridation-stack-levels: 10 !default
|
21
|
+
|
22
|
+
// Debug mode
|
23
|
+
$gridation-debug: false !default
|
24
|
+
|
25
|
+
// Number of debug colors
|
26
|
+
$gridation-debug-colors: 24 !default
|
27
|
+
|
28
|
+
// Default margin individual sides
|
29
|
+
$girdation-grid-margin: 10px !default
|
30
|
+
|
31
|
+
// Top margin of a grid
|
32
|
+
$gridation-grid-margin-top: $girdation-grid-margin !default
|
33
|
+
|
34
|
+
// Right margin of a grid
|
35
|
+
$gridation-grid-margin-right: $girdation-grid-margin !default
|
36
|
+
|
37
|
+
// Bottom margin of a gird
|
38
|
+
$gridation-grid-margin-bottom: $girdation-grid-margin !default
|
39
|
+
|
40
|
+
// Left margin of a grid
|
41
|
+
$gridation-grid-margin-left: $girdation-grid-margin !default
|
42
|
+
|
43
|
+
// Path to images folder (no trailing slash)
|
44
|
+
$gridation-images-path: '/images/gridation' !default
|
45
|
+
|
46
|
+
|
47
|
+
|
48
|
+
|
49
|
+
// Border width
|
50
|
+
$gridation-border-width: 1px
|
51
|
+
|
52
|
+
// Border style
|
53
|
+
$gridation-border-style: solid !default
|
54
|
+
|
55
|
+
// Border color
|
56
|
+
$gridation-border-color: #000000 !default
|
57
|
+
|
58
|
+
// Border sizes (default = 1px..10px)
|
59
|
+
$gridation-border-sizes: 10 !default
|
60
|
+
|
61
|
+
// Height of of the row gutter (space between row)
|
62
|
+
$gridation-row-gutter: $gridation-grid-margin-top + $gridation-grid-margin-bottom
|
63
|
+
|
64
|
+
// Width of the column gutter (space between columns)
|
65
|
+
$gridation-column-gutter: $gridation-grid-margin-left + $gridation-grid-margin-right
|
66
|
+
|
67
|
+
// Width of the grid (default = 1080px)
|
68
|
+
$gridation-grid-width: $gridation-grid-columns * ($gridation-column-width + $gridation-column-gutter)
|
69
|
+
|
70
|
+
// Height of the grid (default = 1080px)
|
71
|
+
$gridation-grid-height: $gridation-grid-rows * ($gridation-row-height + $gridation-row-gutter)
|
72
|
+
|
@@ -0,0 +1,29 @@
|
|
1
|
+
@mixin block($columns: false, $rows: false)
|
2
|
+
@include gridation-block
|
3
|
+
@if $columns == 0 or $rows == 0
|
4
|
+
display: none !important
|
5
|
+
|
6
|
+
@if $columns
|
7
|
+
@include gridation-column-width($columns)
|
8
|
+
|
9
|
+
@if $rows
|
10
|
+
@include gridation-row-height($rows)
|
11
|
+
|
12
|
+
@mixin gridation-block-base
|
13
|
+
@include gridation-grid-base
|
14
|
+
|
15
|
+
@mixin gridation-block-margins
|
16
|
+
@include gridation-column-margins
|
17
|
+
@include gridation-row-margins
|
18
|
+
|
19
|
+
@mixin gridation-block
|
20
|
+
@include gridation-block-base
|
21
|
+
@include gridation-block-margins
|
22
|
+
|
23
|
+
@mixin gridation-block-classes
|
24
|
+
.block
|
25
|
+
@include block
|
26
|
+
@for $i from 0 through $gridation-grid-rows
|
27
|
+
@for $j from 0 through $gridation-grid-columns
|
28
|
+
.block-#{$j}-#{$i}
|
29
|
+
@include block($j, $i)
|
@@ -0,0 +1,22 @@
|
|
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)
|
@@ -0,0 +1,29 @@
|
|
1
|
+
@mixin column($n: false)
|
2
|
+
@include gridation-column
|
3
|
+
@if $n == 0
|
4
|
+
display: none !important
|
5
|
+
@else if $n
|
6
|
+
@include gridation-column-width($n)
|
7
|
+
|
8
|
+
@mixin gridation-column-base
|
9
|
+
@include gridation-grid-base
|
10
|
+
|
11
|
+
@mixin gridation-column-width($n)
|
12
|
+
width: ($gridation-column-width * $n) + (($n - 1) * $gridation-column-gutter)
|
13
|
+
|
14
|
+
@mixin gridation-column-margins
|
15
|
+
margin-right: $gridation-grid-margin-right
|
16
|
+
margin-left: $gridation-grid-margin-left
|
17
|
+
|
18
|
+
@mixin gridation-column
|
19
|
+
@include gridation-column-base
|
20
|
+
@include gridation-column-margins
|
21
|
+
|
22
|
+
@mixin gridation-column-classes
|
23
|
+
.column
|
24
|
+
@include column
|
25
|
+
@for $i from 0 through $gridation-grid-columns
|
26
|
+
.column-#{$i}
|
27
|
+
@include column($i)
|
28
|
+
|
29
|
+
|
@@ -0,0 +1,51 @@
|
|
1
|
+
@mixin container($columns: false, $rows: false)
|
2
|
+
@include gridation-container
|
3
|
+
@if $columns == 0 or $rows == 0
|
4
|
+
display: none !important
|
5
|
+
|
6
|
+
@if $columns
|
7
|
+
@include gridation-container-width($columns)
|
8
|
+
|
9
|
+
@if $rows
|
10
|
+
@include gridation-container-height($rows)
|
11
|
+
|
12
|
+
@mixin column-container($n)
|
13
|
+
@include container($n, false)
|
14
|
+
|
15
|
+
@mixin row-container($n)
|
16
|
+
@include container(false, $n)
|
17
|
+
|
18
|
+
@mixin global-container($columns: false, $rows: false)
|
19
|
+
margin: 0 auto
|
20
|
+
@include clearfix
|
21
|
+
@include container($columns, $rows)
|
22
|
+
|
23
|
+
|
24
|
+
@mixin gridation-container-base
|
25
|
+
@include gridation-grid-base
|
26
|
+
|
27
|
+
@mixin gridation-container-width($n)
|
28
|
+
width: ($gridation-column-width + $gridation-column-gutter) * $n
|
29
|
+
|
30
|
+
@mixin gridation-container-height($n)
|
31
|
+
height: ($gridation-column-width + $gridation-column-gutter) * $n
|
32
|
+
|
33
|
+
@mixin gridation-container
|
34
|
+
@include gridation-container-base
|
35
|
+
margin: 0
|
36
|
+
|
37
|
+
@mixin gridation-container-classes
|
38
|
+
.container
|
39
|
+
@include container
|
40
|
+
@for $i from 0 through $gridation-grid-rows
|
41
|
+
@for $j from 0 through $gridation-grid-columns
|
42
|
+
.container-#{$j}-#{$i}
|
43
|
+
@include container($j, $i)
|
44
|
+
|
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)
|
@@ -0,0 +1,69 @@
|
|
1
|
+
@mixin debug($n: false, $saturation: 100, $lightness: 50)
|
2
|
+
@include gridation-debug-background-color($n, $saturation, $lightness)
|
3
|
+
|
4
|
+
@mixin debug-container($n: false)
|
5
|
+
@include gridation-debug-background-color($n, 100, 75)
|
6
|
+
|
7
|
+
@mixin debug-symmetric($n: false)
|
8
|
+
@include gridation-debug-background-color($n, 100, 25)
|
9
|
+
|
10
|
+
@mixin debug-stack($n: false)
|
11
|
+
@include gridation-debug-stack-background-color($n)
|
12
|
+
|
13
|
+
@mixin debug-color($color: red)
|
14
|
+
background-color: $color
|
15
|
+
|
16
|
+
@mixin gridation-debug-background-color($n: false, $saturation: 100, $lightness: 50)
|
17
|
+
@if $n == 0
|
18
|
+
background-color: #ffffff
|
19
|
+
@else if $n
|
20
|
+
background-color: hsl((360 / $gridation-debug-colors * ($n - 1)), $saturation, $lightness)
|
21
|
+
@else
|
22
|
+
background-color: hsl(0, $saturation, $lightness)
|
23
|
+
|
24
|
+
@mixin gridation-debug-stack-background-color($n)
|
25
|
+
@if $n == 0
|
26
|
+
background-color: #ffffff
|
27
|
+
@else if $n
|
28
|
+
background-color: hsl(0, 0, ((100 / $gridation-stack-levels) * ($n - 1)))
|
29
|
+
@else
|
30
|
+
background-color: hsl(0, 0, 0)
|
31
|
+
|
32
|
+
@mixin gridation-debug-classes
|
33
|
+
.debug
|
34
|
+
@include debug
|
35
|
+
@for $i from 0 through $gridation-debug-colors
|
36
|
+
.debug-#{$i}
|
37
|
+
@include debug($i)
|
38
|
+
|
39
|
+
.debug-container
|
40
|
+
@include debug-container
|
41
|
+
@for $i from 0 through $gridation-debug-colors
|
42
|
+
.debug-container-#{$i}
|
43
|
+
@include debug-container($i)
|
44
|
+
|
45
|
+
.debug-symmetric
|
46
|
+
@include debug-symmetric
|
47
|
+
@for $i from 0 through $gridation-debug-colors
|
48
|
+
.debug-symmetric-#{$i}
|
49
|
+
@include debug-symmetric($i)
|
50
|
+
|
51
|
+
.debug-stack
|
52
|
+
@include debug-stack
|
53
|
+
@for $i from 0 through $gridation-stack-levels
|
54
|
+
.debug-stack-#{$i}
|
55
|
+
@include debug-stack($i)
|
56
|
+
|
57
|
+
.debug-black
|
58
|
+
@include debug-color(black)
|
59
|
+
.debug-gray
|
60
|
+
@include debug-color(gray)
|
61
|
+
.debug-white
|
62
|
+
@include debug-color(white)
|
63
|
+
.debug-red
|
64
|
+
@include debug-color(red)
|
65
|
+
.debug-green
|
66
|
+
@include debug-color(green)
|
67
|
+
.debug-blue
|
68
|
+
@include debug-color(blue)
|
69
|
+
|
@@ -0,0 +1,54 @@
|
|
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
|
+
|
@@ -0,0 +1,61 @@
|
|
1
|
+
@mixin fill($top: false, $right: false, $bottom: false, $left: false)
|
2
|
+
@include gridation-fill
|
3
|
+
@if $top
|
4
|
+
margin-top: ($top * $gridation-row-height) + ($top * $gridation-row-gutter) + $gridation-grid-margin-top
|
5
|
+
|
6
|
+
@if $right
|
7
|
+
margin-right: ($right * $gridation-column-width) + ($right * $gridation-column-gutter) + $gridation-grid-margin-right
|
8
|
+
|
9
|
+
@if $bottom
|
10
|
+
margin-bottom: ($bottom * $gridation-row-height) + ($bottom * $gridation-row-gutter) + $gridation-grid-margin-bottom
|
11
|
+
|
12
|
+
@if $left
|
13
|
+
margin-left: ($left * $gridation-column-width) + ($left * $gridation-column-gutter) + $gridation-grid-margin-left
|
14
|
+
|
15
|
+
@mixin fill-top($n: 1)
|
16
|
+
@include fill($n)
|
17
|
+
|
18
|
+
@mixin fill-right($n: 1)
|
19
|
+
@include fill(false, $n)
|
20
|
+
|
21
|
+
@mixin fill-bottom($n: 1)
|
22
|
+
@include fill(false, false, $n)
|
23
|
+
|
24
|
+
@mixin fill-left($n: 1)
|
25
|
+
@include fill(false, false, false, $n)
|
26
|
+
|
27
|
+
@mixin gridation-fill-base
|
28
|
+
|
29
|
+
|
30
|
+
@mixin gridation-fill
|
31
|
+
@include gridation-fill-base
|
32
|
+
|
33
|
+
|
34
|
+
@mixin gridation-fill-classes
|
35
|
+
.fill
|
36
|
+
@include fill
|
37
|
+
.fill-top
|
38
|
+
@include fill-top
|
39
|
+
@for $i from 0 through $gridation-grid-rows
|
40
|
+
.fill-top-#{$i}
|
41
|
+
@include fill-top($i)
|
42
|
+
|
43
|
+
.fill-right
|
44
|
+
@include fill-right
|
45
|
+
@for $i from 0 through $gridation-grid-columns
|
46
|
+
.fill-right-#{$i}
|
47
|
+
@include fill-right($i)
|
48
|
+
|
49
|
+
.fill-bottom
|
50
|
+
@include fill-bottom
|
51
|
+
@for $i from 0 through $gridation-grid-rows
|
52
|
+
.fill-bottom-#{$i}
|
53
|
+
@include fill-bottom($i)
|
54
|
+
|
55
|
+
.fill-left
|
56
|
+
@include fill-left
|
57
|
+
@for $i from 0 through $gridation-grid-columns
|
58
|
+
.fill-left-#{$i}
|
59
|
+
@include fill-left($i)
|
60
|
+
|
61
|
+
|
@@ -0,0 +1,27 @@
|
|
1
|
+
@mixin grid($background: false)
|
2
|
+
@include gridation-grid($background)
|
3
|
+
width: $gridation-grid-width
|
4
|
+
height: $gridation-grid-height
|
5
|
+
|
6
|
+
@mixin column-grid($background: false)
|
7
|
+
@include gridation-grid($background)
|
8
|
+
width: $gridation-grid-width
|
9
|
+
|
10
|
+
@mixin row-grid($background: false)
|
11
|
+
@include gridation-grid($background)
|
12
|
+
height: $gridation-grid-height
|
13
|
+
|
14
|
+
|
15
|
+
@mixin gridation-grid($background: false)
|
16
|
+
@include gridation-grid-base
|
17
|
+
@if $background
|
18
|
+
@include background-grid
|
19
|
+
|
20
|
+
@mixin gridation-grid-base
|
21
|
+
position: relative
|
22
|
+
@include float-left
|
23
|
+
|
24
|
+
|
25
|
+
@mixin gridation-grid-classes
|
26
|
+
.grid
|
27
|
+
@include grid
|
@@ -0,0 +1,57 @@
|
|
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
|
@@ -0,0 +1,14 @@
|
|
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
|
+
|
@@ -0,0 +1,63 @@
|
|
1
|
+
@mixin push($top: false, $right: false, $bottom: false, $left: false)
|
2
|
+
@include gridation-push
|
3
|
+
display: block !important
|
4
|
+
position: relative
|
5
|
+
@if $top
|
6
|
+
top: (($top * $gridation-row-height) + ($top * $gridation-row-gutter)) * -1
|
7
|
+
|
8
|
+
@if $right
|
9
|
+
left: ($right * $gridation-column-width) + ($right * $gridation-column-gutter)
|
10
|
+
|
11
|
+
@if $bottom
|
12
|
+
top: ($bottom * $gridation-row-height) + ($bottom * $gridation-row-gutter)
|
13
|
+
|
14
|
+
@if $left
|
15
|
+
left: (($left * $gridation-column-width) + ($left * $gridation-column-gutter)) * - 1
|
16
|
+
|
17
|
+
|
18
|
+
@mixin push-top($n: 1)
|
19
|
+
@include push($n)
|
20
|
+
|
21
|
+
@mixin push-right($n: 1)
|
22
|
+
@include push(false, $n)
|
23
|
+
|
24
|
+
@mixin push-bottom($n: 1)
|
25
|
+
@include push(false, false, $n)
|
26
|
+
|
27
|
+
@mixin push-left($n: 1)
|
28
|
+
@include push(false, false, false, $n)
|
29
|
+
|
30
|
+
|
31
|
+
@mixin gridation-push-base
|
32
|
+
|
33
|
+
|
34
|
+
@mixin gridation-push
|
35
|
+
@include gridation-push-base
|
36
|
+
|
37
|
+
@mixin gridation-push-classes
|
38
|
+
.push
|
39
|
+
@include push
|
40
|
+
|
41
|
+
.push-top
|
42
|
+
@include push-top
|
43
|
+
@for $i from 0 through $gridation-grid-rows
|
44
|
+
.push-top-#{$i}
|
45
|
+
@include push-top($i)
|
46
|
+
|
47
|
+
.push-right
|
48
|
+
@include push-right
|
49
|
+
@for $i from 0 through $gridation-grid-columns
|
50
|
+
.push-right-#{$i}
|
51
|
+
@include push-right($i)
|
52
|
+
|
53
|
+
.push-bottom
|
54
|
+
@include push-bottom
|
55
|
+
@for $i from 0 through $gridation-grid-rows
|
56
|
+
.push-bottom-#{$i}
|
57
|
+
@include push-bottom($i)
|
58
|
+
|
59
|
+
.push-left
|
60
|
+
@include push-left
|
61
|
+
@for $i from 0 through $gridation-grid-columns
|
62
|
+
.push-left-#{$i}
|
63
|
+
@include push-left($i)
|
@@ -0,0 +1,27 @@
|
|
1
|
+
@mixin row($n: false)
|
2
|
+
@include gridation-row
|
3
|
+
@if $n == 0
|
4
|
+
display: none !important
|
5
|
+
@else if $n
|
6
|
+
@include gridation-row-height($n)
|
7
|
+
|
8
|
+
@mixin gridation-row-base
|
9
|
+
@include gridation-grid-base
|
10
|
+
|
11
|
+
@mixin gridation-row-height($n)
|
12
|
+
height: ($gridation-row-height * $n) + (($n - 1) * $gridation-row-gutter)
|
13
|
+
|
14
|
+
@mixin gridation-row-margins
|
15
|
+
margin-top: $gridation-grid-margin-top
|
16
|
+
margin-bottom: $gridation-grid-margin-bottom
|
17
|
+
|
18
|
+
@mixin gridation-row
|
19
|
+
@include gridation-row-base
|
20
|
+
@include gridation-row-margins
|
21
|
+
|
22
|
+
@mixin gridation-row-classes
|
23
|
+
.row
|
24
|
+
@include row
|
25
|
+
@for $i from 0 through $gridation-grid-rows
|
26
|
+
.row-#{$i}
|
27
|
+
@include row($i)
|
@@ -0,0 +1,20 @@
|
|
1
|
+
@mixin stack($n: false, $position: $gridation-stack-position-approach)
|
2
|
+
@include gridation-stack($position)
|
3
|
+
@if $n
|
4
|
+
z-index: $n * $gridation-stack-multiplier
|
5
|
+
@else
|
6
|
+
z-index: 0
|
7
|
+
|
8
|
+
@mixin stack-reset($position: auto)
|
9
|
+
@include stack(0, $position)
|
10
|
+
|
11
|
+
@mixin gridation-stack($position: $gridation-stack-postion)
|
12
|
+
@if $position
|
13
|
+
postion: $position
|
14
|
+
|
15
|
+
@mixin gridation-stack-classes
|
16
|
+
.stack
|
17
|
+
@include stack
|
18
|
+
@for $i from 0 through $gridation-stack-levels
|
19
|
+
.stack-#{$i}
|
20
|
+
@include stack($i)
|
@@ -0,0 +1 @@
|
|
1
|
+
stylesheet 'screen.sass', :media => 'screen, projection'
|
File without changes
|
metadata
ADDED
@@ -0,0 +1,93 @@
|
|
1
|
+
--- !ruby/object:Gem::Specification
|
2
|
+
name: gridation
|
3
|
+
version: !ruby/object:Gem::Version
|
4
|
+
prerelease:
|
5
|
+
version: 0.0.4
|
6
|
+
platform: ruby
|
7
|
+
authors:
|
8
|
+
- David Singer
|
9
|
+
autorequire:
|
10
|
+
bindir: bin
|
11
|
+
cert_chain: []
|
12
|
+
|
13
|
+
date: 2011-02-27 00:00:00 -08:00
|
14
|
+
default_executable:
|
15
|
+
dependencies:
|
16
|
+
- !ruby/object:Gem::Dependency
|
17
|
+
name: compass
|
18
|
+
prerelease: false
|
19
|
+
requirement: &id001 !ruby/object:Gem::Requirement
|
20
|
+
none: false
|
21
|
+
requirements:
|
22
|
+
- - ">="
|
23
|
+
- !ruby/object:Gem::Version
|
24
|
+
version: "0"
|
25
|
+
type: :runtime
|
26
|
+
version_requirements: *id001
|
27
|
+
description: Gridation is a full featured Sass based grid framework built on top of Compass.
|
28
|
+
email:
|
29
|
+
- david@ramaboo.com
|
30
|
+
executables: []
|
31
|
+
|
32
|
+
extensions: []
|
33
|
+
|
34
|
+
extra_rdoc_files: []
|
35
|
+
|
36
|
+
files:
|
37
|
+
- .gitignore
|
38
|
+
- Gemfile
|
39
|
+
- LICENSE
|
40
|
+
- README.md
|
41
|
+
- Rakefile
|
42
|
+
- gridation.gemspec
|
43
|
+
- lib/gridation.rb
|
44
|
+
- lib/gridation/sass_extensions.rb
|
45
|
+
- lib/gridation/version.rb
|
46
|
+
- stylesheets/_gridation.sass
|
47
|
+
- stylesheets/gridation/_base.sass
|
48
|
+
- stylesheets/gridation/_block.sass
|
49
|
+
- stylesheets/gridation/_border.sass
|
50
|
+
- stylesheets/gridation/_column.sass
|
51
|
+
- stylesheets/gridation/_container.sass
|
52
|
+
- stylesheets/gridation/_debug.sass
|
53
|
+
- stylesheets/gridation/_equal.sass
|
54
|
+
- stylesheets/gridation/_fill.sass
|
55
|
+
- stylesheets/gridation/_grid.sass
|
56
|
+
- stylesheets/gridation/_helper.sass
|
57
|
+
- stylesheets/gridation/_mixins.sass
|
58
|
+
- stylesheets/gridation/_push.sass
|
59
|
+
- stylesheets/gridation/_row.sass
|
60
|
+
- stylesheets/gridation/_stack.sass
|
61
|
+
- stylesheets/gridation/mixins/_helper.sass
|
62
|
+
- templates/project/manifest.rb
|
63
|
+
- templates/project/screen.sass
|
64
|
+
has_rdoc: true
|
65
|
+
homepage: http://gridation.com
|
66
|
+
licenses: []
|
67
|
+
|
68
|
+
post_install_message:
|
69
|
+
rdoc_options: []
|
70
|
+
|
71
|
+
require_paths:
|
72
|
+
- lib
|
73
|
+
required_ruby_version: !ruby/object:Gem::Requirement
|
74
|
+
none: false
|
75
|
+
requirements:
|
76
|
+
- - ">="
|
77
|
+
- !ruby/object:Gem::Version
|
78
|
+
version: "0"
|
79
|
+
required_rubygems_version: !ruby/object:Gem::Requirement
|
80
|
+
none: false
|
81
|
+
requirements:
|
82
|
+
- - ">="
|
83
|
+
- !ruby/object:Gem::Version
|
84
|
+
version: "0"
|
85
|
+
requirements: []
|
86
|
+
|
87
|
+
rubyforge_project: gridation
|
88
|
+
rubygems_version: 1.5.3
|
89
|
+
signing_key:
|
90
|
+
specification_version: 3
|
91
|
+
summary: Sass based grid framework.
|
92
|
+
test_files: []
|
93
|
+
|