gridpaper 0.0.6 → 0.0.7

Sign up to get free protection for your applications and to get access to all the features.
Files changed (50) hide show
  1. data/README.rdoc +1 -0
  2. data/bin/gridpaper +1 -0
  3. data/examples/index.html +227 -13
  4. data/examples/pencil.html +341 -0
  5. data/examples/stylesheets/sass/_settings.sass +8 -0
  6. data/examples/stylesheets/sass/gridpaper/_effects.sass +1 -1
  7. data/examples/stylesheets/sass/gridpaper/_forms.sass +0 -25
  8. data/examples/stylesheets/sass/gridpaper/_grid.sass +46 -0
  9. data/examples/stylesheets/sass/gridpaper/_reset.sass +39 -19
  10. data/examples/stylesheets/sass/gridpaper/_tables.sass +0 -0
  11. data/examples/stylesheets/sass/gridpaper/pencil/_all.sass +1 -0
  12. data/examples/stylesheets/sass/gridpaper/pencil/_colors.sass +9 -0
  13. data/examples/stylesheets/sass/gridpaper/pencil/_elements.sass +13 -0
  14. data/examples/stylesheets/sass/gridpaper/pencil/_forms.sass +22 -0
  15. data/examples/stylesheets/sass/gridpaper/pencil/_layout.sass +30 -0
  16. data/examples/stylesheets/sass/gridpaper/pencil/_tables.sass +5 -0
  17. data/examples/stylesheets/sass/gridpaper/pencil/_typography.sass +17 -0
  18. data/examples/stylesheets/sass/index.html.sass +119 -0
  19. data/examples/stylesheets/sass/pencil.html.sass +157 -0
  20. data/lib/gridpaper/version.rb +1 -1
  21. data/templates/sass/_settings.sass +8 -0
  22. data/templates/sass/gridpaper/_effects.sass +1 -1
  23. data/templates/sass/gridpaper/_forms.sass +0 -25
  24. data/templates/sass/gridpaper/_grid.sass +46 -0
  25. data/templates/sass/gridpaper/_reset.sass +39 -19
  26. data/templates/sass/gridpaper/_tables.sass +0 -0
  27. data/templates/sass/gridpaper/pencil/_all.sass +1 -0
  28. data/templates/sass/gridpaper/pencil/_colors.sass +9 -0
  29. data/templates/sass/gridpaper/pencil/_elements.sass +13 -0
  30. data/templates/sass/gridpaper/pencil/_forms.sass +22 -0
  31. data/templates/sass/gridpaper/pencil/_layout.sass +30 -0
  32. data/templates/sass/gridpaper/pencil/_tables.sass +5 -0
  33. data/templates/sass/gridpaper/pencil/_typography.sass +17 -0
  34. data/templates/scss/_settings.scss +8 -0
  35. data/templates/scss/gridpaper/_effects.scss +1 -1
  36. data/templates/scss/gridpaper/_forms.scss +1 -19
  37. data/templates/scss/gridpaper/_grid.scss +47 -0
  38. data/templates/scss/gridpaper/_reset.scss +29 -25
  39. data/templates/scss/gridpaper/_tables.scss +1 -0
  40. data/templates/scss/gridpaper/pencil/_all.scss +11 -0
  41. data/templates/scss/gridpaper/pencil/_colors.scss +9 -0
  42. data/templates/scss/gridpaper/pencil/_elements.scss +13 -0
  43. data/templates/scss/gridpaper/pencil/_forms.scss +17 -0
  44. data/templates/scss/gridpaper/pencil/_layout.scss +28 -0
  45. data/templates/scss/gridpaper/pencil/_tables.scss +5 -0
  46. data/templates/scss/gridpaper/pencil/_typography.scss +16 -0
  47. metadata +36 -12
  48. data/examples/stylesheets/sass/styles.sass +0 -2
  49. data/templates/sass/gridpaper/examples/_columns.sass +0 -46
  50. data/templates/scss/gridpaper/examples/_columns.scss +0 -45
data/README.rdoc CHANGED
@@ -48,6 +48,7 @@ The <tt>gridpaper watch <input folder> <output folder></tt> command takes the fo
48
48
 
49
49
  === Changelog
50
50
 
51
+ - Nov 25, 2011 - Versioned to 0.0.7
51
52
  - Nov 23, 2011 - Versioned to 0.0.4
52
53
  - Nov 23, 2011 - Versioned to 0.0.3
53
54
  - Nov 23, 2011 - Basic generator is functional, two syntaxes available: SASS and SCSS
data/bin/gridpaper CHANGED
@@ -40,6 +40,7 @@ command :watch do |c|
40
40
  # Pass to sass --watch
41
41
  # TODO:
42
42
  # - Hook into this and load custom SASS functions
43
+ # - Pass along other sass -- watch options
43
44
  system("sass --watch #{ input_path }:#{ output_path }")
44
45
  end
45
46
 
data/examples/index.html CHANGED
@@ -2,12 +2,20 @@
2
2
  <html>
3
3
  <head>
4
4
  <title>Gridpaper</title>
5
- <link rel="stylesheet" type="text/css" href="stylesheets/styles.css" />
5
+ <link rel="stylesheet" type="text/css" href="stylesheets/index.html.css" />
6
6
  </head>
7
7
  <body>
8
8
 
9
9
  <header>
10
10
  <h1>Gridpaper</h1>
11
+
12
+
13
+ <pre><code>
14
+
15
+ @import settings
16
+ @import gridpaper/all
17
+
18
+ </code></pre>
11
19
  </header>
12
20
 
13
21
  <div id="content">
@@ -33,12 +41,14 @@
33
41
  <div class="grid-column"></div>
34
42
  </div>
35
43
 
44
+
36
45
  <div id="three-columns" class="row">
37
46
  <div class="grid-column"></div>
38
47
  <div class="grid-column"></div>
39
48
  <div class="grid-column"></div>
40
49
  </div>
41
50
 
51
+
42
52
  <div id="four-columns" class="row">
43
53
  <div class="grid-column"></div>
44
54
  <div class="grid-column"></div>
@@ -46,6 +56,7 @@
46
56
  <div class="grid-column"></div>
47
57
  </div>
48
58
 
59
+
49
60
  <div id="six-columns" class="row">
50
61
  <div class="grid-column"></div>
51
62
  <div class="grid-column"></div>
@@ -55,6 +66,7 @@
55
66
  <div class="grid-column"></div>
56
67
  </div>
57
68
 
69
+
58
70
  <div id="eight-columns" class="row">
59
71
  <div class="grid-column"></div>
60
72
  <div class="grid-column"></div>
@@ -65,6 +77,29 @@
65
77
  <div class="grid-column"></div>
66
78
  <div class="grid-column"></div>
67
79
  </div>
80
+ <pre><code>
81
+
82
+ // Two columns
83
+ @include column
84
+ @include span(12)
85
+
86
+ // Three columns
87
+ @include column
88
+ @include span(8)
89
+
90
+ // Four columns
91
+ @include column
92
+ @include span(6)
93
+
94
+ // Six columns
95
+ @include column
96
+ @include span(4)
97
+
98
+ // Eight columns
99
+ @include column
100
+ @include span(3)
101
+
102
+ </code></pre>
68
103
 
69
104
  </section>
70
105
 
@@ -84,36 +119,215 @@
84
119
  <div id="four-text-columns" class="text-columns">
85
120
  <p>Pellentesque placerat rhoncus viverra. Nunc a enim at est egestas semper. Pellentesque ultrices dapibus magna, non dapibus ipsum pharetra non. Donec viverra, velit in lobortis commodo, ante erat faucibus nisl, ut lobortis enim dolor euismod libero. Maecenas blandit ullamcorper sem, et rutrum sem sagittis vel. Nulla rhoncus ante fermentum leo dictum cursus. In bibendum vehicula lectus, id imperdiet libero tempus ac. Aenean eget tellus ac tortor facilisis venenatis. Donec ut libero ante, a mattis justo. Duis ullamcorper nulla egestas ante vehicula in posuere nunc congue. Aenean sit amet odio at magna viverra vulputate. In vestibulum, ante quis rhoncus pulvinar, mauris odio lacinia lacus, at auctor enim nisi sed elit. In venenatis tincidunt sollicitudin. Aliquam interdum orci vel turpis condimentum feugiat.</p>
86
121
  </div>
122
+
123
+ <pre><code>
124
+
125
+ // Two columns
126
+ @include text-columns(2)
127
+
128
+ // Three columns
129
+ @include text-columns(3)
130
+
131
+ // Four columns
132
+ @include text-columns(4)
133
+
134
+ </code></pre>
87
135
  </section>
88
136
 
89
137
  <section id="forms-example">
90
138
  <h4>Forms</h4>
91
139
 
92
140
  <form id="fake-form" action="#">
141
+
142
+
143
+
93
144
  <fieldset>
94
- <legend>Contact Us</legend>
95
- <div class="field">
96
- <label for="contact-name">Name:</label>
97
- <input name="contact-name" type="text" placeholder="name" required autofocus>
145
+ <legend>Legend: Input Boxes</legend>
146
+
147
+ <div class="fields">
148
+ <div class="field">
149
+ <label for="text-input">Text Input</label>
150
+ <input name="text-input" type="text" placeholder="Text Input" />
151
+ </div>
152
+
153
+ <div class="field">
154
+ <label for="textarea">Textarea</label>
155
+ <textarea id="textarea">Textarea</textarea>
156
+ </div>
98
157
  </div>
158
+ </fieldset>
99
159
 
100
- <div class="field">
101
- <label for="contact-email">Email:</label>
102
- <input name="contact-email" type="email" placeholder="email" required>
160
+ <fieldset>
161
+ <legend>Legend: Selects</legend>
162
+ <div class="fields">
163
+ <div class="field">
164
+
165
+ <label for="options">Select</label>
166
+ <select id="options" name="options">
167
+ <option value="" selected>Please choose</option>
168
+ <option value="option-1">Option 1</option>
169
+ <option value="option-2">Option 2</option>
170
+ <option value="option-3">Option 3</option>
171
+ <option value="option-4">Option 4</option>
172
+ <option value="option-5">Option 5</option>
173
+ <option value="option-6">Option 6</option>
174
+ </select>
175
+ </div>
176
+
177
+ <div class="field">
178
+ <label for="grouped-options">Grouped Select</label>
179
+ <select name="grouped-options" id="grouped-options">
180
+ <optgroup label="1st Grouping">
181
+ <option value="Option 1">Option 1</option>
182
+ <option value="Option 2">Option 2</option>
183
+ <option value="Option 3">Option 3</option>
184
+ </optgroup>
185
+
186
+ <optgroup label="2nd Grouping">
187
+ <option value="Option 4">Option 4</option>
188
+ <option value="Option 5">Option 5</option>
189
+ </optgroup>
190
+ </select>
191
+ </div>
192
+
193
+ <div class="field">
194
+ <label for="grouped-options">Multi-select</label>
195
+ <select multiple="multiple" size="2">
196
+ <option value="volvo">Volvo</option>
197
+ <option value="saab">Saab</option>
198
+ <option value="mercedes">Mercedes</option>
199
+ <option value="audi">Audi</option>
200
+ </select>
201
+
202
+ </div>
103
203
  </div>
204
+ </fieldset>
205
+
206
+ <fieldset>
207
+ <legend>Legend: Check Boxes &amp; Radio Buttons</legend>
208
+
209
+ <div class="fields">
210
+ <div class="field">
211
+ <label for="checkbox-1">Checkbox 1</label>
212
+ <input id="checkbox-1" name="checkbox-1" type="checkbox" />
213
+ </div>
214
+
215
+ <div class="field">
216
+ <label for="checkbox-2">Checkbox 2</label>
217
+ <input id="checkbox-2" name="checkbox-2" type="checkbox" />
218
+ </div>
219
+
220
+ <div class="field">
221
+ <label for="checkbox-3">Checkbox 3</label>
222
+ <input id="checkbox-3" name="checkbox-3" type="checkbox" />
223
+ </div>
224
+
225
+ <div class="field">
226
+ <label for="radio-1">Radio 1</label>
227
+ <input id="radio-1" name="group-1" type="radio" />
228
+ </div>
229
+
230
+ <div class="field">
231
+ <label for="radio-2">Radio 2</label>
232
+ <input id="radio-2" name="group-1" type="radio" />
233
+ </div>
234
+
235
+ <div class="field">
236
+ <label for="radio-3">Radio 3</label>
237
+ <input id="radio-3" name="group-1" type="radio" />
238
+ </div>
239
+
104
240
 
105
- <div class="field">
106
- <label for="contact-message">Message:</label>
107
- <textarea id="contact-message">Type your message here</textarea>
108
241
  </div>
242
+ </fieldset>
243
+
244
+ <fieldset>
245
+ <legend>Legend: Buttons</legend>
246
+
247
+ <div class="actions">
248
+
249
+ <input name="submit" type="submit" value="Submit Input">
250
+
251
+ <button>Button</button>
109
252
 
110
- <div class="field">
111
- <input name="login" type="submit" value="Login">
112
253
  </div>
113
254
  </fieldset>
255
+
114
256
  </form>
115
257
  </section>
116
258
 
259
+ <section id="tables-examples">
260
+ <h4>Tables</h4>
261
+ <table>
262
+ <tr>
263
+ <th scope="col">A</th>
264
+ <th scope="col">B</th>
265
+ <th scope="col">C</th>
266
+ <th scope="col">D</th>
267
+ </tr>
268
+ <tr>
269
+ <td>Data</td>
270
+ <td>Data</td>
271
+ <td>Data</td>
272
+ <td>Data</td>
273
+ </tr>
274
+ </table>
275
+
276
+ <table>
277
+ <tr>
278
+ <th scope="row">1</th>
279
+ <td>Data</td>
280
+ </tr>
281
+ <tr>
282
+ <th scope="row">2</th>
283
+ <td>Data</td>
284
+ </tr>
285
+ <tr>
286
+ <th scope="row">3</th>
287
+ <td>Data</td>
288
+ </tr>
289
+ <tr>
290
+ <th scope="row">4</th>
291
+ <td>Data</td>
292
+ </tr>
293
+ </table>
294
+ </section>
295
+
296
+
297
+
298
+ <section id="effects-examples">
299
+ <h4>CSS3 Effects</h4>
300
+
301
+ <div class="effects-example">
302
+ <div id="box-shadow" class="effects-box"></div>
303
+ <pre><code>
304
+
305
+ // Box Shadows
306
+ @include box-shadow(4px 4px 4px fade-out(#000, 0.75))
307
+
308
+ </code></pre>
309
+ </div>
310
+ <div class="effects-example">
311
+ <div id="border-radius" class="effects-box"></div>
312
+ <pre><code>
313
+
314
+ // Border Radius
315
+ @include border-radius(10px)
316
+
317
+ </code></pre>
318
+ </div>
319
+
320
+ <div class="effects-example">
321
+ <div id="linear-gradient" class="effects-box"></div>
322
+ <pre><code>
323
+
324
+ // Gradients
325
+ @include linear-gradient(#ccc, #777)
326
+
327
+ </code></pre>
328
+ </div>
329
+ </section>
330
+
117
331
 
118
332
  </div><!-- /content -->
119
333
 
data/examples/pencil.html ADDED
@@ -0,0 +1,341 @@
1
+ <!DOCTYPE html>
2
+ <html>
3
+ <head>
4
+ <title>Gridpaper+Pencil</title>
5
+ <link rel="stylesheet" type="text/css" href="stylesheets/pencil.html.css" />
6
+ </head>
7
+ <body>
8
+
9
+ <header>
10
+ <hgroup>
11
+ <h1>Gridpaper<em>+Pencil</em></h1>
12
+ <h6><em>For Rapidly Creating Wireframe Prototypes</em></h6>
13
+ </hgroup>
14
+
15
+ <pre><code>
16
+
17
+ @import settings
18
+ @import gridpaper/all
19
+ @import gridpaper/pencil/all
20
+
21
+ </code></pre>
22
+ </header>
23
+
24
+ <div id="content">
25
+
26
+ <section id="headers">
27
+ <h4>Headers</h4>
28
+ <hgroup>
29
+ <h1>1st Header</h1>
30
+ <h2>2nd Header</h2>
31
+ <h3>3rd Header</h3>
32
+ <h4>4th Header</h4>
33
+ <h5>5th Header</h5>
34
+ <h6>6th Header</h6>
35
+ </hgroup>
36
+ </section>
37
+
38
+
39
+ <section id="columns-example">
40
+ <h4>Grid Columns</h4>
41
+
42
+ <div id="two-columns" class="row">
43
+ <div class="grid-column"></div>
44
+ <div class="grid-column"></div>
45
+ </div>
46
+
47
+
48
+ <div id="three-columns" class="row">
49
+ <div class="grid-column"></div>
50
+ <div class="grid-column"></div>
51
+ <div class="grid-column"></div>
52
+ </div>
53
+
54
+
55
+ <div id="four-columns" class="row">
56
+ <div class="grid-column"></div>
57
+ <div class="grid-column"></div>
58
+ <div class="grid-column"></div>
59
+ <div class="grid-column"></div>
60
+ </div>
61
+
62
+
63
+ <div id="six-columns" class="row">
64
+ <div class="grid-column"></div>
65
+ <div class="grid-column"></div>
66
+ <div class="grid-column"></div>
67
+ <div class="grid-column"></div>
68
+ <div class="grid-column"></div>
69
+ <div class="grid-column"></div>
70
+ </div>
71
+
72
+
73
+ <div id="eight-columns" class="row">
74
+ <div class="grid-column"></div>
75
+ <div class="grid-column"></div>
76
+ <div class="grid-column"></div>
77
+ <div class="grid-column"></div>
78
+ <div class="grid-column"></div>
79
+ <div class="grid-column"></div>
80
+ <div class="grid-column"></div>
81
+ <div class="grid-column"></div>
82
+ </div>
83
+ <pre><code>
84
+
85
+ // Two columns
86
+ @include column
87
+ @include span(12)
88
+
89
+ // Three columns
90
+ @include column
91
+ @include span(8)
92
+
93
+ // Four columns
94
+ @include column
95
+ @include span(6)
96
+
97
+ // Six columns
98
+ @include column
99
+ @include span(4)
100
+
101
+ // Eight columns
102
+ @include column
103
+ @include span(3)
104
+
105
+ </code></pre>
106
+
107
+ </section>
108
+
109
+ <section id="text-columns-example">
110
+ <h4>Text Columns</h4>
111
+ <h5> Two Columns</h5>
112
+ <div id="two-text-columns" class="text-columns">
113
+ <p>Pellentesque placerat rhoncus viverra. Nunc a enim at est egestas semper. Pellentesque ultrices dapibus magna, non dapibus ipsum pharetra non. Donec viverra, velit in lobortis commodo, ante erat faucibus nisl, ut lobortis enim dolor euismod libero. Maecenas blandit ullamcorper sem, et rutrum sem sagittis vel. Nulla rhoncus ante fermentum leo dictum cursus. In bibendum vehicula lectus, id imperdiet libero tempus ac. Aenean eget tellus ac tortor facilisis venenatis. Donec ut libero ante, a mattis justo. Duis ullamcorper nulla egestas ante vehicula in posuere nunc congue. Aenean sit amet odio at magna viverra vulputate. In vestibulum, ante quis rhoncus pulvinar, mauris odio lacinia lacus, at auctor enim nisi sed elit. In venenatis tincidunt sollicitudin. Aliquam interdum orci vel turpis condimentum feugiat.</p>
114
+ </div>
115
+
116
+ <h5> Three Columns</h5>
117
+ <div id="three-text-columns" class="text-columns">
118
+ <p>Pellentesque placerat rhoncus viverra. Nunc a enim at est egestas semper. Pellentesque ultrices dapibus magna, non dapibus ipsum pharetra non. Donec viverra, velit in lobortis commodo, ante erat faucibus nisl, ut lobortis enim dolor euismod libero. Maecenas blandit ullamcorper sem, et rutrum sem sagittis vel. Nulla rhoncus ante fermentum leo dictum cursus. In bibendum vehicula lectus, id imperdiet libero tempus ac. Aenean eget tellus ac tortor facilisis venenatis. Donec ut libero ante, a mattis justo. Duis ullamcorper nulla egestas ante vehicula in posuere nunc congue. Aenean sit amet odio at magna viverra vulputate. In vestibulum, ante quis rhoncus pulvinar, mauris odio lacinia lacus, at auctor enim nisi sed elit. In venenatis tincidunt sollicitudin. Aliquam interdum orci vel turpis condimentum feugiat.</p>
119
+ </div>
120
+
121
+ <h5> Four Columns</h5>
122
+ <div id="four-text-columns" class="text-columns">
123
+ <p>Pellentesque placerat rhoncus viverra. Nunc a enim at est egestas semper. Pellentesque ultrices dapibus magna, non dapibus ipsum pharetra non. Donec viverra, velit in lobortis commodo, ante erat faucibus nisl, ut lobortis enim dolor euismod libero. Maecenas blandit ullamcorper sem, et rutrum sem sagittis vel. Nulla rhoncus ante fermentum leo dictum cursus. In bibendum vehicula lectus, id imperdiet libero tempus ac. Aenean eget tellus ac tortor facilisis venenatis. Donec ut libero ante, a mattis justo. Duis ullamcorper nulla egestas ante vehicula in posuere nunc congue. Aenean sit amet odio at magna viverra vulputate. In vestibulum, ante quis rhoncus pulvinar, mauris odio lacinia lacus, at auctor enim nisi sed elit. In venenatis tincidunt sollicitudin. Aliquam interdum orci vel turpis condimentum feugiat.</p>
124
+ </div>
125
+
126
+ <pre><code>
127
+
128
+ // Two columns
129
+ @include text-columns(2)
130
+
131
+ // Three columns
132
+ @include text-columns(3)
133
+
134
+ // Four columns
135
+ @include text-columns(4)
136
+
137
+ </code></pre>
138
+ </section>
139
+
140
+ <section id="forms-example">
141
+ <h4>Forms</h4>
142
+
143
+ <form id="fake-form" action="#">
144
+
145
+
146
+
147
+ <fieldset>
148
+ <legend>Legend: Input Boxes</legend>
149
+
150
+ <div class="fields">
151
+ <div class="field">
152
+ <label for="text-input">Text Input</label>
153
+ <input name="text-input" type="text" placeholder="Text Input" />
154
+ </div>
155
+
156
+ <div class="field">
157
+ <label for="textarea">Textarea</label>
158
+ <textarea id="textarea">Textarea</textarea>
159
+ </div>
160
+ </div>
161
+ </fieldset>
162
+
163
+ <fieldset>
164
+ <legend>Legend: Selects</legend>
165
+ <div class="fields">
166
+ <div class="field">
167
+
168
+ <label for="options">Select</label>
169
+ <select id="options" name="options">
170
+ <option value="" selected>Please choose</option>
171
+ <option value="option-1">Option 1</option>
172
+ <option value="option-2">Option 2</option>
173
+ <option value="option-3">Option 3</option>
174
+ <option value="option-4">Option 4</option>
175
+ <option value="option-5">Option 5</option>
176
+ <option value="option-6">Option 6</option>
177
+ </select>
178
+ </div>
179
+
180
+ <div class="field">
181
+ <label for="grouped-options">Grouped Select</label>
182
+ <select name="grouped-options" id="grouped-options">
183
+ <optgroup label="1st Grouping">
184
+ <option value="Option 1">Option 1</option>
185
+ <option value="Option 2">Option 2</option>
186
+ <option value="Option 3">Option 3</option>
187
+ </optgroup>
188
+
189
+ <optgroup label="2nd Grouping">
190
+ <option value="Option 4">Option 4</option>
191
+ <option value="Option 5">Option 5</option>
192
+ </optgroup>
193
+ </select>
194
+ </div>
195
+
196
+ <div class="field">
197
+ <label for="grouped-options">Multi-select</label>
198
+ <select multiple="multiple" size="2">
199
+ <option value="volvo">Volvo</option>
200
+ <option value="saab">Saab</option>
201
+ <option value="mercedes">Mercedes</option>
202
+ <option value="audi">Audi</option>
203
+ </select>
204
+
205
+ </div>
206
+ </div>
207
+ </fieldset>
208
+
209
+ <fieldset>
210
+ <legend>Legend: Check Boxes &amp; Radio Buttons</legend>
211
+
212
+ <div class="fields">
213
+ <div class="field">
214
+ <label for="checkbox-1">Checkbox 1</label>
215
+ <input id="checkbox-1" name="checkbox-1" type="checkbox" />
216
+ </div>
217
+
218
+ <div class="field">
219
+ <label for="checkbox-2">Checkbox 2</label>
220
+ <input id="checkbox-2" name="checkbox-2" type="checkbox" />
221
+ </div>
222
+
223
+ <div class="field">
224
+ <label for="checkbox-3">Checkbox 3</label>
225
+ <input id="checkbox-3" name="checkbox-3" type="checkbox" />
226
+ </div>
227
+
228
+ <div class="field">
229
+ <label for="radio-1">Radio 1</label>
230
+ <input id="radio-1" name="group-1" type="radio" />
231
+ </div>
232
+
233
+ <div class="field">
234
+ <label for="radio-2">Radio 2</label>
235
+ <input id="radio-2" name="group-1" type="radio" />
236
+ </div>
237
+
238
+ <div class="field">
239
+ <label for="radio-3">Radio 3</label>
240
+ <input id="radio-3" name="group-1" type="radio" />
241
+ </div>
242
+
243
+
244
+ </div>
245
+ </fieldset>
246
+
247
+ <fieldset>
248
+ <legend>Legend: Buttons</legend>
249
+
250
+ <div class="actions">
251
+
252
+ <input name="submit" type="submit" value="Submit Input">
253
+
254
+ <button>Button</button>
255
+
256
+ </div>
257
+ </fieldset>
258
+
259
+ </form>
260
+ </section>
261
+
262
+ <section id="tables-examples">
263
+ <h4>Tables</h4>
264
+ <table>
265
+ <tr>
266
+ <th scope="col">A</th>
267
+ <th scope="col">B</th>
268
+ <th scope="col">C</th>
269
+ <th scope="col">D</th>
270
+ </tr>
271
+ <tr>
272
+ <td>Data</td>
273
+ <td>Data</td>
274
+ <td>Data</td>
275
+ <td>Data</td>
276
+ </tr>
277
+ </table>
278
+
279
+ <table>
280
+ <tr>
281
+ <th scope="row">1</th>
282
+ <td>Data</td>
283
+ </tr>
284
+ <tr>
285
+ <th scope="row">2</th>
286
+ <td>Data</td>
287
+ </tr>
288
+ <tr>
289
+ <th scope="row">3</th>
290
+ <td>Data</td>
291
+ </tr>
292
+ <tr>
293
+ <th scope="row">4</th>
294
+ <td>Data</td>
295
+ </tr>
296
+ </table>
297
+ </section>
298
+
299
+
300
+
301
+ <section id="effects-examples">
302
+ <h4>CSS3 Effects</h4>
303
+
304
+ <div class="effects-example">
305
+ <div id="box-shadow" class="effects-box"></div>
306
+ <pre><code>
307
+
308
+ // Box Shadows
309
+ @include box-shadow(4px 4px 4px fade-out(#000, 0.75))
310
+
311
+ </code></pre>
312
+ </div>
313
+ <div class="effects-example">
314
+ <div id="border-radius" class="effects-box"></div>
315
+ <pre><code>
316
+
317
+ // Border Radius
318
+ @include border-radius(10px)
319
+
320
+ </code></pre>
321
+ </div>
322
+
323
+ <div class="effects-example">
324
+ <div id="linear-gradient" class="effects-box"></div>
325
+ <pre><code>
326
+
327
+ // Gradients
328
+ @include linear-gradient(#ccc, #777)
329
+
330
+ </code></pre>
331
+ </div>
332
+ </section>
333
+
334
+
335
+ </div><!-- /content -->
336
+
337
+ <footer>
338
+ </footer>
339
+
340
+ </body>
341
+ </html>