gridgraphy 0.0.2

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