gridgraphy 0.0.2

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.
Files changed (45) hide show
  1. checksums.yaml +7 -0
  2. data/.gitignore +19 -0
  3. data/Gemfile +4 -0
  4. data/LICENSE.txt +22 -0
  5. data/README.md +29 -0
  6. data/Rakefile +1 -0
  7. data/gridgraphy.gemspec +21 -0
  8. data/lib/gridgraphy/version.rb +3 -0
  9. data/lib/gridgraphy.rb +9 -0
  10. data/stylesheets/_gridgraphy.sass +2 -0
  11. data/stylesheets/gridgraphy/_scaffolding.sass +34 -0
  12. data/stylesheets/gridgraphy/config/_config.sass +12 -0
  13. data/stylesheets/gridgraphy/grids/base/_functions.sass +52 -0
  14. data/stylesheets/gridgraphy/grids/base/_mixins.sass +137 -0
  15. data/stylesheets/gridgraphy/grids/types/center/.DS_Store +0 -0
  16. data/stylesheets/gridgraphy/grids/types/center/_functions.sass +19 -0
  17. data/stylesheets/gridgraphy/grids/types/center/_mixins.sass +37 -0
  18. data/stylesheets/gridgraphy/grids/types/full/.DS_Store +0 -0
  19. data/stylesheets/gridgraphy/grids/types/full/_functions.sass +19 -0
  20. data/stylesheets/gridgraphy/grids/types/full/_mixins.sass +35 -0
  21. data/stylesheets/gridgraphy/grids/types/left/.DS_Store +0 -0
  22. data/stylesheets/gridgraphy/grids/types/left/_functions.sass +19 -0
  23. data/stylesheets/gridgraphy/grids/types/left/_mixins.sass +36 -0
  24. data/stylesheets/gridgraphy/grids/types/right/_functions.sass +19 -0
  25. data/stylesheets/gridgraphy/grids/types/right/_mixins.sass +36 -0
  26. data/stylesheets/gridgraphy/utils/.DS_Store +0 -0
  27. data/stylesheets/gridgraphy/utils/_functions.sass +2 -0
  28. data/stylesheets/gridgraphy/utils/_mixins.sass +9 -0
  29. data/templates/example/examples/center/config/_config.sass +13 -0
  30. data/templates/example/examples/center/index.html +121 -0
  31. data/templates/example/examples/center/screen.sass +2 -0
  32. data/templates/example/examples/full/config/_config.sass +13 -0
  33. data/templates/example/examples/full/index.html +121 -0
  34. data/templates/example/examples/full/screen.sass +2 -0
  35. data/templates/example/examples/left/config/_config.sass +13 -0
  36. data/templates/example/examples/left/index.html +121 -0
  37. data/templates/example/examples/left/screen.sass +2 -0
  38. data/templates/example/examples/right/config/_config.sass +13 -0
  39. data/templates/example/examples/right/index.html +121 -0
  40. data/templates/example/examples/right/screen.sass +2 -0
  41. data/templates/example/manifest.rb +29 -0
  42. data/templates/scaffolding/config/_config.sass +13 -0
  43. data/templates/scaffolding/manifest.rb +16 -0
  44. data/templates/scaffolding/screen.sass +2 -0
  45. metadata +116 -0
checksums.yaml ADDED
@@ -0,0 +1,7 @@
1
+ ---
2
+ SHA1:
3
+ metadata.gz: e7e9a38002ff8f81ddd6d90a1fc8d6d3ba0333b6
4
+ data.tar.gz: 51460817a1ca9829d4b633d64ba6b8b0c1dbf9fe
5
+ SHA512:
6
+ metadata.gz: 49ce16f47b85644c5443393c5bd45a3d3fbb2ca22d19cb59d3d2a74eeafd84b03f65c5b992d123a7a15d4a270e49ea68e6e156125341e95abe42b8dfdfbc1031
7
+ data.tar.gz: 37af0ec50805cb329d6d918c8308b37ba6ca6e72864e5a9e06eda2bcab4ff2bfe8e7ed53e8d9aab8966e4b74674eefbb9d51d15322a2e2260592b24d9e1744d6
data/.gitignore ADDED
@@ -0,0 +1,19 @@
1
+ *.gem
2
+ *.rbc
3
+ .bundle
4
+ .config
5
+ .yardoc
6
+ Gemfile.lock
7
+ InstalledFiles
8
+ _yardoc
9
+ coverage
10
+ doc/
11
+ lib/bundler/man
12
+ pkg
13
+ rdoc
14
+ spec/reports
15
+ test/tmp
16
+ test/version_tmp
17
+ tmp
18
+ *.sassc
19
+ .sass-cache
data/Gemfile ADDED
@@ -0,0 +1,4 @@
1
+ source 'https://rubygems.org'
2
+
3
+ # Specify your gem's dependencies in gridgraphy.gemspec
4
+ gemspec
data/LICENSE.txt ADDED
@@ -0,0 +1,22 @@
1
+ Copyright (c) 2013 Jason Bellamy
2
+
3
+ MIT License
4
+
5
+ Permission is hereby granted, free of charge, to any person obtaining
6
+ a copy of this software and associated documentation files (the
7
+ "Software"), to deal in the Software without restriction, including
8
+ without limitation the rights to use, copy, modify, merge, publish,
9
+ distribute, sublicense, and/or sell copies of the Software, and to
10
+ permit persons to whom the Software is furnished to do so, subject to
11
+ the following conditions:
12
+
13
+ The above copyright notice and this permission notice shall be
14
+ included in all copies or substantial portions of the Software.
15
+
16
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
17
+ EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
18
+ MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
19
+ NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
20
+ LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
21
+ OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
22
+ WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
data/README.md ADDED
@@ -0,0 +1,29 @@
1
+ # Gridgraphy
2
+
3
+ TODO: Write a gem description
4
+
5
+ ## Installation
6
+
7
+ Add this line to your application's Gemfile:
8
+
9
+ gem 'gridgraphy'
10
+
11
+ And then execute:
12
+
13
+ $ bundle
14
+
15
+ Or install it yourself as:
16
+
17
+ $ gem install gridgraphy
18
+
19
+ ## Usage
20
+
21
+ TODO: Write usage instructions here
22
+
23
+ ## Contributing
24
+
25
+ 1. Fork it
26
+ 2. Create your feature branch (`git checkout -b my-new-feature`)
27
+ 3. Commit your changes (`git commit -am 'Add some feature'`)
28
+ 4. Push to the branch (`git push origin my-new-feature`)
29
+ 5. Create new Pull Request
data/Rakefile ADDED
@@ -0,0 +1 @@
1
+ require "bundler/gem_tasks"
@@ -0,0 +1,21 @@
1
+ # coding: utf-8
2
+ lib = File.expand_path('../lib', __FILE__)
3
+ $LOAD_PATH.unshift(lib) unless $LOAD_PATH.include?(lib)
4
+ require 'gridgraphy/version'
5
+
6
+ Gem::Specification.new do |spec|
7
+ spec.name = "gridgraphy"
8
+ spec.version = Gridgraphy::VERSION
9
+ spec.authors = ["Jason Bellamy"]
10
+ spec.email = ["j@sonbellamy.com"]
11
+ spec.description = "An unobtrusive Compass/SASS grid framework"
12
+ spec.summary = "GridGraphy is an open source grid framework that stays out of the way and lets you get things done \"your way\""
13
+ spec.homepage = "https://github.com/jasonbellamy/gridgraphy"
14
+ spec.license = "MIT"
15
+
16
+ spec.files = `git ls-files`.split($/)
17
+ spec.require_paths = ["lib"]
18
+
19
+ spec.add_dependency "compass", [">= 0.12.2"]
20
+ spec.add_dependency "sass", [">= 3.2.0"]
21
+ end
@@ -0,0 +1,3 @@
1
+ module Gridgraphy
2
+ VERSION = "0.0.2"
3
+ end
data/lib/gridgraphy.rb ADDED
@@ -0,0 +1,9 @@
1
+ require "gridgraphy/version"
2
+ require 'compass'
3
+
4
+ Compass::Frameworks.register('gridgraphy',
5
+ :stylesheets_directory => File.join(File.dirname(__FILE__), '..', 'stylesheets'),
6
+ :templates_directory => File.join(File.dirname(__FILE__), '..', 'templates'))
7
+
8
+
9
+ Sass::Script::Number.precision = 7
@@ -0,0 +1,2 @@
1
+ @import gridgraphy/grids/base/functions
2
+ @import gridgraphy/grids/base/mixins
@@ -0,0 +1,34 @@
1
+ @import config/config
2
+
3
+ @import grids/base/functions
4
+ @import grids/base/mixins
5
+
6
+ .#{$grid-namespace-base}-#{$grid-namespace-row}
7
+ @include grid-row( 100% )
8
+
9
+ .#{$grid-namespace-base}-#{$grid-namespace-row}-nested
10
+ @include grid-row-nested( $grid-type )
11
+
12
+ [class^="#{$grid-namespace-base}-#{$grid-namespace-column}"]
13
+ @include grid-column-base()
14
+ @include grid-column-gutter( $grid-type )
15
+
16
+ @for $i from 1 to $grid-column-count + 1
17
+ .#{$grid-namespace-base}-#{$grid-namespace-column}-#{$i}
18
+ @include grid-column-width( $i, $grid-type )
19
+
20
+ @for $i from 1 to $grid-column-count + 1
21
+ .pushed-by-#{$i}
22
+ @include grid-column-push( $i, $grid-type )
23
+
24
+ @for $i from 1 to $grid-column-count + 1
25
+ .pulled-by-#{$i}
26
+ @include grid-column-pull( $i, $grid-type )
27
+
28
+ @for $i from 1 to $grid-column-count + 1
29
+ .offset-right-by-#{$i}
30
+ @include grid-column-offset-right( $i, $grid-type )
31
+
32
+ @for $i from 1 to $grid-column-count + 1
33
+ .offset-left-by-#{$i}
34
+ @include grid-column-offset-left( $i, $grid-type )
@@ -0,0 +1,12 @@
1
+ // set inital grid values
2
+ $grid-type: 'full' !default
3
+ $grid-max-width: 960px !default
4
+ $grid-gutter-width: 20px !default
5
+ $grid-column-count: 12 !default
6
+ $grid-column-width: $grid-max-width / $grid-column-count !default
7
+
8
+ $grid-namespace-base: 'grid' !default
9
+ $grid-namespace-row: 'row' !default
10
+ $grid-namespace-column: 'column' !default
11
+
12
+ $grid-show: false !default
@@ -0,0 +1,52 @@
1
+ // The (base) functions below provide a consistent interface to develop with regardless of which grid type is being used.
2
+
3
+
4
+ // @imports
5
+ @import ../../config/config
6
+ @import ../../utils/functions
7
+ @import ../types/right/functions
8
+ @import ../types/center/functions
9
+ @import ../types/left/functions
10
+ @import ../types/full/functions
11
+
12
+
13
+ // Determines a grid column width.
14
+ // @param $columns [Integer] Number of columns to span.
15
+ // @param $type [String] The type of grid being used.
16
+ // @return [Integer] The grid column width.
17
+ @function grid-column-width( $columns, $type: $grid-type )
18
+ @if $type == 'right'
19
+ @return right-grid-column-width( $columns )
20
+ @if $type == 'center'
21
+ @return center-grid-column-width( $columns )
22
+ @if $type == 'left'
23
+ @return left-grid-column-width( $columns )
24
+ @if $type == 'full'
25
+ @return full-grid-column-width( $columns )
26
+
27
+ // Determines a grid column offset.
28
+ // @param $columns [Integer] Number of columns to offset by.
29
+ // @param $type [String] The type of grid being used.
30
+ // @return [Integer] The grid column offset.
31
+ @function grid-column-offset( $columns, $type: $grid-type )
32
+ @if $type == 'right'
33
+ @return right-grid-column-offset( $columns )
34
+ @if $type == 'center'
35
+ @return center-grid-column-offset( $columns )
36
+ @if $type == 'left'
37
+ @return left-grid-column-offset( $columns )
38
+ @if $type == 'full'
39
+ @return full-grid-column-offset( $columns )
40
+
41
+ // Determines a grid column gutter width.
42
+ // @param $type [String] The type of grid being used.
43
+ // @return [Integer] The grid column gutter width.
44
+ @function grid-column-gutter( $type: $grid-type )
45
+ @if $type == 'right'
46
+ @return right-grid-column-gutter()
47
+ @if $type == 'center'
48
+ @return center-grid-column-gutter()
49
+ @if $type == 'left'
50
+ @return left-grid-column-gutter()
51
+ @if $type == 'full'
52
+ @return full-grid-column-gutter()
@@ -0,0 +1,137 @@
1
+ // The (base) mixins below provide a consistent interface to develop with regardless of which grid type is being used.
2
+
3
+ // @imports
4
+ @import compass/css3/box-sizing
5
+ @import ../../config/config
6
+ @import ../../utils/mixins
7
+ @import ../types/right/mixins
8
+ @import ../types/center/mixins
9
+ @import ../types/left/mixins
10
+ @import ../types/full/mixins
11
+
12
+
13
+ // Output the grid row properties for a top level row.
14
+ // @param $max-width The max width this specfic grid row should span.
15
+ @mixin grid-row( $max-width: $grid-max-width )
16
+ @include grid-clear()
17
+ width: 100%
18
+ max-width: $max-width
19
+ margin-left: auto
20
+ margin-right: auto
21
+ @if $grid-show
22
+ background-color: rgb( 235, 235, 235 )
23
+ margin-bottom: 5px
24
+ > *
25
+ background-color: rgb( 205, 205, 205 )
26
+
27
+ // Output the grid row properties for a nested row.
28
+ // @param $type [String] The type of grid being used.
29
+ @mixin grid-row-nested( $type: $grid-type )
30
+ @include grid-clear()
31
+ width: auto
32
+ min-width: 0
33
+ max-width: none
34
+ @if $type == 'left'
35
+ @include left-grid-row-nested()
36
+ @if $type == 'center'
37
+ @include center-grid-row-nested()
38
+ @if $type == 'right'
39
+ @include right-grid-row-nested()
40
+ @if $type == 'full'
41
+ @include full-grid-row-nested()
42
+ @if $grid-show
43
+ background-color: rgb( 235, 235, 235 )
44
+ > *
45
+ background-color: rgb( 155, 155, 155 )
46
+
47
+ // Output a complete set of properties for a grid column.
48
+ // @param [Integer] Number of columns to span.
49
+ // @param $type [String] The type of grid being used.
50
+ @mixin grid-column( $columns: 0, $type: $grid-type )
51
+ @include grid-column-base()
52
+ @include grid-column-width( $columns, $type )
53
+ @include grid-column-gutter( $type )
54
+
55
+ // Output base properties for a grid column.
56
+ @mixin grid-column-base()
57
+ @include box-sizing( border-box )
58
+ float: left
59
+ overflow: hidden
60
+ position: relative
61
+
62
+ // Output the width property of a grid column.
63
+ // @param [Integer] Number of columns to span.
64
+ // @param $type [String] The type of grid being used.
65
+ @mixin grid-column-width( $columns, $type: $grid-type )
66
+ @if $type == 'right'
67
+ @include right-grid-column-width( $columns )
68
+ @if $type == 'center'
69
+ @include center-grid-column-width( $columns )
70
+ @if $type == 'left'
71
+ @include left-grid-column-width( $columns )
72
+ @if $type == 'full'
73
+ @include full-grid-column-width( $columns )
74
+
75
+ // Output the gutter properties of a grid column.
76
+ // @param $type [String] The type of grid being used.
77
+ @mixin grid-column-gutter( $type: $grid-type )
78
+ @if $type == 'right'
79
+ @include right-grid-column-gutter()
80
+ @if $type == 'center'
81
+ @include center-grid-column-gutter()
82
+ @if $type == 'left'
83
+ @include left-grid-column-gutter()
84
+ @if $type == 'full'
85
+ @include full-grid-column-gutter()
86
+
87
+ // Output properties for a right offset grid column.
88
+ // @param [Integer] Number of columns to offset by.
89
+ // @param $type [String] The type of grid being used.
90
+ @mixin grid-column-offset-right( $columns, $type: $grid-type )
91
+ @if $type == 'right'
92
+ @include right-grid-column-offset-right( $columns )
93
+ @if $type == 'center'
94
+ @include center-grid-column-offset-right( $columns )
95
+ @if $type == 'left'
96
+ @include left-grid-column-offset-right( $columns )
97
+ @if $type == 'full'
98
+ @include full-grid-column-offset-right( $columns )
99
+
100
+ // Output properties for a left offset grid column.
101
+ // @param [Integer] Number of columns to offset by.
102
+ // @param $type [String] The type of grid being used.
103
+ @mixin grid-column-offset-left( $columns, $type: $grid-type )
104
+ @if $type == 'right'
105
+ @include right-grid-column-offset-left( $columns )
106
+ @if $type == 'center'
107
+ @include center-grid-column-offset-left( $columns )
108
+ @if $type == 'left'
109
+ @include left-grid-column-offset-left( $columns )
110
+ @if $type == 'full'
111
+ @include full-grid-column-offset-left( $columns )
112
+
113
+ // Output properties to push a grid column.
114
+ // @param [Integer] Number of columns to push by.
115
+ // @param $type [String] The type of grid being used.
116
+ @mixin grid-column-push( $columns, $type: $grid-type )
117
+ @if $type == 'right'
118
+ @include right-grid-column-push( $columns )
119
+ @if $type == 'center'
120
+ @include center-grid-column-push( $columns )
121
+ @if $type == 'left'
122
+ @include left-grid-column-push( $columns )
123
+ @if $type == 'full'
124
+ @include full-grid-column-push( $columns )
125
+
126
+ // Output properties to pull a grid column.
127
+ // @param [Integer] Number of columns to pull by.
128
+ // @param $type [String] The type of grid being used.
129
+ @mixin grid-column-pull( $columns, $type: $grid-type )
130
+ @if $type == 'right'
131
+ @include right-grid-column-pull( $columns )
132
+ @if $type == 'center'
133
+ @include center-grid-column-pull( $columns )
134
+ @if $type == 'left'
135
+ @include left-grid-column-pull( $columns )
136
+ @if $type == 'full'
137
+ @include full-grid-column-pull( $columns )
@@ -0,0 +1,19 @@
1
+ // Center grid functions
2
+
3
+
4
+ // Determines a grid column width.
5
+ // @param $columns [Integer] Number of columns to span.
6
+ // @return [Integer] The grid column width.
7
+ @function center-grid-column-width( $columns )
8
+ @return px-to-percent( $columns * $grid-column-width - $grid-gutter-width, $grid-max-width )
9
+
10
+ // Determines a grid column offset.
11
+ // @param $columns [Integer] Number of columns to offset by.
12
+ // @return [Integer] The grid column offset.
13
+ @function center-grid-column-offset( $columns )
14
+ @return px-to-percent( $columns * $grid-column-width + $grid-gutter-width / 2, $grid-max-width )
15
+
16
+ // Determines a grid column gutter width.
17
+ // @return [Integer] The grid column gutter width.
18
+ @function center-grid-column-gutter()
19
+ @return px-to-percent( $grid-gutter-width / 2, $grid-max-width )
@@ -0,0 +1,37 @@
1
+ // Center grid mixins
2
+
3
+
4
+ // Output the grid row properties for a nested row.
5
+ @mixin center-grid-row-nested
6
+ margin-right: -(center-grid-column-gutter())
7
+ margin-left: -(center-grid-column-gutter())
8
+
9
+ // Output the width property of a grid column.
10
+ // @param [Integer] Number of columns to span.
11
+ @mixin center-grid-column-width( $columns )
12
+ width: center-grid-column-width( $columns )
13
+
14
+ // Output the gutter properties of a grid column.
15
+ @mixin center-grid-column-gutter
16
+ margin-right: center-grid-column-gutter()
17
+ margin-left: center-grid-column-gutter()
18
+
19
+ // Output properties for a right offset grid column.
20
+ // @param [Integer] Number of columns to offset by.
21
+ @mixin center-grid-column-offset-right( $columns )
22
+ margin-right: center-grid-column-offset( $columns )
23
+
24
+ // Output properties for a left offset grid column.
25
+ // @param [Integer] Number of columns to offset by.
26
+ @mixin center-grid-column-offset-left( $columns )
27
+ margin-left: center-grid-column-offset( $columns )
28
+
29
+ // Output properties to push a grid column.
30
+ // @param [Integer] Number of columns to push by.
31
+ @mixin center-grid-column-push( $columns )
32
+ left: center-grid-column-width( $columns ) + center-grid-column-gutter() * 2
33
+
34
+ // Output properties to pull a grid column.
35
+ // @param [Integer] Number of columns to pull by.
36
+ @mixin center-grid-column-pull( $columns )
37
+ right: center-grid-column-width( $columns ) + center-grid-column-gutter() * 2
@@ -0,0 +1,19 @@
1
+ // Full grid functions
2
+
3
+
4
+ // Determines a grid column width.
5
+ // @param $columns [Integer] Number of columns to span.
6
+ // @return [Integer] The grid column width.
7
+ @function full-grid-column-width( $columns )
8
+ @return px-to-percent( ($columns * $grid-column-width), $grid-max-width )
9
+
10
+ // Determines a grid column offset.
11
+ // @param $columns [Integer] Number of columns to offset by.
12
+ // @return [Integer] The grid column offset.
13
+ @function full-grid-column-offset( $columns )
14
+ @return px-to-percent( ($columns * $grid-column-width), $grid-max-width )
15
+
16
+ // Determines a grid column gutter width.
17
+ // @return [Integer] The grid column gutter width.
18
+ @function full-grid-column-gutter()
19
+ @return px-to-percent( $grid-gutter-width, $grid-max-width )
@@ -0,0 +1,35 @@
1
+ // Full grid mixins
2
+
3
+
4
+ // Output the grid row properties for a nested row.
5
+ @mixin full-grid-row-nested
6
+
7
+ // Output the width property of a grid column.
8
+ // @param [Integer] Number of columns to span.
9
+ @mixin full-grid-column-width( $columns )
10
+ width: full-grid-column-width( $columns )
11
+
12
+ // Output the gutter properties of a grid column.
13
+ @mixin full-grid-column-gutter
14
+ margin-right: 0
15
+ margin-left: 0
16
+
17
+ // Output properties for a right offset grid column.
18
+ // @param [Integer] Number of columns to offset by.
19
+ @mixin full-grid-column-offset-right( $columns )
20
+ margin-right: full-grid-column-offset( $columns )
21
+
22
+ // Output properties for a left offset grid column.
23
+ // @param [Integer] Number of columns to offset by.
24
+ @mixin full-grid-column-offset-left( $columns )
25
+ margin-left: full-grid-column-offset( $columns )
26
+
27
+ // Output properties to push a grid column.
28
+ // @param [Integer] Number of columns to push by.
29
+ @mixin full-grid-column-push( $columns )
30
+ left: full-grid-column-width( $columns )
31
+
32
+ // Output properties to pull a grid column.
33
+ // @param [Integer] Number of columns to pull by.
34
+ @mixin full-grid-column-pull( $columns )
35
+ right: full-grid-column-width( $columns )
@@ -0,0 +1,19 @@
1
+ // Left grid functions
2
+
3
+
4
+ // Determines a grid column width.
5
+ // @param $columns [Integer] Number of columns to span.
6
+ // @return [Integer] The grid column width.
7
+ @function left-grid-column-width( $columns )
8
+ @return px-to-percent( ($columns * $grid-column-width) - ($grid-gutter-width * 2), $grid-max-width )
9
+
10
+ // Determines a grid column offset.
11
+ // @param $columns [Integer] Number of columns to offset by.
12
+ // @return [Integer] The grid column offset.
13
+ @function left-grid-column-offset( $columns )
14
+ @return px-to-percent( ($columns * $grid-column-width) + $grid-gutter-width, $grid-max-width )
15
+
16
+ // Determines a grid column gutter width.
17
+ // @return [Integer] The grid column gutter width.
18
+ @function left-grid-column-gutter()
19
+ @return px-to-percent( $grid-gutter-width, $grid-max-width )
@@ -0,0 +1,36 @@
1
+ // Left grid mixins
2
+
3
+
4
+ // Output the grid row properties for a nested row.
5
+ @mixin left-grid-row-nested
6
+ margin-right: -(left-grid-column-gutter())
7
+ margin-left: -(left-grid-column-gutter())
8
+
9
+ // Output the width property of a grid column.
10
+ // @param [Integer] Number of columns to span.
11
+ @mixin left-grid-column-width( $columns )
12
+ width: left-grid-column-width( $columns ) + left-grid-column-gutter()
13
+
14
+ // Output the gutter properties of a grid column.
15
+ @mixin left-grid-column-gutter
16
+ margin-left: left-grid-column-gutter()
17
+
18
+ // Output properties for a right offset grid column.
19
+ // @param [Integer] Number of columns to offset by.
20
+ @mixin left-grid-column-offset-right( $columns )
21
+ margin-right: left-grid-column-offset( $columns ) - left-grid-column-gutter()
22
+
23
+ // Output properties for a left offset grid column.
24
+ // @param [Integer] Number of columns to offset by.
25
+ @mixin left-grid-column-offset-left( $columns )
26
+ margin-left: left-grid-column-offset( $columns )
27
+
28
+ // Output properties to push a grid column.
29
+ // @param [Integer] Number of columns to push by.
30
+ @mixin left-grid-column-push( $columns )
31
+ left: left-grid-column-width( $columns ) + (left-grid-column-gutter() * 2)
32
+
33
+ // Output properties to pull a grid column.
34
+ // @param [Integer] Number of columns to pull by.
35
+ @mixin left-grid-column-pull( $columns )
36
+ right: left-grid-column-width( $columns ) + (left-grid-column-gutter() * 2)
@@ -0,0 +1,19 @@
1
+ // Right grid functions
2
+
3
+
4
+ // Determines a grid column width.
5
+ // @param $columns [Integer] Number of columns to span.
6
+ // @return [Integer] The grid column width.
7
+ @function right-grid-column-width( $columns )
8
+ @return px-to-percent( ($columns * $grid-column-width) - ($grid-gutter-width * 2), $grid-max-width )
9
+
10
+ // Determines a grid column offset.
11
+ // @param $columns [Integer] Number of columns to offset by.
12
+ // @return [Integer] The grid column offset.
13
+ @function right-grid-column-offset( $columns )
14
+ @return px-to-percent( ($columns * $grid-column-width) + $grid-gutter-width, $grid-max-width )
15
+
16
+ // Determines a grid column gutter width.
17
+ // @return [Integer] The grid column gutter width.
18
+ @function right-grid-column-gutter()
19
+ @return px-to-percent( $grid-gutter-width, $grid-max-width )
@@ -0,0 +1,36 @@
1
+ // Right grid mixins
2
+
3
+
4
+ // Output the grid row properties for a nested row.
5
+ @mixin right-grid-row-nested
6
+ margin-right: -(right-grid-column-gutter())
7
+ margin-left: -(right-grid-column-gutter())
8
+
9
+ // Output the width property of a grid column.
10
+ // @param [Integer] Number of columns to span.
11
+ @mixin right-grid-column-width( $columns )
12
+ width: right-grid-column-width( $columns ) + right-grid-column-gutter()
13
+
14
+ // Output the gutter properties of a grid column.
15
+ @mixin right-grid-column-gutter
16
+ margin-right: right-grid-column-gutter()
17
+
18
+ // Output properties for a right offset grid column.
19
+ // @param [Integer] Number of columns to offset by.
20
+ @mixin right-grid-column-offset-right( $columns )
21
+ margin-right: right-grid-column-offset( $columns )
22
+
23
+ // Output properties for a left offset grid column.
24
+ // @param [Integer] Number of columns to offset by.
25
+ @mixin right-grid-column-offset-left( $columns )
26
+ margin-left: right-grid-column-offset( $columns ) - right-grid-column-gutter()
27
+
28
+ // Output properties to push a grid column.
29
+ // @param [Integer] Number of columns to push by.
30
+ @mixin right-grid-column-push( $columns )
31
+ left: right-grid-column-width( $columns ) + (right-grid-column-gutter() * 2)
32
+
33
+ // Output properties to pull a grid column.
34
+ // @param [Integer] Number of columns to pull by.
35
+ @mixin right-grid-column-pull( $columns )
36
+ right: right-grid-column-width( $columns ) + (right-grid-column-gutter() * 2)
@@ -0,0 +1,2 @@
1
+ @function px-to-percent( $target, $context )
2
+ @return $target / $context * 100%
@@ -0,0 +1,9 @@
1
+ @mixin grid-clear()
2
+ *zoom: 1
3
+ &:before,
4
+ &:after
5
+ content: ''
6
+ display: table
7
+ &:after
8
+ clear: both
9
+
@@ -0,0 +1,13 @@
1
+ // grid type & size
2
+ $grid-type: 'center'
3
+ $grid-max-width: 960px
4
+ $grid-gutter-width: 20px
5
+ $grid-column-count: 12
6
+
7
+ // grid generated class names
8
+ $grid-namespace-base: 'grid'
9
+ $grid-namespace-row: 'row'
10
+ $grid-namespace-column: 'column'
11
+
12
+ // style the grid (useful for debugging layouts)
13
+ $grid-show: true