compass-grid 0.1.0

Sign up to get free protection for your applications and to get access to all the features.
@@ -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
@@ -0,0 +1,3 @@
1
+ require 'compass'
2
+ extension_path = File.expand_path(File.join(File.dirname(__FILE__), ".."))
3
+ Compass::Frameworks.register("compass-grid", :path => extension_path)
@@ -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: []