gridgraphy 0.0.2
Sign up to get free protection for your applications and to get access to all the features.
- 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
|