compass-grid 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.mkdn +24 -0
- data/lib/compass-grid.rb +3 -0
- data/stylesheets/_compass-grid.scss +1 -0
- data/stylesheets/compass-grid/_grid.scss +17 -0
- data/stylesheets/compass-grid/grid/_column.scss +45 -0
- data/stylesheets/compass-grid/grid/_grid.scss +43 -0
- data/stylesheets/compass-grid/grid/_push.scss +16 -0
- data/stylesheets/compass-grid/grid/_rhythm.scss +20 -0
- data/stylesheets/compass-grid/grid/_shift.scss +18 -0
- data/templates/project/manifest.rb +0 -0
- metadata +65 -0
data/README.mkdn
ADDED
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
Compass Grid
|
|
2
|
+
====================
|
|
3
|
+
|
|
4
|
+
A flexible grid system for the compass css framework
|
|
5
|
+
|
|
6
|
+
|
|
7
|
+
Installation
|
|
8
|
+
============
|
|
9
|
+
|
|
10
|
+
From the command line:
|
|
11
|
+
|
|
12
|
+
(sudo) gem install compass-grid
|
|
13
|
+
|
|
14
|
+
Add to a project:
|
|
15
|
+
|
|
16
|
+
// rails: compass.config, other: config.rb
|
|
17
|
+
require 'compass-grid'
|
|
18
|
+
|
|
19
|
+
// command line
|
|
20
|
+
compass install compass-grid
|
|
21
|
+
|
|
22
|
+
Or create a new project:
|
|
23
|
+
|
|
24
|
+
compass -r compass-grid -f compass-grid project_directory
|
data/lib/compass-grid.rb
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
@import "compass-grid/grid";
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
@import "compass/typography/vertical_rhythm";
|
|
2
|
+
|
|
3
|
+
//defaults for grid system
|
|
4
|
+
$grid-debug: false;
|
|
5
|
+
$grid-width: 80% !default;
|
|
6
|
+
$grid-total-columns: 8 !default;
|
|
7
|
+
$grid-columns-gutter: 5% !default;
|
|
8
|
+
$grid-baseline-height: $base-line-height !default;
|
|
9
|
+
$grid-align: center !default;
|
|
10
|
+
$grid-width-min: undefined !default;
|
|
11
|
+
$grid-width-max: undefined !default;
|
|
12
|
+
|
|
13
|
+
@import "grid/grid";
|
|
14
|
+
//@import "grid/column"
|
|
15
|
+
//@import "grid/shift"
|
|
16
|
+
//@import "grid/push"
|
|
17
|
+
//@import "grid/rhythm"
|
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
$column-content-wrap: ".in";
|
|
2
|
+
$column-gap: none;
|
|
3
|
+
|
|
4
|
+
@mixin grid-column ($number-of-columns, $position: left, $column-gap-side: both) {
|
|
5
|
+
|
|
6
|
+
// calc column width
|
|
7
|
+
width: ($number-of-columns / $grid-columns) * 100%;
|
|
8
|
+
|
|
9
|
+
// set column position
|
|
10
|
+
@if $position == left {
|
|
11
|
+
float: left;
|
|
12
|
+
} @else {
|
|
13
|
+
float: right;
|
|
14
|
+
margin-left: -5px;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
// construct column gaps with content wraps
|
|
18
|
+
> #{$column-content-wrap} {
|
|
19
|
+
|
|
20
|
+
@if $column-gap != none {
|
|
21
|
+
@if $column-gap-side == both {
|
|
22
|
+
margin-right: $column-gap / 2;
|
|
23
|
+
margin-left: $column-gap / 2;
|
|
24
|
+
} @else {
|
|
25
|
+
margin-#{$column-gap-side}: $column-gap / 2;
|
|
26
|
+
}
|
|
27
|
+
}
|
|
28
|
+
}
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
@mixin grid-column-equal($equal: yes) {
|
|
32
|
+
@if $equal == yes {
|
|
33
|
+
padding-bottom:32767px;
|
|
34
|
+
margin-bottom:-32767px;
|
|
35
|
+
} @else if $equal == no {
|
|
36
|
+
padding-bottom: 0;
|
|
37
|
+
margin-bottom: 0;
|
|
38
|
+
} @else if $equal == container {
|
|
39
|
+
@include clearfix();
|
|
40
|
+
overflow: hidden;
|
|
41
|
+
display:block;
|
|
42
|
+
position:relative;
|
|
43
|
+
width: 100%;
|
|
44
|
+
}
|
|
45
|
+
}
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
@import "compass/utilities/general/clearfix";
|
|
2
|
+
@import "compass/layout/grid-background";
|
|
3
|
+
|
|
4
|
+
@mixin grid($width: $grid-width,
|
|
5
|
+
$total: $grid-total-columns,
|
|
6
|
+
$gutter: $grid-columns-gutter,
|
|
7
|
+
$height: $grid-baseline-height,
|
|
8
|
+
$align: $grid-align,
|
|
9
|
+
$width-min: $grid-width-min,
|
|
10
|
+
$width-max: $grid-width-max) {
|
|
11
|
+
|
|
12
|
+
// allow to override defaults
|
|
13
|
+
$grid-width: $width;
|
|
14
|
+
$grid-width-min: $width-min;
|
|
15
|
+
$grid-width-max: $width-max;
|
|
16
|
+
$grid-baseline-height: $height;
|
|
17
|
+
$grid-columns-gutter: $gutter;
|
|
18
|
+
$grid-total-columns: $total;
|
|
19
|
+
$grid-align: $align;
|
|
20
|
+
|
|
21
|
+
& {
|
|
22
|
+
@include clearfix;
|
|
23
|
+
|
|
24
|
+
width: $width;
|
|
25
|
+
margin-left: auto;
|
|
26
|
+
margin-right: auto;
|
|
27
|
+
text-align: left;
|
|
28
|
+
|
|
29
|
+
@if $grid-debug {
|
|
30
|
+
$number-of-gutters: $total - 1;
|
|
31
|
+
$column-width: (100% / $total) - ($gutter * $number-of-gutters / $total);
|
|
32
|
+
@include grid-background($total, $column-width, $gutter, $offset: 0%);
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
@if $width-min != undefined {
|
|
36
|
+
min-width: $width-min;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
@if $width-max != undefined {
|
|
40
|
+
max-width: $width-max;
|
|
41
|
+
}
|
|
42
|
+
}
|
|
43
|
+
}
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
@mixin grid-push($direction, $number-of-columns: 0) {
|
|
2
|
+
// calc columns
|
|
3
|
+
$amount: ($number-of-columns / $grid-columns) * 100%;
|
|
4
|
+
|
|
5
|
+
@if $direction == left {
|
|
6
|
+
margin-right: $amount;
|
|
7
|
+
} @else if $direction == right {
|
|
8
|
+
margin-left: $amount;
|
|
9
|
+
} @else if $direction == up {
|
|
10
|
+
margin-bottom: $number-of-columns * $grid-height;
|
|
11
|
+
} @else if $direction == down {
|
|
12
|
+
margin-top: $number-of-columns * $grid-height;
|
|
13
|
+
} @else if $direction == none {
|
|
14
|
+
margin: 0;
|
|
15
|
+
}
|
|
16
|
+
}
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
$grid-font-base: 15;
|
|
2
|
+
$grid-rhythm-default: $grid-height / $grid-font-base;
|
|
3
|
+
|
|
4
|
+
@mixin grid-rhythm-base {
|
|
5
|
+
font-size: ($grid-font-base / 16) * 100%;
|
|
6
|
+
$grid-rhythm-default: $grid-height / $grid-font-base;
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
@mixin grid-rhythm($divisor, $top: top, $bottom: bottom) {
|
|
10
|
+
$size: ($grid-height / $grid-font-base) / $divisor;
|
|
11
|
+
$rhythm: $divisor * 1em;
|
|
12
|
+
font-size: $size * 1em;
|
|
13
|
+
line-height: $rhythm;
|
|
14
|
+
@if $top == top {
|
|
15
|
+
margin-top: $rhythm;
|
|
16
|
+
}
|
|
17
|
+
@if $bottom == bottom {
|
|
18
|
+
margin-bottom: $rhythm;
|
|
19
|
+
}
|
|
20
|
+
}
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
@mixin grid-shift($direction, $number-of-columns: 0) {
|
|
2
|
+
// calc columns
|
|
3
|
+
$amount: ($number-of-columns / $grid-columns) * 100%;
|
|
4
|
+
position: relative;
|
|
5
|
+
|
|
6
|
+
@if $direction == left {
|
|
7
|
+
right: $amount;
|
|
8
|
+
} @else if $direction == right {
|
|
9
|
+
left: $amount;
|
|
10
|
+
} @else if $direction == up {
|
|
11
|
+
margin-top: $number-of-columns * $grid-height * -1;
|
|
12
|
+
} @else if $direction == down {
|
|
13
|
+
margin-bottom: $number-of-columns * $grid-height * -1;
|
|
14
|
+
} @else if $direction == none {
|
|
15
|
+
left: 0;
|
|
16
|
+
right: 0;
|
|
17
|
+
}
|
|
18
|
+
}
|
|
File without changes
|
metadata
ADDED
|
@@ -0,0 +1,65 @@
|
|
|
1
|
+
--- !ruby/object:Gem::Specification
|
|
2
|
+
name: compass-grid
|
|
3
|
+
version: !ruby/object:Gem::Version
|
|
4
|
+
version: 0.1.0
|
|
5
|
+
prerelease:
|
|
6
|
+
platform: ruby
|
|
7
|
+
authors:
|
|
8
|
+
- Dominik Guzei
|
|
9
|
+
autorequire:
|
|
10
|
+
bindir: bin
|
|
11
|
+
cert_chain: []
|
|
12
|
+
date: 2011-10-25 00:00:00.000000000Z
|
|
13
|
+
dependencies:
|
|
14
|
+
- !ruby/object:Gem::Dependency
|
|
15
|
+
name: compass
|
|
16
|
+
requirement: &2153125680 !ruby/object:Gem::Requirement
|
|
17
|
+
none: false
|
|
18
|
+
requirements:
|
|
19
|
+
- - ! '>='
|
|
20
|
+
- !ruby/object:Gem::Version
|
|
21
|
+
version: '0.11'
|
|
22
|
+
type: :runtime
|
|
23
|
+
prerelease: false
|
|
24
|
+
version_requirements: *2153125680
|
|
25
|
+
description: A flexible grid system for compass css framework
|
|
26
|
+
email: dominik.guzei@gmail.com
|
|
27
|
+
executables: []
|
|
28
|
+
extensions: []
|
|
29
|
+
extra_rdoc_files: []
|
|
30
|
+
files:
|
|
31
|
+
- README.mkdn
|
|
32
|
+
- lib/compass-grid.rb
|
|
33
|
+
- stylesheets/_compass-grid.scss
|
|
34
|
+
- stylesheets/compass-grid/_grid.scss
|
|
35
|
+
- stylesheets/compass-grid/grid/_column.scss
|
|
36
|
+
- stylesheets/compass-grid/grid/_grid.scss
|
|
37
|
+
- stylesheets/compass-grid/grid/_push.scss
|
|
38
|
+
- stylesheets/compass-grid/grid/_rhythm.scss
|
|
39
|
+
- stylesheets/compass-grid/grid/_shift.scss
|
|
40
|
+
- templates/project/manifest.rb
|
|
41
|
+
homepage: http://wizzart.at
|
|
42
|
+
licenses: []
|
|
43
|
+
post_install_message:
|
|
44
|
+
rdoc_options: []
|
|
45
|
+
require_paths:
|
|
46
|
+
- lib
|
|
47
|
+
required_ruby_version: !ruby/object:Gem::Requirement
|
|
48
|
+
none: false
|
|
49
|
+
requirements:
|
|
50
|
+
- - ! '>='
|
|
51
|
+
- !ruby/object:Gem::Version
|
|
52
|
+
version: '0'
|
|
53
|
+
required_rubygems_version: !ruby/object:Gem::Requirement
|
|
54
|
+
none: false
|
|
55
|
+
requirements:
|
|
56
|
+
- - ! '>='
|
|
57
|
+
- !ruby/object:Gem::Version
|
|
58
|
+
version: '0'
|
|
59
|
+
requirements: []
|
|
60
|
+
rubyforge_project:
|
|
61
|
+
rubygems_version: 1.8.11
|
|
62
|
+
signing_key:
|
|
63
|
+
specification_version: 3
|
|
64
|
+
summary: A flexible grid system for compass css framework
|
|
65
|
+
test_files: []
|