gridgraphy 0.0.4 → 0.1.0
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 +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
|