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
data/templates/example/examples/center/index.html ADDED
@@ -0,0 +1,121 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <title></title>
5
+ <link href="../../stylesheets/examples/center/screen.css" rel="stylesheet" type="text/css">
6
+ </head>
7
+ <body>
8
+
9
+ <h1>Center Grid Examples</h1>
10
+ <p>The <strong>center grid</strong> evenly distributes the gutter on both sides of the column.</p>
11
+
12
+ <div class="grid-row">
13
+ <div class="grid-column-12">12 columns</div>
14
+ </div>
15
+ <div class="grid-row">
16
+ <div class="grid-column-2">2 columns</div>
17
+ <div class="grid-column-10">10 columns</div>
18
+ </div>
19
+ <div class="grid-row">
20
+ <div class="grid-column-3">3 columns</div>
21
+ <div class="grid-column-9">9 columns</div>
22
+ </div>
23
+ <div class="grid-row">
24
+ <div class="grid-column-4">4 columns</div>
25
+ <div class="grid-column-8">8 column</div>
26
+ </div>
27
+ <div class="grid-row">
28
+ <div class="grid-column-5">5 columns</div>
29
+ <div class="grid-column-7">7 columns</div>
30
+ </div>
31
+ <div class="grid-row">
32
+ <div class="grid-column-6">6 columns</div>
33
+ <div class="grid-column-6">6 columns</div>
34
+ </div>
35
+ <div class="grid-row">
36
+ <div class="grid-column-7">7 columns</div>
37
+ <div class="grid-column-5">5 columns</div>
38
+ </div>
39
+ <div class="grid-row">
40
+ <div class="grid-column-8">8 columns</div>
41
+ <div class="grid-column-4">4 columns</div>
42
+ </div>
43
+ <div class="grid-row">
44
+ <div class="grid-column-9">9 columns</div>
45
+ <div class="grid-column-3">3 columns</div>
46
+ </div>
47
+ <div class="grid-row">
48
+ <div class="grid-column-10">10 columns</div>
49
+ <div class="grid-column-2">2 columns</div>
50
+ </div>
51
+
52
+ <div class="grid-row">
53
+ <div class="grid-column-12">12 columns</div>
54
+ </div>
55
+ <div class="grid-row">
56
+ <div class="grid-column-6">6 columns</div>
57
+ <div class="grid-column-6">6 columns</div>
58
+ </div>
59
+ <div class="grid-row">
60
+ <div class="grid-column-4">4 columns</div>
61
+ <div class="grid-column-4">4 columns</div>
62
+ <div class="grid-column-4">4 columns</div>
63
+ </div>
64
+ <div class="grid-row">
65
+ <div class="grid-column-3">3 columns</div>
66
+ <div class="grid-column-3">3 columns</div>
67
+ <div class="grid-column-3">3 columns</div>
68
+ <div class="grid-column-3">3 columns</div>
69
+ </div>
70
+ <div class="grid-row">
71
+ <div class="grid-column-2">2 columns</div>
72
+ <div class="grid-column-2">2 columns</div>
73
+ <div class="grid-column-2">2 columns</div>
74
+ <div class="grid-column-2">2 columns</div>
75
+ <div class="grid-column-2">2 columns</div>
76
+ <div class="grid-column-2">2 columns</div>
77
+ </div>
78
+
79
+ <h2>Offset columns</h2>
80
+ <p>Offsets allow you to create extra white space between columns.</p>
81
+ <div class="grid-row">
82
+ <div class="grid-column-2">4</div>
83
+ <div class="grid-column-4 offset-left-by-4">4 offset left by 4</div>
84
+ </div>
85
+ <div class="grid-row">
86
+ <div class="grid-column-4 offset-left-by-2">4 offset left by 2</div>
87
+ <div class="grid-column-4 offset-left-by-2">4 offset left by 2</div>
88
+ </div>
89
+ <div class="grid-row">
90
+ <div class="grid-column-6 offset-left-by-6">6 offset left by 6</div>
91
+ </div>
92
+
93
+ <div class="grid-row">
94
+ <div class="grid-column-4 offset-right-by-4">4 offset right by 4</div>
95
+ <div class="grid-column-2">4</div>
96
+ </div>
97
+ <div class="grid-row">
98
+ <div class="grid-column-4 offset-right-by-2">4 offset right by 2</div>
99
+ <div class="grid-column-4 offset-right-by-2">4 offset right by 2</div>
100
+ </div>
101
+ <div class="grid-row">
102
+ <div class="grid-column-6 offset-right-by-6">6 offset right by 6</div>
103
+ </div>
104
+
105
+ <h2>Push / Pull columns</h2>
106
+ <p>Pushing &amp; pulling allows you to change the visual ordering of a column.</p>
107
+ <div class="grid-row">
108
+ <div class="grid-column-4 pushed-by-8">4 pushed by 8</div>
109
+ <div class="grid-column-8 pulled-by-4">8 pulled by 4</div>
110
+ </div>
111
+ <div class="grid-row">
112
+ <div class="grid-column-6 pushed-by-6">6 pushed by 6</div>
113
+ <div class="grid-column-6 pulled-by-6">6 pulled by 6</div>
114
+ </div>
115
+ <div class="grid-row">
116
+ <div class="grid-column-8 pushed-by-4">8 pushed by 4</div>
117
+ <div class="grid-column-4 pulled-by-8">4 pulled by 8</div>
118
+ </div>
119
+
120
+ </body>
121
+ </html>
data/templates/example/examples/center/screen.sass ADDED
@@ -0,0 +1,2 @@
1
+ @import config/config
2
+ @import gridgraphy/scaffolding
data/templates/example/examples/full/config/_config.sass ADDED
@@ -0,0 +1,13 @@
1
+ // grid type & size
2
+ $grid-type: 'full'
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
data/templates/example/examples/full/index.html ADDED
@@ -0,0 +1,121 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <title></title>
5
+ <link href="../../stylesheets/examples/full/screen.css" rel="stylesheet" type="text/css">
6
+ </head>
7
+ <body>
8
+
9
+ <h1>Full Grid Examples</h1>
10
+ <p>The <strong>full grid</strong> does not have a gutter on the column.</p>
11
+
12
+ <div class="grid-row">
13
+ <div class="grid-column-12">12 columns</div>
14
+ </div>
15
+ <div class="grid-row">
16
+ <div class="grid-column-2">2 columns</div>
17
+ <div class="grid-column-10">10 columns</div>
18
+ </div>
19
+ <div class="grid-row">
20
+ <div class="grid-column-3">3 columns</div>
21
+ <div class="grid-column-9">9 columns</div>
22
+ </div>
23
+ <div class="grid-row">
24
+ <div class="grid-column-4">4 columns</div>
25
+ <div class="grid-column-8">8 column</div>
26
+ </div>
27
+ <div class="grid-row">
28
+ <div class="grid-column-5">5 columns</div>
29
+ <div class="grid-column-7">7 columns</div>
30
+ </div>
31
+ <div class="grid-row">
32
+ <div class="grid-column-6">6 columns</div>
33
+ <div class="grid-column-6">6 columns</div>
34
+ </div>
35
+ <div class="grid-row">
36
+ <div class="grid-column-7">7 columns</div>
37
+ <div class="grid-column-5">5 columns</div>
38
+ </div>
39
+ <div class="grid-row">
40
+ <div class="grid-column-8">8 columns</div>
41
+ <div class="grid-column-4">4 columns</div>
42
+ </div>
43
+ <div class="grid-row">
44
+ <div class="grid-column-9">9 columns</div>
45
+ <div class="grid-column-3">3 columns</div>
46
+ </div>
47
+ <div class="grid-row">
48
+ <div class="grid-column-10">10 columns</div>
49
+ <div class="grid-column-2">2 columns</div>
50
+ </div>
51
+
52
+ <div class="grid-row">
53
+ <div class="grid-column-12">12 columns</div>
54
+ </div>
55
+ <div class="grid-row">
56
+ <div class="grid-column-6">6 columns</div>
57
+ <div class="grid-column-6">6 columns</div>
58
+ </div>
59
+ <div class="grid-row">
60
+ <div class="grid-column-4">4 columns</div>
61
+ <div class="grid-column-4">4 columns</div>
62
+ <div class="grid-column-4">4 columns</div>
63
+ </div>
64
+ <div class="grid-row">
65
+ <div class="grid-column-3">3 columns</div>
66
+ <div class="grid-column-3">3 columns</div>
67
+ <div class="grid-column-3">3 columns</div>
68
+ <div class="grid-column-3">3 columns</div>
69
+ </div>
70
+ <div class="grid-row">
71
+ <div class="grid-column-2">2 columns</div>
72
+ <div class="grid-column-2">2 columns</div>
73
+ <div class="grid-column-2">2 columns</div>
74
+ <div class="grid-column-2">2 columns</div>
75
+ <div class="grid-column-2">2 columns</div>
76
+ <div class="grid-column-2">2 columns</div>
77
+ </div>
78
+
79
+ <h2>Offset columns</h2>
80
+ <p>Offsets allow you to create extra white space between columns.</p>
81
+ <div class="grid-row">
82
+ <div class="grid-column-2">4</div>
83
+ <div class="grid-column-4 offset-left-by-4">4 offset left by 4</div>
84
+ </div>
85
+ <div class="grid-row">
86
+ <div class="grid-column-4 offset-left-by-2">4 offset left by 2</div>
87
+ <div class="grid-column-4 offset-left-by-2">4 offset left by 2</div>
88
+ </div>
89
+ <div class="grid-row">
90
+ <div class="grid-column-6 offset-left-by-6">6 offset left by 6</div>
91
+ </div>
92
+
93
+ <div class="grid-row">
94
+ <div class="grid-column-4 offset-right-by-4">4 offset right by 4</div>
95
+ <div class="grid-column-2">4</div>
96
+ </div>
97
+ <div class="grid-row">
98
+ <div class="grid-column-4 offset-right-by-2">4 offset right by 2</div>
99
+ <div class="grid-column-4 offset-right-by-2">4 offset right by 2</div>
100
+ </div>
101
+ <div class="grid-row">
102
+ <div class="grid-column-6 offset-right-by-6">6 offset right by 6</div>
103
+ </div>
104
+
105
+ <h2>Push / Pull columns</h2>
106
+ <p>Pushing &amp; pulling allows you to change the visual ordering of a column.</p>
107
+ <div class="grid-row">
108
+ <div class="grid-column-4 pushed-by-8">4 pushed by 8</div>
109
+ <div class="grid-column-8 pulled-by-4">8 pulled by 4</div>
110
+ </div>
111
+ <div class="grid-row">
112
+ <div class="grid-column-6 pushed-by-6">6 pushed by 6</div>
113
+ <div class="grid-column-6 pulled-by-6">6 pulled by 6</div>
114
+ </div>
115
+ <div class="grid-row">
116
+ <div class="grid-column-8 pushed-by-4">8 pushed by 4</div>
117
+ <div class="grid-column-4 pulled-by-8">4 pulled by 8</div>
118
+ </div>
119
+
120
+ </body>
121
+ </html>
data/templates/example/examples/full/screen.sass ADDED
@@ -0,0 +1,2 @@
1
+ @import config/config
2
+ @import gridgraphy/scaffolding
data/templates/example/examples/left/config/_config.sass ADDED
@@ -0,0 +1,13 @@
1
+ // grid type & size
2
+ $grid-type: 'left'
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
data/templates/example/examples/left/index.html ADDED
@@ -0,0 +1,121 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <title></title>
5
+ <link href="../../stylesheets/examples/left/screen.css" rel="stylesheet" type="text/css">
6
+ </head>
7
+ <body>
8
+
9
+ <h1>Left Grid Examples</h1>
10
+ <p>The <strong>left grid</strong> applies the gutter on the left side of the column.</p>
11
+
12
+ <div class="grid-row">
13
+ <div class="grid-column-12">12 columns</div>
14
+ </div>
15
+ <div class="grid-row">
16
+ <div class="grid-column-2">2 columns</div>
17
+ <div class="grid-column-10">10 columns</div>
18
+ </div>
19
+ <div class="grid-row">
20
+ <div class="grid-column-3">3 columns</div>
21
+ <div class="grid-column-9">9 columns</div>
22
+ </div>
23
+ <div class="grid-row">
24
+ <div class="grid-column-4">4 columns</div>
25
+ <div class="grid-column-8">8 column</div>
26
+ </div>
27
+ <div class="grid-row">
28
+ <div class="grid-column-5">5 columns</div>
29
+ <div class="grid-column-7">7 columns</div>
30
+ </div>
31
+ <div class="grid-row">
32
+ <div class="grid-column-6">6 columns</div>
33
+ <div class="grid-column-6">6 columns</div>
34
+ </div>
35
+ <div class="grid-row">
36
+ <div class="grid-column-7">7 columns</div>
37
+ <div class="grid-column-5">5 columns</div>
38
+ </div>
39
+ <div class="grid-row">
40
+ <div class="grid-column-8">8 columns</div>
41
+ <div class="grid-column-4">4 columns</div>
42
+ </div>
43
+ <div class="grid-row">
44
+ <div class="grid-column-9">9 columns</div>
45
+ <div class="grid-column-3">3 columns</div>
46
+ </div>
47
+ <div class="grid-row">
48
+ <div class="grid-column-10">10 columns</div>
49
+ <div class="grid-column-2">2 columns</div>
50
+ </div>
51
+
52
+ <div class="grid-row">
53
+ <div class="grid-column-12">12 columns</div>
54
+ </div>
55
+ <div class="grid-row">
56
+ <div class="grid-column-6">6 columns</div>
57
+ <div class="grid-column-6">6 columns</div>
58
+ </div>
59
+ <div class="grid-row">
60
+ <div class="grid-column-4">4 columns</div>
61
+ <div class="grid-column-4">4 columns</div>
62
+ <div class="grid-column-4">4 columns</div>
63
+ </div>
64
+ <div class="grid-row">
65
+ <div class="grid-column-3">3 columns</div>
66
+ <div class="grid-column-3">3 columns</div>
67
+ <div class="grid-column-3">3 columns</div>
68
+ <div class="grid-column-3">3 columns</div>
69
+ </div>
70
+ <div class="grid-row">
71
+ <div class="grid-column-2">2 columns</div>
72
+ <div class="grid-column-2">2 columns</div>
73
+ <div class="grid-column-2">2 columns</div>
74
+ <div class="grid-column-2">2 columns</div>
75
+ <div class="grid-column-2">2 columns</div>
76
+ <div class="grid-column-2">2 columns</div>
77
+ </div>
78
+
79
+ <h2>Offset columns</h2>
80
+ <p>Offsets allow you to create extra white space between columns.</p>
81
+ <div class="grid-row">
82
+ <div class="grid-column-2">4</div>
83
+ <div class="grid-column-4 offset-left-by-4">4 offset left by 4</div>
84
+ </div>
85
+ <div class="grid-row">
86
+ <div class="grid-column-4 offset-left-by-2">4 offset left by 2</div>
87
+ <div class="grid-column-4 offset-left-by-2">4 offset left by 2</div>
88
+ </div>
89
+ <div class="grid-row">
90
+ <div class="grid-column-6 offset-left-by-6">6 offset left by 6</div>
91
+ </div>
92
+
93
+ <div class="grid-row">
94
+ <div class="grid-column-4 offset-right-by-4">4 offset right by 4</div>
95
+ <div class="grid-column-2">4</div>
96
+ </div>
97
+ <div class="grid-row">
98
+ <div class="grid-column-4 offset-right-by-2">4 offset right by 2</div>
99
+ <div class="grid-column-4 offset-right-by-2">4 offset right by 2</div>
100
+ </div>
101
+ <div class="grid-row">
102
+ <div class="grid-column-6 offset-right-by-6">6 offset right by 6</div>
103
+ </div>
104
+
105
+ <h2>Push / Pull columns</h2>
106
+ <p>Pushing &amp; pulling allows you to change the visual ordering of a column.</p>
107
+ <div class="grid-row">
108
+ <div class="grid-column-4 pushed-by-8">4 pushed by 8</div>
109
+ <div class="grid-column-8 pulled-by-4">8 pulled by 4</div>
110
+ </div>
111
+ <div class="grid-row">
112
+ <div class="grid-column-6 pushed-by-6">6 pushed by 6</div>
113
+ <div class="grid-column-6 pulled-by-6">6 pulled by 6</div>
114
+ </div>
115
+ <div class="grid-row">
116
+ <div class="grid-column-8 pushed-by-4">8 pushed by 4</div>
117
+ <div class="grid-column-4 pulled-by-8">4 pulled by 8</div>
118
+ </div>
119
+
120
+ </body>
121
+ </html>
data/templates/example/examples/left/screen.sass ADDED
@@ -0,0 +1,2 @@
1
+ @import config/config
2
+ @import gridgraphy/scaffolding
data/templates/example/examples/right/config/_config.sass ADDED
@@ -0,0 +1,13 @@
1
+ // grid type & size
2
+ $grid-type: 'right'
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
data/templates/example/examples/right/index.html ADDED
@@ -0,0 +1,121 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <title></title>
5
+ <link href="../../stylesheets/examples/right/screen.css" rel="stylesheet" type="text/css">
6
+ </head>
7
+ <body>
8
+
9
+ <h1>Right Grid Examples</h1>
10
+ <p>The <strong>right grid</strong> applies the gutter on the right side of the column.</p>
11
+
12
+ <div class="grid-row">
13
+ <div class="grid-column-12">12 columns</div>
14
+ </div>
15
+ <div class="grid-row">
16
+ <div class="grid-column-2">2 columns</div>
17
+ <div class="grid-column-10">10 columns</div>
18
+ </div>
19
+ <div class="grid-row">
20
+ <div class="grid-column-3">3 columns</div>
21
+ <div class="grid-column-9">9 columns</div>
22
+ </div>
23
+ <div class="grid-row">
24
+ <div class="grid-column-4">4 columns</div>
25
+ <div class="grid-column-8">8 column</div>
26
+ </div>
27
+ <div class="grid-row">
28
+ <div class="grid-column-5">5 columns</div>
29
+ <div class="grid-column-7">7 columns</div>
30
+ </div>
31
+ <div class="grid-row">
32
+ <div class="grid-column-6">6 columns</div>
33
+ <div class="grid-column-6">6 columns</div>
34
+ </div>
35
+ <div class="grid-row">
36
+ <div class="grid-column-7">7 columns</div>
37
+ <div class="grid-column-5">5 columns</div>
38
+ </div>
39
+ <div class="grid-row">
40
+ <div class="grid-column-8">8 columns</div>
41
+ <div class="grid-column-4">4 columns</div>
42
+ </div>
43
+ <div class="grid-row">
44
+ <div class="grid-column-9">9 columns</div>
45
+ <div class="grid-column-3">3 columns</div>
46
+ </div>
47
+ <div class="grid-row">
48
+ <div class="grid-column-10">10 columns</div>
49
+ <div class="grid-column-2">2 columns</div>
50
+ </div>
51
+
52
+ <div class="grid-row">
53
+ <div class="grid-column-12">12 columns</div>
54
+ </div>
55
+ <div class="grid-row">
56
+ <div class="grid-column-6">6 columns</div>
57
+ <div class="grid-column-6">6 columns</div>
58
+ </div>
59
+ <div class="grid-row">
60
+ <div class="grid-column-4">4 columns</div>
61
+ <div class="grid-column-4">4 columns</div>
62
+ <div class="grid-column-4">4 columns</div>
63
+ </div>
64
+ <div class="grid-row">
65
+ <div class="grid-column-3">3 columns</div>
66
+ <div class="grid-column-3">3 columns</div>
67
+ <div class="grid-column-3">3 columns</div>
68
+ <div class="grid-column-3">3 columns</div>
69
+ </div>
70
+ <div class="grid-row">
71
+ <div class="grid-column-2">2 columns</div>
72
+ <div class="grid-column-2">2 columns</div>
73
+ <div class="grid-column-2">2 columns</div>
74
+ <div class="grid-column-2">2 columns</div>
75
+ <div class="grid-column-2">2 columns</div>
76
+ <div class="grid-column-2">2 columns</div>
77
+ </div>
78
+
79
+ <h2>Offset columns</h2>
80
+ <p>Offsets allow you to create extra white space between columns.</p>
81
+ <div class="grid-row">
82
+ <div class="grid-column-2">4</div>
83
+ <div class="grid-column-4 offset-left-by-4">4 offset left by 4</div>
84
+ </div>
85
+ <div class="grid-row">
86
+ <div class="grid-column-4 offset-left-by-2">4 offset left by 2</div>
87
+ <div class="grid-column-4 offset-left-by-2">4 offset left by 2</div>
88
+ </div>
89
+ <div class="grid-row">
90
+ <div class="grid-column-6 offset-left-by-6">6 offset left by 6</div>
91
+ </div>
92
+
93
+ <div class="grid-row">
94
+ <div class="grid-column-4 offset-right-by-4">4 offset right by 4</div>
95
+ <div class="grid-column-2">4</div>
96
+ </div>
97
+ <div class="grid-row">
98
+ <div class="grid-column-4 offset-right-by-2">4 offset right by 2</div>
99
+ <div class="grid-column-4 offset-right-by-2">4 offset right by 2</div>
100
+ </div>
101
+ <div class="grid-row">
102
+ <div class="grid-column-6 offset-right-by-6">6 offset right by 6</div>
103
+ </div>
104
+
105
+ <h2>Push / Pull columns</h2>
106
+ <p>Pushing &amp; pulling allows you to change the visual ordering of a column.</p>
107
+ <div class="grid-row">
108
+ <div class="grid-column-4 pushed-by-8">4 pushed by 8</div>
109
+ <div class="grid-column-8 pulled-by-4">8 pulled by 4</div>
110
+ </div>
111
+ <div class="grid-row">
112
+ <div class="grid-column-6 pushed-by-6">6 pushed by 6</div>
113
+ <div class="grid-column-6 pulled-by-6">6 pulled by 6</div>
114
+ </div>
115
+ <div class="grid-row">
116
+ <div class="grid-column-8 pushed-by-4">8 pushed by 4</div>
117
+ <div class="grid-column-4 pulled-by-8">4 pulled by 8</div>
118
+ </div>
119
+
120
+ </body>
121
+ </html>
data/templates/example/examples/right/screen.sass ADDED
@@ -0,0 +1,2 @@
1
+ @import config/config
2
+ @import gridgraphy/scaffolding
data/templates/example/manifest.rb ADDED
@@ -0,0 +1,29 @@
1
+ description "Examples of each type of grid included in gridgraphy."
2
+
3
+ grids = [
4
+ "center",
5
+ "full",
6
+ "left",
7
+ "right"
8
+ ]
9
+
10
+ directory "examples"
11
+ grids.each do |name|
12
+ directory "examples/#{name}"
13
+ stylesheet "examples/#{name}/config/_config.sass", :to => "examples/#{name}/config/_config.sass"
14
+ stylesheet "examples/#{name}/screen.sass", :to => "examples/#{name}/screen.sass"
15
+ html "examples/#{name}/index.html", :to => "examples/#{name}/index.html"
16
+ end
17
+
18
+
19
+ help %Q{
20
+ Please see the gridgraphy website for detailed documentation:
21
+ https://github.com/jasonbellamy/gridgraphy
22
+ }
23
+
24
+ welcome_message %Q{
25
+ Please see the gridgraphy website for detailed documentation:
26
+ https://github.com/jasonbellamy/gridgraphy
27
+
28
+ Please edit config/_config.sass to set / change the options for the generated grid.
29
+ }
data/templates/scaffolding/config/_config.sass ADDED
@@ -0,0 +1,13 @@
1
+ // grid type & size
2
+ $grid-type: 'full'
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: false
data/templates/scaffolding/manifest.rb ADDED
@@ -0,0 +1,16 @@
1
+ description "Basic class based grid scaffolding"
2
+
3
+ stylesheet "config/_config.sass"
4
+ stylesheet "screen.sass", :media => "screen, projection"
5
+
6
+ help %Q{
7
+ Please see the gridgraphy website for detailed documentation:
8
+ https://github.com/jasonbellamy/gridgraphy
9
+ }
10
+
11
+ welcome_message %Q{
12
+ Please see the gridgraphy website for detailed documentation:
13
+ https://github.com/jasonbellamy/gridgraphy
14
+
15
+ Please edit config/_config.sass to set / change the options for the generated grid.
16
+ }
data/templates/scaffolding/screen.sass ADDED
@@ -0,0 +1,2 @@
1
+ @import config/config
2
+ @import gridgraphy/scaffolding