stratum 0.2.4 → 0.3.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (61) hide show
  1. data/.editorconfig +7 -0
  2. data/.gitignore +2 -2
  3. data/assets/stylesheets/_css3.scss +7 -0
  4. data/assets/stylesheets/_helpers.scss +7 -0
  5. data/assets/stylesheets/_stratum.scss +12 -15
  6. data/assets/stylesheets/css3/_border-radius.scss +2 -2
  7. data/assets/stylesheets/css3/_user-select.scss +12 -0
  8. data/assets/stylesheets/helpers/_box.scss +17 -0
  9. data/assets/stylesheets/{addons → helpers}/_dimensions.scss +7 -4
  10. data/assets/stylesheets/{addons → helpers}/_group.scss +0 -0
  11. data/assets/stylesheets/helpers/_icon-map.scss +11 -0
  12. data/assets/stylesheets/helpers/_icons.scss +177 -0
  13. data/assets/stylesheets/{addons → helpers}/_position.scss +6 -6
  14. data/assets/stylesheets/helpers/_triangle.scss +64 -0
  15. data/assets/stylesheets/{addons → helpers}/_vendor-prefix.scss +0 -0
  16. data/assets/stylesheets/layout/_grid.scss +4 -5
  17. data/assets/stylesheets/layout/{_grid-functions.scss → grid/_functions.scss} +12 -11
  18. data/assets/stylesheets/layout/grid/_guides.scss +123 -0
  19. data/assets/stylesheets/layout/grid/_mixins.scss +83 -0
  20. data/assets/stylesheets/layout/grid/_semantics.scss +5 -0
  21. data/assets/stylesheets/layout/grid/semantics/_core.scss +96 -0
  22. data/assets/stylesheets/layout/grid/semantics/_nested.scss +34 -0
  23. data/assets/stylesheets/layout/grid/semantics/_offsets.scss +50 -0
  24. data/assets/stylesheets/layout/grid/semantics/_overrides.scss +71 -0
  25. data/assets/stylesheets/layout/grid/semantics/_subdivisions.scss +16 -0
  26. data/assets/stylesheets/layout/scaffolding.scss +105 -52
  27. data/bin/stratum +1 -1
  28. data/lib/stratum/generator.rb +74 -0
  29. data/lib/stratum/version.rb +3 -0
  30. data/lib/stratum.rb +2 -73
  31. data/stratum.gemspec +1 -1
  32. metadata +27 -38
  33. data/.gitmodules +0 -3
  34. data/assets/stylesheets/layout/_grid-guides.scss +0 -93
  35. data/assets/stylesheets/layout/_grid-mixins.scss +0 -79
  36. data/assets/stylesheets/layout/_grid-semantics.scss +0 -266
  37. data/lib/version.rb +0 -3
  38. data/tests/Gemfile +0 -6
  39. data/tests/Gemfile.lock +0 -63
  40. data/tests/Guardfile +0 -11
  41. data/tests/_config.yml +0 -5
  42. data/tests/_includes/menu-grids.html +0 -9
  43. data/tests/_includes/shared-grid-samples.html +0 -58
  44. data/tests/_layouts/default.html +0 -21
  45. data/tests/grid/arstechnica.html +0 -70
  46. data/tests/grid/bbc.html +0 -74
  47. data/tests/grid/fluid.html +0 -85
  48. data/tests/grid/guardian.html +0 -248
  49. data/tests/grid/index.html +0 -5
  50. data/tests/grid/pixel.html +0 -29
  51. data/tests/images/arstechnica.png +0 -0
  52. data/tests/images/bbc.png +0 -0
  53. data/tests/images/capture.js +0 -15
  54. data/tests/images/guardian-home.png +0 -0
  55. data/tests/scss/_mock-block.scss +0 -68
  56. data/tests/scss/arstechnica.scss +0 -106
  57. data/tests/scss/bbc.scss +0 -93
  58. data/tests/scss/fluid-grid.scss +0 -50
  59. data/tests/scss/guardian.scss +0 -219
  60. data/tests/scss/main.scss +0 -90
  61. data/tests/scss/pixel-grid.scss +0 -14
data/tests/Gemfile.lock DELETED
@@ -1,63 +0,0 @@
1
- GEM
2
- remote: https://rubygems.org/
3
- specs:
4
- addressable (2.3.2)
5
- classifier (1.3.3)
6
- fast-stemmer (>= 1.0.0)
7
- coderay (1.0.8)
8
- directory_watcher (1.4.1)
9
- em-websocket (0.3.8)
10
- addressable (>= 2.1.1)
11
- eventmachine (>= 0.12.9)
12
- eventmachine (1.0.0)
13
- fast-stemmer (1.0.1)
14
- guard (1.6.1)
15
- listen (>= 0.6.0)
16
- lumberjack (>= 1.0.2)
17
- pry (>= 0.9.10)
18
- thor (>= 0.14.6)
19
- guard-livereload (1.1.3)
20
- em-websocket (>= 0.2.0)
21
- guard (>= 1.5.0)
22
- multi_json (~> 1.0)
23
- guard-sass (1.0.1)
24
- guard (>= 1.1.0)
25
- sass (>= 3.1)
26
- jekyll (0.12.0)
27
- classifier (~> 1.3)
28
- directory_watcher (~> 1.1)
29
- kramdown (~> 0.13.4)
30
- liquid (~> 2.3)
31
- maruku (~> 0.5)
32
- pygments.rb (~> 0.3.2)
33
- kramdown (0.13.8)
34
- liquid (2.4.1)
35
- listen (0.7.2)
36
- lumberjack (1.0.2)
37
- maruku (0.6.1)
38
- syntax (>= 1.0.0)
39
- method_source (0.8.1)
40
- multi_json (1.5.0)
41
- posix-spawn (0.3.6)
42
- pry (0.9.11.4)
43
- coderay (~> 1.0.5)
44
- method_source (~> 0.8)
45
- slop (~> 3.4)
46
- pygments.rb (0.3.7)
47
- posix-spawn (~> 0.3.6)
48
- yajl-ruby (~> 1.1.0)
49
- rb-fsevent (0.9.3)
50
- sass (3.2.5)
51
- slop (3.4.3)
52
- syntax (1.0.0)
53
- thor (0.16.0)
54
- yajl-ruby (1.1.0)
55
-
56
- PLATFORMS
57
- ruby
58
-
59
- DEPENDENCIES
60
- guard-livereload
61
- guard-sass
62
- jekyll
63
- rb-fsevent (~> 0.9.1)
data/tests/Guardfile DELETED
@@ -1,11 +0,0 @@
1
- guard 'sass',
2
- :load_paths => ['../assets/stylesheets'],
3
- # :debug_info => true,
4
- :input => 'scss',
5
- :output => 'css'
6
-
7
- guard 'livereload' do
8
- # watch(%r{../assets/stylesheets/.+\.(scss)})
9
- watch(%r{grid/.+\.(html)})
10
- watch(%r{scss/.+\.(scss)})
11
- end
data/tests/_config.yml DELETED
@@ -1,5 +0,0 @@
1
- server: true
2
- auto: true
3
- baseurl: /stratum
4
- exclude: Gemfile, Gemfile.lock, Guardfile, node_modules, test, scss
5
- include: css
@@ -1,9 +0,0 @@
1
- <header id="masthead">
2
- <ul class="nav">
3
- <li {% if page.id == "pixel" %} class="active"{% endif %}><a href="{{site.baseurl}}/grid/pixel.html">Pixel Grid</a></li>
4
- <li {% if page.id == "fluid" %} class="active"{% endif %}><a href="{{site.baseurl}}/grid/fluid.html">Fluid Grid</a></li>
5
- <li {% if page.id == "bbc" %} class="active"{% endif %}><a href="{{site.baseurl}}/grid/bbc.html">BBC Homepage Example</a></li>
6
- <li {% if page.id == "arstechnica" %} class="active"{% endif %}><a href="{{site.baseurl}}/grid/arstechnica.html">Arstechnica Layout Example</a></li>
7
- <li {% if page.id == "guardian" %} class="active"{% endif %}><a href="{{site.baseurl}}/grid/guardian.html">Guardian Homepage Example</a></li>
8
- </ul>
9
- </header>
@@ -1,58 +0,0 @@
1
- <h2>Normal</h2>
2
- <div class="l-row">
3
- <div class="l-col m-3">
4
- <span>.l-col.m-3</span>
5
- </div>
6
- <div class="l-col m-3">
7
- <span>.l-col.m-3</span>
8
- </div>
9
- <div class="l-col m-3">
10
- <span>.l-col.m-3</span>
11
- </div>
12
- <div class="l-col m-3">
13
- <span>.l-col.m-3</span>
14
- </div>
15
- </div>
16
-
17
- <h2>Offsets</h2>
18
- <div class="l-row">
19
- <div class="l-col m-4 m-to-left-1 m-from-right-1">
20
- <span>.l-col.m-to-left-1.m-from-right-1</span>
21
- </div>
22
- <div class="l-col m-4">
23
- <span>.l-col.m-4</span>
24
- </div>
25
- <div class="l-col m-4 m-to-right-1 m-from-left-1">
26
- <span>.l-col.m-to-right-1.m-from-left-1</span>
27
- </div>
28
- </div>
29
-
30
- <header>
31
- <h2>No column gutters</h2>
32
- <code>.l-row.m-gutterless</code>
33
- </header>
34
- <div class="l-row m-gutterless">
35
- <div class="l-col m-6">
36
- <span>.l-col.m-6</span>
37
- </div>
38
- <div class="l-col m-3">
39
- <span>.l-col.m-3</span>
40
- </div>
41
- <div class="l-col m-3">
42
- <span>.l-col.m-3</span>
43
- </div>
44
- </div>
45
-
46
- <header>
47
- <h2>No row</h2>
48
- identical to <code>.l-row.m-gutterless</code>
49
- </header>
50
- <div class="l-col m-6">
51
- <span>.l-col.m-6</span>
52
- </div>
53
- <div class="l-col m-3">
54
- <span>.l-col.m-3</span>
55
- </div>
56
- <div class="l-col m-3">
57
- <span>.l-col.m-3</span>
58
- </div>
@@ -1,21 +0,0 @@
1
- <!DOCTYPE html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8">
5
- <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
6
- <title>{{ page.title }}</title>
7
- <meta name="viewport" content="width=device-width">
8
- <link rel="stylesheet" href="{{site.baseurl}}/css/main.css">
9
- {% for stylesheet in page.css %}
10
- <link rel="stylesheet" href="{{site.baseurl}}/css/{{ stylesheet }}.css">
11
- {% endfor %}
12
- <script src="{{site.baseurl}}/vendor/livereload-js/dist/livereload.js?host=localhost"></script>
13
- </head>
14
- <body>
15
- {% if page.menu == 'grids' %}
16
- {% include menu-grids.html %}
17
- {% endif %}
18
-
19
- {{ content }}
20
- </body>
21
- </html>
@@ -1,70 +0,0 @@
1
- ---
2
- layout: default
3
- title: Arstechnica Layout Demo
4
- id: arstechnica
5
- css: arstechnica
6
- menu: grids
7
- ---
8
-
9
- <div class="reference">
10
- <img src="{{site.baseurl}}/images/arstechnica.png" alt="">
11
- </div>
12
-
13
- <div id="page" class="l-container">
14
- <div class="masthead"></div>
15
- <nav></nav>
16
- <div class="content l-container m-fluid">
17
- <div class="head"></div>
18
- <div class="l-row">
19
- <div class="content l-col">
20
- <div class="l-container">
21
- <div class="p-article"></div>
22
- <div class="related l-row">
23
- <div class="p-title l-col m-1-of-1">
24
- <div class="item"></div>
25
- </div>
26
- <div class="l-col m-1-of-4">
27
- <div class="item"></div>
28
- </div>
29
- <div class="l-col m-1-of-4">
30
- <div class="item"></div>
31
- </div>
32
- <div class="l-col m-1-of-4">
33
- <div class="item"></div>
34
- </div>
35
- <div class="l-col m-1-of-4">
36
- <div class="item"></div>
37
- </div>
38
- <div class="l-col m-1-of-4">
39
- <div class="item"></div>
40
- </div>
41
- <div class="l-col m-1-of-4">
42
- <div class="item"></div>
43
- </div>
44
- <div class="l-col m-1-of-4">
45
- <div class="item"></div>
46
- </div>
47
- <div class="l-col m-1-of-4">
48
- <div class="item"></div>
49
- </div>
50
- </div>
51
- </div>
52
- </div>
53
- <aside class="sidebar l-col"></aside>
54
- </div>
55
- </div>
56
- <footer class="mastfoot l-row m-gutterless">
57
- <div class="l-col m-2">
58
- <span>2 columns</span>
59
- </div>
60
- <div class="l-col m-2">
61
- <span>2 columns</span>
62
- </div>
63
- <div class="l-col m-2">
64
- <span>2 columns</span>
65
- </div>
66
- <div class="l-col m-2">
67
- <span>2 columns</span>
68
- </div>
69
- </footer>
70
- </div>
data/tests/grid/bbc.html DELETED
@@ -1,74 +0,0 @@
1
- ---
2
- layout: default
3
- title: BBC Layout Demo
4
- id: bbc
5
- css: bbc
6
- menu: grids
7
- ---
8
-
9
- <div class="reference">
10
- <img src="{{site.baseurl}}/images/bbc.png" alt="">
11
- </div>
12
-
13
- <div id="page">
14
- <div class="top-banner"></div>
15
-
16
- <div class="nav">
17
- <div class="l-container">
18
- <div class="l-row">
19
- <div class="l-col m-8">
20
- <span>8 columns</span>
21
- </div>
22
- </div>
23
- </div>
24
- </div>
25
-
26
- <div class="hero l-container">
27
- <div class="head l-row">
28
- <div class="p-title l-col m-4">
29
- <span>4 columns</span>
30
- </div>
31
- <div class="p-weather l-col m-4">
32
- <span>4 columns</span>
33
- </div>
34
- </div>
35
- <div class="dashboard l-row m-gutterless">
36
- <div class="l-col m-left m-4">
37
- <div class="p-item l-col m-1-of-1">
38
- <span>4 columns</span>
39
- </div>
40
- <div class="p-item l-col m-1-of-2">
41
- <span>2 columns</span>
42
- </div>
43
- <div class="p-item l-col m-1-of-2">
44
- <span>2 columns</span>
45
- </div>
46
- </div>
47
- <div class="l-col m-right m-4">
48
- <div class="p-item l-col m-1-of-2">
49
- <span>2 columns</span>
50
- </div>
51
- <div class="p-item l-col m-1-of-2">
52
- <span>2 columns</span>
53
- </div>
54
- </div>
55
- </div>
56
- <nav class="l-col m-7 m-centered">
57
- <span>7 columns</span>
58
- </nav>
59
- </div>
60
-
61
- <div class="content l-container">
62
- <div class="l-col m-3">
63
- <span>3 columns</span>
64
- </div>
65
- <div class="l-col m-3">
66
- <span>3 columns</span>
67
- </div>
68
- <div class="l-col m-2">
69
- <span>2 columns</span>
70
- </div>
71
- </div>
72
-
73
- <div class="footer l-container"></div>
74
- </div>
@@ -1,85 +0,0 @@
1
- ---
2
- layout: default
3
- title: Fluid Grid Examples
4
- id: fluid
5
- css: fluid-grid
6
- menu: grids
7
- ---
8
-
9
- <div id="page">
10
- <div class="l-container">
11
- {% include shared-grid-samples.html %}
12
- </div>
13
-
14
- <div class="l-container">
15
- <h2>Nested row</h2>
16
- <div class="l-row">
17
- <div class="l-col m-3">
18
- <span>l-col m-3</span>
19
- </div>
20
- <div class="l-col m-6">
21
- <span>l-col m-3</span>
22
- <div class="l-row">
23
- <div class="l-col m-3">
24
- <span>l-col m-3</span>
25
- </div>
26
- <div class="l-col m-3">
27
- <span>l-col m-3</span>
28
- </div>
29
- <div class="l-col m-3">
30
- <span>l-col m-3</span>
31
- </div>
32
- <div class="l-col m-3">
33
- <span>l-col m-3</span>
34
- </div>
35
- </div>
36
- </div>
37
- <div class="l-col m-3">
38
- <span>l-col m-3</span>
39
- </div>
40
- </div>
41
- </div>
42
-
43
- <div class="l-container m-pixel">
44
- <header>
45
- <h2>Forced pixel grid</h2>
46
- <code>.l-container.m-pixel</code> with no row
47
- </header>
48
-
49
- <div class="l-col m-6">
50
- <span>.l-col-m-6</span>
51
- </div>
52
- <div class="l-col m-3">
53
- <span>.l-col-m-6</span>
54
- </div>
55
- <div class="l-col m-3">
56
- <span>.l-col-m-6</span>
57
- </div>
58
-
59
- <div class="l-row m-gutterless">
60
- <div class="l-col m-9">
61
- <span>.l-col-m-9</span>
62
- <div class="l-container">
63
- <h2>Nested grid: 6 columns in a 9 column cell</h2>
64
- <div class="l-row">
65
- <div class="l-col m-2-of-8">
66
- <span>.l-col-m-2-of-6</span>
67
- </div>
68
- <div class="l-col m-2-of-8">
69
- <span>.l-col-m-2-of-6</span>
70
- </div>
71
- <div class="l-col m-2-of-8">
72
- <span>.l-col-m-2-of-6</span>
73
- </div>
74
- <div class="l-col m-2-of-8">
75
- <span>.l-col-m-2-of-6</span>
76
- </div>
77
- </div>
78
- </div>
79
- </div>
80
- <div class="l-col m-3">
81
- <span>.l-col-m-3</span>
82
- </div>
83
- </div>
84
- </div>
85
- </div>
@@ -1,248 +0,0 @@
1
- ---
2
- layout: default
3
- title: Guardian Home Layout Demo
4
- id: guardian
5
- css: guardian
6
- menu: grids
7
- ---
8
-
9
- <div class="reference">
10
- <img src="{{site.baseurl}}/images/guardian-home.png" alt="">
11
- </div>
12
-
13
- <div id="page">
14
-
15
- <div class="l-container">
16
- <div class="top-bar"></div>
17
- <div class="header">
18
- <div class="p-info"></div>
19
- <div class="p-search"></div>
20
- <div class="masthead l-row">
21
- <div class="p-logo l-col m-6">
22
- <span>l-col m-6</span>
23
- </div>
24
- <div class="p-weather l-col m-6">
25
- <span>l-col m-6</span>
26
- </div>
27
- </div>
28
- <div class="nav">
29
- <div class="p-main"></div>
30
- <div class="p-sub"></div>
31
- </div>
32
- <div class="ticker"></div>
33
- </div>
34
-
35
- <div class="content l-row">
36
- <div class="left l-col m-4">
37
- <div class="item m-1">
38
- <span>l-col m4</span>
39
- </div>
40
- <div class="item m-2">
41
- <span>l-col m4</span>
42
- </div>
43
- <div class="item m-3">
44
- <span>l-col m4</span>
45
- </div>
46
- </div>
47
- <div class="main l-col m-6">
48
- <div class="item m-feat">
49
- <span>l-col m6</span>
50
- </div>
51
-
52
- <div class="l-row">
53
- <div class="l-col m-2">
54
- <div class="item m-1">
55
- <span>l-col m2</span>
56
- </div>
57
- <div class="item m-2">
58
- <span>l-col m2</span>
59
- </div>
60
- <div class="item m-3">
61
- <span>l-col m2</span>
62
- </div>
63
- <div class="item m-3">
64
- <span>l-col m2</span>
65
- </div>
66
- <div class="item m-3">
67
- <span>l-col m2</span>
68
- </div>
69
- <div class="item m-3">
70
- <span>l-col m2</span>
71
- </div>
72
- <div class="item m-3">
73
- <span>l-col m2</span>
74
- </div>
75
- <div class="item m-4">
76
- <span>l-col m2</span>
77
- </div>
78
- <div class="item m-3">
79
- <span>l-col m2</span>
80
- </div>
81
- <div class="item m-3">
82
- <span>l-col m2</span>
83
- </div>
84
- <div class="item m-3">
85
- <span>l-col m2</span>
86
- </div>
87
- <div class="item m-3">
88
- <span>l-col m2</span>
89
- </div>
90
- <div class="item m-3">
91
- <span>l-col m2</span>
92
- </div>
93
- <div class="item m-3">
94
- <span>l-col m2</span>
95
- </div>
96
- <div class="item m-3">
97
- <span>l-col m2</span>
98
- </div>
99
- <div class="item m-3">
100
- <span>l-col m2</span>
101
- </div>
102
- <div class="item m-3">
103
- <span>l-col m2</span>
104
- </div>
105
- <div class="item m-3">
106
- <span>l-col m2</span>
107
- </div>
108
- <div class="item m-3">
109
- <span>l-col m2</span>
110
- </div>
111
- <div class="item m-3">
112
- <span>l-col m2</span>
113
- </div>
114
- <div class="item m-3">
115
- <span>l-col m2</span>
116
- </div>
117
- <div class="item m-3">
118
- <span>l-col m2</span>
119
- </div>
120
- <div class="item m-3">
121
- <span>l-col m2</span>
122
- </div>
123
- <div class="item m-5">
124
- <span>l-col m2</span>
125
- </div>
126
- </div>
127
- <div class="l-col m-4">
128
- <div class="item m-1">
129
- <span>l-col m4</span>
130
- </div>
131
- <div class="item m-2">
132
- <span>l-col m4</span>
133
- </div>
134
- <div class="item m-3">
135
- <span>l-col m4</span>
136
- </div>
137
- <div class="item m-4">
138
- <span>l-col m4</span>
139
- </div>
140
- <div class="item m-5">
141
- <span>l-col m4</span>
142
- </div>
143
- <div class="item m-6">
144
- <span>l-col m4</span>
145
- </div>
146
- <div class="item m-7">
147
- <span>l-col m4</span>
148
- </div>
149
- <div class="item m-8">
150
- <span>l-col m4</span>
151
- </div>
152
- </div>
153
- </div>
154
- </div>
155
- <div class="right l-col m-2">
156
- <div class="item m-1">
157
- <span>l-col m2</span>
158
- </div>
159
- <div class="item m-2">
160
- <span>l-col m2</span>
161
- </div>
162
- <div class="item m-3">
163
- <span>l-col m2</span>
164
- </div>
165
- <div class="item m-4">
166
- <span>l-col m2</span>
167
- </div>
168
- <div class="item m-5">
169
- <span>l-col m2</span>
170
- </div>
171
- <div class="item m-6">
172
- <span>l-col m2</span>
173
- </div>
174
- <div class="item m-7">
175
- <span>l-col m2</span>
176
- </div>
177
- <div class="item m-8">
178
- <span>l-col m2</span>
179
- </div>
180
- <div class="item m-9">
181
- <span>l-col m2</span>
182
- </div>
183
- <div class="item m-10">
184
- <span>l-col m2</span>
185
- </div>
186
- <div class="item m-11">
187
- <span>l-col m2</span>
188
- </div>
189
- <div class="item m-12">
190
- <span>l-col m2</span>
191
- </div>
192
- <div class="item m-13">
193
- <span>l-col m2</span>
194
- </div>
195
- </div>
196
- </div>
197
-
198
- <div class="shop">
199
- <header></header>
200
- <div class="l-row">
201
- <div class="l-col m-2">
202
- <span>l-col m2</span>
203
- </div>
204
- <div class="l-col m-2">
205
- <span>l-col m2</span>
206
- </div>
207
- <div class="l-col m-2">
208
- <span>l-col m2</span>
209
- </div>
210
- <div class="l-col m-2">
211
- <span>l-col m2</span>
212
- </div>
213
- <div class="l-col m-2">
214
- <span>l-col m2</span>
215
- </div>
216
- <div class="l-col m-2">
217
- <span>l-col m2</span>
218
- </div>
219
- </div>
220
- </div>
221
-
222
- <div class="simple-news">
223
- <header></header>
224
- <div class="l-row">
225
- <div class="l-col m-2">
226
- <span>l-col m2</span>
227
- </div>
228
- <div class="l-col m-2">
229
- <span>l-col m2</span>
230
- </div>
231
- <div class="l-col m-2">
232
- <span>l-col m2</span>
233
- </div>
234
- <div class="l-col m-2">
235
- <span>l-col m2</span>
236
- </div>
237
- <div class="l-col m-2">
238
- <span>l-col m2</span>
239
- </div>
240
- <div class="l-col m-2">
241
- <span>l-col m2</span>
242
- </div>
243
- </div>
244
- </div>
245
-
246
- <div class="mastfoot"></div>
247
- </div>
248
- </div>
@@ -1,5 +0,0 @@
1
- ---
2
- layout: default
3
- title: Grid and Layout Demos
4
- menu: grids
5
- ---