gridgraphy 0.0.4 → 0.1.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/README.md +6 -12
- data/lib/gridgraphy/version.rb +1 -1
- data/stylesheets/gridgraphy/config/_config.sass +1 -0
- data/stylesheets/gridgraphy/grids/types/center/_mixins.sass +14 -5
- data/stylesheets/gridgraphy/grids/types/full/_mixins.sass +2 -2
- data/stylesheets/gridgraphy/grids/types/left/_mixins.sass +9 -3
- data/stylesheets/gridgraphy/grids/types/right/_mixins.sass +9 -3
- data/templates/example/examples/center/config/_config.sass +1 -0
- data/templates/example/examples/full/config/_config.sass +1 -0
- data/templates/example/examples/left/config/_config.sass +1 -0
- data/templates/example/examples/right/config/_config.sass +1 -0
- data/templates/scaffolding/config/_config.sass +1 -0
- metadata +3 -3
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA1:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: ddf8192fda4cedde1c367489517f80e911340e9c
|
|
4
|
+
data.tar.gz: 05d5d2c5865c18e4611b0c8e7f7ee0e8d4a7e7ae
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: f8bcf6e36c74807afcb79b17f81ecd52f6f7386684772cbe4d5690cc7828c971852451bc4b9c08c5e6df0543c53765de3e94e1c4086173f0837e08d4a967ae45
|
|
7
|
+
data.tar.gz: e50d8c46d02045676312052945c9d1fda973d065b9557365a14d06d309b5fdd6e3a9c231cb99ed8bcdfc3daabcf3e27e0ea385a22571fa9349b3584cac2955af
|
data/README.md
CHANGED
|
@@ -47,6 +47,7 @@ You can import the Gridgraphy extension by adding the following line to one of y
|
|
|
47
47
|
You can mix and match different configurations to acheive the exact type of grid you need.
|
|
48
48
|
|
|
49
49
|
- **$grid-type** [default: **full**] - The [type](#types) of grid. [[full](#full-grid), [right](#right-grid), [center](#center-grid), [left](#left-grid)]
|
|
50
|
+
- **$grid-gutter-type** [default: **margin**] - The type of spacing to use for a columns gutter. [margin, padding]
|
|
50
51
|
- **$grid-max-width** [default: **960px**] - The maximum width of the grid in px.
|
|
51
52
|
- **$grid-gutter-width** [default: **20px**] - The gutter spacing in px between columns.
|
|
52
53
|
- **$grid-column-count** [default: **12**] - The total number of columns in the grid.
|
|
@@ -82,19 +83,12 @@ Or you can add scaffolding to an existing project by adding the following line t
|
|
|
82
83
|
|
|
83
84
|
|
|
84
85
|
# Types
|
|
85
|
-
Gridgraphy ships with **4** different types of
|
|
86
|
+
Gridgraphy ships with **4** different types of layouts. By default grids are created using the value you've set for the ```$grid-type``` [configuration variable](#configurable-variables), but can be set manually on each ```grid-*``` mixin or function.
|
|
86
87
|
|
|
87
|
-
|
|
88
|
-
The
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
The right grid type has its gutter distributed to the right side of each column.
|
|
92
|
-
|
|
93
|
-
## Center Grid
|
|
94
|
-
The center grid type has its gutter split in half and evenly distributed to both sides of each column.
|
|
95
|
-
|
|
96
|
-
## Left Grid
|
|
97
|
-
The left grid type has its gutter distributed the the left side of each column.
|
|
88
|
+
- **Full** - The full grid type does not have a gutter between columns.
|
|
89
|
+
- **Right** - The right grid type has its gutter distributed to the right side of each column.
|
|
90
|
+
- **Center** - The center grid type has its gutter split in half and evenly distributed to both sides of each column.
|
|
91
|
+
- **Left** - The left grid type has its gutter distributed the the left side of each column.
|
|
98
92
|
|
|
99
93
|
|
|
100
94
|
# Mixins
|
data/lib/gridgraphy/version.rb
CHANGED
|
@@ -9,22 +9,31 @@
|
|
|
9
9
|
// Output the width property of a grid column.
|
|
10
10
|
// @param [Integer] Number of columns to span.
|
|
11
11
|
@mixin center-grid-column-width( $columns )
|
|
12
|
-
|
|
12
|
+
@if $grid-gutter-type == 'margin'
|
|
13
|
+
width: center-grid-column-width( $columns )
|
|
14
|
+
@else
|
|
15
|
+
width: full-grid-column-width( $columns )
|
|
13
16
|
|
|
14
17
|
// Output the gutter properties of a grid column.
|
|
15
18
|
@mixin center-grid-column-gutter
|
|
16
|
-
|
|
17
|
-
|
|
19
|
+
#{$grid-gutter-type}-right: center-grid-column-gutter()
|
|
20
|
+
#{$grid-gutter-type}-left: center-grid-column-gutter()
|
|
18
21
|
|
|
19
22
|
// Output properties for a right offset grid column.
|
|
20
23
|
// @param [Integer] Number of columns to offset by.
|
|
21
24
|
@mixin center-grid-column-offset-right( $columns )
|
|
22
|
-
|
|
25
|
+
@if $grid-gutter-type == 'margin'
|
|
26
|
+
margin-right: center-grid-column-offset( $columns )
|
|
27
|
+
@else
|
|
28
|
+
margin-right: center-grid-column-offset( $columns ) - center-grid-column-gutter()
|
|
23
29
|
|
|
24
30
|
// Output properties for a left offset grid column.
|
|
25
31
|
// @param [Integer] Number of columns to offset by.
|
|
26
32
|
@mixin center-grid-column-offset-left( $columns )
|
|
27
|
-
|
|
33
|
+
@if $grid-gutter-type == 'margin'
|
|
34
|
+
margin-left: center-grid-column-offset( $columns )
|
|
35
|
+
@else
|
|
36
|
+
margin-left: center-grid-column-offset( $columns ) - center-grid-column-gutter()
|
|
28
37
|
|
|
29
38
|
// Output properties to push a grid column.
|
|
30
39
|
// @param [Integer] Number of columns to push by.
|
|
@@ -11,8 +11,8 @@
|
|
|
11
11
|
|
|
12
12
|
// Output the gutter properties of a grid column.
|
|
13
13
|
@mixin full-grid-column-gutter
|
|
14
|
-
|
|
15
|
-
|
|
14
|
+
#{$grid-gutter-type}-right: 0
|
|
15
|
+
#{$grid-gutter-type}-left: 0
|
|
16
16
|
|
|
17
17
|
// Output properties for a right offset grid column.
|
|
18
18
|
// @param [Integer] Number of columns to offset by.
|
|
@@ -9,11 +9,14 @@
|
|
|
9
9
|
// Output the width property of a grid column.
|
|
10
10
|
// @param [Integer] Number of columns to span.
|
|
11
11
|
@mixin left-grid-column-width( $columns )
|
|
12
|
-
|
|
12
|
+
@if $grid-gutter-type == 'margin'
|
|
13
|
+
width: left-grid-column-width( $columns ) + left-grid-column-gutter()
|
|
14
|
+
@else
|
|
15
|
+
width: full-grid-column-width( $columns )
|
|
13
16
|
|
|
14
17
|
// Output the gutter properties of a grid column.
|
|
15
18
|
@mixin left-grid-column-gutter
|
|
16
|
-
|
|
19
|
+
#{$grid-gutter-type}-left: left-grid-column-gutter()
|
|
17
20
|
|
|
18
21
|
// Output properties for a right offset grid column.
|
|
19
22
|
// @param [Integer] Number of columns to offset by.
|
|
@@ -23,7 +26,10 @@
|
|
|
23
26
|
// Output properties for a left offset grid column.
|
|
24
27
|
// @param [Integer] Number of columns to offset by.
|
|
25
28
|
@mixin left-grid-column-offset-left( $columns )
|
|
26
|
-
|
|
29
|
+
@if $grid-gutter-type == 'margin'
|
|
30
|
+
margin-left: left-grid-column-offset( $columns )
|
|
31
|
+
@else
|
|
32
|
+
margin-left: left-grid-column-offset( $columns ) - left-grid-column-gutter()
|
|
27
33
|
|
|
28
34
|
// Output properties to push a grid column.
|
|
29
35
|
// @param [Integer] Number of columns to push by.
|
|
@@ -9,16 +9,22 @@
|
|
|
9
9
|
// Output the width property of a grid column.
|
|
10
10
|
// @param [Integer] Number of columns to span.
|
|
11
11
|
@mixin right-grid-column-width( $columns )
|
|
12
|
-
|
|
12
|
+
@if $grid-gutter-type == 'margin'
|
|
13
|
+
width: right-grid-column-width( $columns ) + right-grid-column-gutter()
|
|
14
|
+
@else
|
|
15
|
+
width: full-grid-column-width( $columns )
|
|
13
16
|
|
|
14
17
|
// Output the gutter properties of a grid column.
|
|
15
18
|
@mixin right-grid-column-gutter
|
|
16
|
-
|
|
19
|
+
#{$grid-gutter-type}-right: right-grid-column-gutter()
|
|
17
20
|
|
|
18
21
|
// Output properties for a right offset grid column.
|
|
19
22
|
// @param [Integer] Number of columns to offset by.
|
|
20
23
|
@mixin right-grid-column-offset-right( $columns )
|
|
21
|
-
|
|
24
|
+
@if $grid-gutter-type == 'margin'
|
|
25
|
+
margin-right: right-grid-column-offset( $columns )
|
|
26
|
+
@else
|
|
27
|
+
margin-right: right-grid-column-offset( $columns ) - right-grid-column-gutter()
|
|
22
28
|
|
|
23
29
|
// Output properties for a left offset grid column.
|
|
24
30
|
// @param [Integer] Number of columns to offset by.
|
metadata
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: gridgraphy
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 0.0
|
|
4
|
+
version: 0.1.0
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- Jason Bellamy
|
|
8
8
|
autorequire:
|
|
9
9
|
bindir: bin
|
|
10
10
|
cert_chain: []
|
|
11
|
-
date: 2013-10-
|
|
11
|
+
date: 2013-10-14 00:00:00.000000000 Z
|
|
12
12
|
dependencies:
|
|
13
13
|
- !ruby/object:Gem::Dependency
|
|
14
14
|
name: compass
|
|
@@ -105,7 +105,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
|
|
|
105
105
|
version: '0'
|
|
106
106
|
requirements: []
|
|
107
107
|
rubyforge_project:
|
|
108
|
-
rubygems_version: 2.
|
|
108
|
+
rubygems_version: 2.1.8
|
|
109
109
|
signing_key:
|
|
110
110
|
specification_version: 4
|
|
111
111
|
summary: Gridgraphy is a highly configurable, and incredibly flexible Compass extension
|