gridation 0.0.4
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/.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
|
+
|