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.
- checksums.yaml +7 -0
- data/.gitignore +19 -0
- data/Gemfile +4 -0
- data/LICENSE.txt +22 -0
- data/README.md +29 -0
- data/Rakefile +1 -0
- data/gridgraphy.gemspec +21 -0
- data/lib/gridgraphy/version.rb +3 -0
- data/lib/gridgraphy.rb +9 -0
- data/stylesheets/_gridgraphy.sass +2 -0
- data/stylesheets/gridgraphy/_scaffolding.sass +34 -0
- data/stylesheets/gridgraphy/config/_config.sass +12 -0
- data/stylesheets/gridgraphy/grids/base/_functions.sass +52 -0
- data/stylesheets/gridgraphy/grids/base/_mixins.sass +137 -0
- data/stylesheets/gridgraphy/grids/types/center/.DS_Store +0 -0
- data/stylesheets/gridgraphy/grids/types/center/_functions.sass +19 -0
- data/stylesheets/gridgraphy/grids/types/center/_mixins.sass +37 -0
- data/stylesheets/gridgraphy/grids/types/full/.DS_Store +0 -0
- data/stylesheets/gridgraphy/grids/types/full/_functions.sass +19 -0
- data/stylesheets/gridgraphy/grids/types/full/_mixins.sass +35 -0
- data/stylesheets/gridgraphy/grids/types/left/.DS_Store +0 -0
- data/stylesheets/gridgraphy/grids/types/left/_functions.sass +19 -0
- data/stylesheets/gridgraphy/grids/types/left/_mixins.sass +36 -0
- data/stylesheets/gridgraphy/grids/types/right/_functions.sass +19 -0
- data/stylesheets/gridgraphy/grids/types/right/_mixins.sass +36 -0
- data/stylesheets/gridgraphy/utils/.DS_Store +0 -0
- data/stylesheets/gridgraphy/utils/_functions.sass +2 -0
- data/stylesheets/gridgraphy/utils/_mixins.sass +9 -0
- data/templates/example/examples/center/config/_config.sass +13 -0
- data/templates/example/examples/center/index.html +121 -0
- data/templates/example/examples/center/screen.sass +2 -0
- data/templates/example/examples/full/config/_config.sass +13 -0
- data/templates/example/examples/full/index.html +121 -0
- data/templates/example/examples/full/screen.sass +2 -0
- data/templates/example/examples/left/config/_config.sass +13 -0
- data/templates/example/examples/left/index.html +121 -0
- data/templates/example/examples/left/screen.sass +2 -0
- data/templates/example/examples/right/config/_config.sass +13 -0
- data/templates/example/examples/right/index.html +121 -0
- data/templates/example/examples/right/screen.sass +2 -0
- data/templates/example/manifest.rb +29 -0
- data/templates/scaffolding/config/_config.sass +13 -0
- data/templates/scaffolding/manifest.rb +16 -0
- data/templates/scaffolding/screen.sass +2 -0
- 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
data/Gemfile
ADDED
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"
|
data/gridgraphy.gemspec
ADDED
@@ -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
|
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,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 )
|
Binary file
|
@@ -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
|
Binary file
|
@@ -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 )
|
Binary file
|
@@ -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)
|
Binary file
|
@@ -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
|