piecss 0.5.0 → 0.6.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (65) hide show
  1. checksums.yaml +4 -4
  2. data/sass/piecss/_behavior.css +432 -1
  3. data/sass/piecss/_behavior.css.map +2 -2
  4. data/sass/piecss/_behavior.scss +10 -0
  5. data/sass/piecss/_utilities.scss +1 -1
  6. data/sass/piecss/behavior/base/_base.scss +3 -568
  7. data/sass/piecss/behavior/base/_collection.scss +861 -0
  8. data/sass/piecss/behavior/base/_settings.scss +38 -367
  9. data/sass/piecss/behavior/button/_button.scss +1 -1
  10. data/sass/piecss/behavior/form/_form.scss +1 -1
  11. data/sass/piecss/settings/_breakpoint.css +70 -0
  12. data/sass/piecss/settings/_colour.css +2 -0
  13. data/sass/piecss/settings/_colour.css.map +7 -0
  14. data/sass/piecss/settings/_colour.scss +2 -4
  15. data/sass/piecss/settings/_constants.css +2 -0
  16. data/sass/piecss/settings/_constants.css.map +7 -0
  17. data/sass/piecss/settings/_fallback.css +2 -0
  18. data/sass/piecss/settings/_fallback.css.map +7 -0
  19. data/sass/piecss/settings/_font.css +2 -0
  20. data/sass/piecss/settings/_font.css.map +7 -0
  21. data/sass/piecss/settings/_layout.css +60 -0
  22. data/sass/piecss/settings/_miscellaneous.css +2 -0
  23. data/sass/piecss/settings/_miscellaneous.css.map +7 -0
  24. data/sass/piecss/settings/_rhythm.css +2 -0
  25. data/sass/piecss/settings/_rhythm.css.map +7 -0
  26. data/sass/piecss/settings/_typography.css +2 -0
  27. data/sass/piecss/settings/_typography.css.map +7 -0
  28. data/sass/piecss/settings/_unit.css +2 -0
  29. data/sass/piecss/settings/_unit.css.map +7 -0
  30. data/sass/piecss/settings/_unit.scss +1 -1
  31. data/sass/piecss/utilities/_breakpoint.css +2 -0
  32. data/sass/piecss/utilities/_breakpoint.css.map +7 -0
  33. data/sass/piecss/utilities/_cache.css +2 -0
  34. data/sass/piecss/utilities/_cache.css.map +7 -0
  35. data/sass/piecss/utilities/_collection.scss +192 -0
  36. data/sass/piecss/utilities/_colour.css +2 -0
  37. data/sass/piecss/utilities/_colour.css.map +7 -0
  38. data/sass/piecss/utilities/_element.css +2 -0
  39. data/sass/piecss/utilities/_element.css.map +7 -0
  40. data/sass/piecss/utilities/_image.css +2 -0
  41. data/sass/piecss/utilities/_image.css.map +7 -0
  42. data/sass/piecss/utilities/_layout.css +2 -0
  43. data/sass/piecss/utilities/_layout.css.map +7 -0
  44. data/sass/piecss/utilities/_list.css +2 -0
  45. data/sass/piecss/utilities/_list.css.map +7 -0
  46. data/sass/piecss/utilities/_miscellaneous.css +2 -0
  47. data/sass/piecss/utilities/_miscellaneous.css.map +7 -0
  48. data/sass/piecss/utilities/_rhythm.css +2 -0
  49. data/sass/piecss/utilities/_rhythm.css.map +7 -0
  50. data/sass/piecss/utilities/_side.css +2 -0
  51. data/sass/piecss/utilities/_side.css.map +7 -0
  52. data/sass/piecss/utilities/_string.css +2 -0
  53. data/sass/piecss/utilities/_string.css.map +7 -0
  54. data/sass/piecss/utilities/_svg.css +2 -0
  55. data/sass/piecss/utilities/_svg.css.map +7 -0
  56. data/sass/piecss/utilities/_typography.css +2 -0
  57. data/sass/piecss/utilities/_typography.css.map +7 -0
  58. data/sass/piecss/utilities/_typography.scss +16 -16
  59. data/sass/piecss/utilities/_unit.css +2 -0
  60. data/sass/piecss/utilities/_unit.css.map +7 -0
  61. data/sass/piecss/utilities/_unit.scss +10 -7
  62. data/templates/project/examples.html +370 -218
  63. metadata +49 -3
  64. data/sass/piecss/behavior/base/_normalize.scss +0 -463
  65. data/sass/piecss/utilities/_element.scss +0 -180
data/templates/project/examples.html CHANGED
@@ -1,225 +1,377 @@
1
1
  <!DOCTYPE html>
2
2
  <html lang="en">
3
- <head>
4
- <meta charset="utf-8" />
5
- <title>Piecss</title>
6
- <link href="../../sass/piecss/_behavior.css" rel="stylesheet" media="screen">
7
- <!-- <link href="./stylesheets/piecss.css" rel="stylesheet" media="screen"> -->
8
- </head>
9
- <body>
10
-
11
-
12
- <div class="main">
13
-
14
- <h2>Layout</h2>
15
-
16
- Please refer to the reference guide on http://www.piecss.com/docs.
17
- You can also find tutorials on http://www.piecss.com/tutorials.
18
-
19
-
20
- <div class="column">1</div><!--
21
- --><div class="column column--half">2</div><!--
22
- --><div class="column column--half">3</div><!--
23
- --><div class="column column--half">4</div><!--
24
- --><div class="column column--half">5</div><!--
25
- --><div class="column column--half">
26
- <div class="column column--half">7</div><!--
27
- --><div class="column column--half">8</div><!--
28
- --></div>
29
-
30
-
31
- <h2>Type</h2>
32
-
33
- <h1>Heading 1</h1>
34
- <h2>Heading 2</h2>
35
- <h3>Heading 3</h3>
36
- <h4>Heading 4</h4>
37
- <h5>Heading 5</h5>
38
- <h6>Heading 6</h6>
39
-
40
- <p class="column">Sweet <a href="#cantgothere">gingerbread</a> tiramisu cotton candy sweet roll. Sugar plum sweet sugar plum. Tiramisu bear claw pie tiramisu. Donut candy canes chocolate cake icing gummies. Tiramisu gummi bears danish chocolate cake halvah jelly cake. Marzipan unerdwear.com bonbon apple pie wafer tart cookie. Liquorice cookie jelly-o marzipan muffin. Chocolate bar jujubes ice cream muffin tiramisu pudding. Dragée dessert dessert. Soufflé tiramisu sweet biscuit cheesecake donut. Wafer toffee dessert bonbon muffin toffee. Apple pie marzipan dessert icing gummies tart marshmallow. Biscuit gingerbread cupcake cake cupcake tootsie roll. Brownie cheesecake cupcake halvah.</p>
41
-
42
-
43
- <h2>Lists</h2>
44
-
45
- <ul>
46
- <li>Gingerbread</li>
47
- <li>Tiramisu</li>
48
- <li>Cotton candy</li>
49
- </ul>
50
-
51
- <ol>
52
- <li>Gingerbread</li>
53
- <li>Tiramisu</li>
54
- <li>Cotton candy</li>
55
- </ol>
56
-
57
- <ul class="list">
58
- <li>Gingerbread</li>
59
- <li>Tiramisu</li>
60
- <li>Cotton candy
61
- <ol class="list">
62
- <li>Gingerbread</li>
63
- <li>Tiramisu</li>
64
- <li>Cotton candy
65
- <ol class="list list--outside">
66
- <li>Gingerbread</li>
67
- <li>Tiramisu</li>
68
- <li>Cotton candy</li>
3
+
4
+ <head>
5
+ <meta charset="utf-8" />
6
+ <title>Piecss - Test Markup</title>
7
+ <link href="../../sass/piecss/_behavior.css" rel="stylesheet" media="screen">
8
+ <!-- <link href="./stylesheets/piecss.css" rel="stylesheet" media="screen"> -->
9
+ </head>
10
+
11
+ <body>
12
+
13
+ <nav>
14
+ <a href="#headings">Headings</a>&nbsp;&nbsp;|&nbsp;&nbsp;
15
+ <a href="#inline-elements">Inline&nbsp;Elements</a>&nbsp;&nbsp;|&nbsp;&nbsp;
16
+ <a href="#phrase-tags">Inline&nbsp;Elements</a>&nbsp;&nbsp;|&nbsp;&nbsp;
17
+ <a href="#block-elements">Block&nbsp;Elements</a>&nbsp;&nbsp;|&nbsp;&nbsp;
18
+ <a href="#embedded-content">Embedded Content</a>&nbsp;&nbsp;|&nbsp;&nbsp;
19
+ <a href="#lists">Lists</a>&nbsp;&nbsp;|&nbsp;&nbsp;
20
+ <a href="#forms">Forms</a>&nbsp;&nbsp;|&nbsp;&nbsp;
21
+ <a href="#tables">Tables</a>&nbsp;&nbsp;|&nbsp;&nbsp;
22
+ </nav>
23
+
24
+ <hr/>
25
+
26
+ <section id="headings">
27
+ <h1>Heading 1</h1>
28
+ <h2>Heading 2</h2>
29
+ <h3>Heading 3</h3>
30
+ <h4>Heading 4</h4>
31
+ <h5>Heading 5</h5>
32
+ <h6>Heading 6</h6>
33
+ </section>
34
+
35
+ <hr/>
36
+
37
+ <section id="inline-elements">
38
+ <p>
39
+ Paragraph, with <a>anchor (no href)</a> element.
40
+ </p>
41
+ <p>
42
+ Paragraph, with <a href="javascript:void();">link</a> element.
43
+ </p>
44
+ <p>
45
+ Paragraph, with <a href="">visited link</a> element.
46
+ </p>
47
+ <p>
48
+ Paragraph, with <abbr>abbreviation</abbr> element.
49
+ </p>
50
+ <p>
51
+ Paragraph, with <abbr title="explanation">abbreviation
52
+ (with title)</abbr> element.
53
+ </p>
54
+ <p>
55
+ Paragraph, with <b>bold</b> element.
56
+ </p>
57
+ <p>
58
+ Paragraph, with <bdi>bi-directional isolation</bdi> element.
59
+ </p>
60
+ <p>
61
+ <bdo dir="ltr">Paragraph, with bi-directional override (left-to-right)
62
+ element</bdo> (bdo element direction left-to-right).
63
+ </p>
64
+ <p>
65
+ <bdo dir="rtl">Paragraph, with bi-directional override (right-to-left)
66
+ element</bdo> (bdo element direction right-to-left).
67
+ </p>
68
+ <p>
69
+ Paragraph, with <cite>citation</cite> element.
70
+ </p>
71
+ <p>
72
+ Paragraph, with <del>deleted</del> element.
73
+ </p>
74
+ <p>
75
+ Paragraph, with <dfn>definition</dfn> element.
76
+ </p>
77
+ <p>
78
+ Paragraph, with <dfn title="explanation">definition (with title)</dfn>
79
+ element.
80
+ </p>
81
+ <p>
82
+ Paragraph, with <i>italic</i> element.
83
+ </p>
84
+ <p>
85
+ Paragraph, with <ins>inserted</ins> element.
86
+ </p>
87
+ <p>
88
+ Paragraph, with <mark>highlight</mark> element.
89
+ </p>
90
+ <p>
91
+ Paragraph, with <q>inline quotation</q> element.
92
+ </p>
93
+ <p>
94
+ Paragraph, with incorrect, inaccurate or irrelevant <s>text</s> element.
95
+ </p>
96
+ <p>
97
+ Paragraph, with <strong>strong (important)</strong> element.
98
+ </p>
99
+ <p>
100
+ Paragraph, with superscript<sup>2</sup> element.
101
+ </p>
102
+ <p>
103
+ Paragraph, with subscript<sub>2</sub> element.
104
+ </p>
105
+ <p>
106
+ Paragraph, with subscript<time datetime="2017-01-06 08:00">time</time>
107
+ element.
108
+ </p>
109
+ <p>
110
+ Paragraph, with misspelled <u>underlined</u> element.
111
+ </p>
112
+ </section>
113
+
114
+ <hr/>
115
+
116
+ <section id="phrase-tags">
117
+ <p><code>A piece of computer code</code></p>
118
+ <p><em>Emphasized text</em></p>
119
+ <p><kbd>Keyboard input</kbd></p>
120
+ <p><samp>Sample output from a computer program</samp></p>
121
+ <p><strong>Strong text</strong></p>
122
+ <p><var>Variable</var></p>
123
+ </section>
124
+
125
+ <hr/>
126
+
127
+ <section id="block-elements">
128
+ <p>
129
+ Paragraph – Lorem ipsum dolor sit amet, consectetur adipisicing elit,
130
+ sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
131
+ enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
132
+ aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit
133
+ in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
134
+ Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
135
+ officia deserunt mollit anim id est laborum. Donec elementum ligula eu
136
+ sapien consequat eleifend.
137
+ </p>
138
+ <pre>
139
+ Preformatted – Lorem ipsum dolor sit amet, consectetur adipisicing elit,
140
+ sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
141
+ enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
142
+ aliquip ex ea commodo consequat.
143
+ </pre>
144
+ <blockquote cite="http://www.worldwildlife.org/who/index.html">
145
+ For 50 years, WWF has been protecting the future of nature. The world's
146
+ leading conservation organization, WWF works in 100 countries and is
147
+ supported by 1.2 million members in the United States and close to
148
+ 5 million globally.
149
+ </blockquote>
150
+ <address>
151
+ Written by <a href="mailto:webmaster@example.com">Jon Doe</a>.<br>
152
+ Visit us at:<br>
153
+ Example.com<br>
154
+ Box 564, Disneyland<br>
155
+ USA
156
+ </address>
157
+ <details>
158
+ <summary>Copyright 1999-2014.</summary>
159
+ <p> - by Refsnes Data. All Rights Reserved.</p>
160
+ <p>
161
+ All content and graphics on this web site are the property of the
162
+ company Refsnes Data.
163
+ </p>
164
+ </details>
165
+ <p>
166
+ The <code>&lt;dialog&gt;</code> tag defines a dialog box or window.
167
+ This paragraph contains an open and a closed dialogue box. The
168
+ <code>&lt;dialog&gt;</code> element makes it easy to create popup
169
+ dialogs and modals on a web page.
170
+ <dialog open>This is an open dialog window</dialog>
171
+ <dialog>This is a closed dialog window</dialog>
172
+ </p>
173
+ </section>
174
+
175
+ <hr/>
176
+
177
+ <section id="embedded-content">
178
+ <object width="400" height="400" data="http://www.w3schools.com/tags/helloworld.swf"></object>
179
+ <embed src="http://www.w3schools.com/tags/helloworld.swf">
180
+ <figure>
181
+ <img src="http://www.w3schools.com/tags/img_pulpit.jpg" alt="The Pulpit Rock" width="304" height="228">
182
+ <figcaption>Fig1. - A view of the pulpit rock in Norway.</figcaption>
183
+ </figure>
184
+ <img src="http://www.w3schools.com/tags/smiley.gif" alt="Smiley face" height="42" width="42">
185
+ <audio controls>
186
+ <source src="http://www.w3schools.com/tags/horse.ogg" type="audio/ogg">
187
+ <source src="http://www.w3schools.com/tags/horse.mp3" type="audio/mpeg">
188
+ Your browser does not support the audio tag.
189
+ </audio>
190
+ <iframe src="http://www.w3schools.com"></iframe>
191
+ </section>
192
+
193
+ <hr/>
194
+
195
+ <section id="lists">
196
+ <ul>
197
+ <li>First</li>
198
+ <li>Second</li>
199
+ <li>Third</li>
200
+ <li>
201
+ Nested
202
+ <ul>
203
+ <li>First</li>
204
+ <li>Second</li>
205
+ <li>Third</li>
206
+ <li>
207
+ Nested
208
+ <ul>
209
+ <li>First</li>
210
+ <li>Second</li>
211
+ <li>Third</li>
212
+ <li>
213
+ Nested
214
+ <ul>
215
+ <li>First</li>
216
+ <li>Second</li>
217
+ <li>Third</li>
218
+ </ul>
219
+ </li>
220
+ </ul>
221
+ </li>
222
+ </ul>
223
+ </li>
224
+ </ul>
225
+ <ol>
226
+ <li>First</li>
227
+ <li>Second</li>
228
+ <li>Third</li>
229
+ <li>
230
+ Nested
231
+ <ol>
232
+ <li>First</li>
233
+ <li>Second</li>
234
+ <li>Third</li>
235
+ <li>
236
+ Nested
237
+ <ul>
238
+ <li>First</li>
239
+ <li>Second</li>
240
+ <li>Third</li>
241
+ <li>
242
+ Nested
243
+ <ul>
244
+ <li>First</li>
245
+ <li>Second</li>
246
+ <li>Third</li>
247
+ </ul>
248
+ </li>
249
+ </ul>
250
+ </li>
69
251
  </ol>
70
252
  </li>
71
253
  </ol>
254
+ <dl>
255
+ <dt>Coffee</dt>
256
+ <dd>Black hot drink</dd>
257
+ <dd>Can be drunk with milk</dd>
258
+ <dt>Milk</dt>
259
+ <dd>White cold drink</dd>
260
+ <dd>Can also be hot</dd>
261
+ </dl>
262
+ </section>
263
+
264
+ <hr/>
265
+
266
+ <section id="forms">
267
+ <form>
268
+ <fieldset>
269
+ <legend>Legend</legend>
270
+ </fieldset>
271
+ <fieldset>
272
+ <legend>Buttons</legend>
273
+ <button type="button">Button</button>
274
+ <button type="submit">Submit button</button>
275
+ <button type="reset">Reset button</button>
276
+ <input type="submit" value="Input submit" />
277
+ <input type="reset" value="Input reset" />
278
+ </fieldset>
279
+ <fieldset>
280
+ <legend>Data list</legend>
281
+ <input list="browsers">
282
+ <datalist id="browsers">
283
+ <option value="Internet Explorer">
284
+ <option value="Firefox">
285
+ <option value="Chrome">
286
+ <option value="Opera">
287
+ <option value="Safari">
288
+ </datalist>
289
+ </fieldset>
290
+ <progress value="22" max="100"></progress>
291
+ </form>
292
+ <meter value="2" min="0" max="10">2 out of 10</meter><br>
293
+ <meter value="0.6">60%</meter>
294
+ <form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
295
+ <input type="range" id="a" value="50">100 +
296
+ <input type="number" id="b" value="50"> =
297
+ <output name="x" for="a b"></output>
298
+ </form>
299
+ </section>
300
+
301
+ <hr/>
302
+
303
+ <section id="tables">
304
+ <table>
305
+ <caption>Monthly savings</caption>
306
+ <tr>
307
+ <th>Month</th>
308
+ <th>Savings</th>
309
+ </tr>
310
+ <tr>
311
+ <td>January</td>
312
+ <td>$100</td>
313
+ </tr>
314
+ </table>
315
+ <table>
316
+ <colgroup>
317
+ <col span="2" style="background-color:red">
318
+ <col style="background-color:yellow">
319
+ </colgroup>
320
+ <tr>
321
+ <th>ISBN</th>
322
+ <th>Title</th>
323
+ <th>Price</th>
324
+ </tr>
325
+ <tr>
326
+ <td>3476896</td>
327
+ <td>My first HTML</td>
328
+ <td>$53</td>
329
+ </tr>
330
+ </table>
331
+ <table>
332
+ <tr>
333
+ <th>January
334
+ <dialog open>This is an open dialog window</dialog>
335
+ </th>
336
+ <th>February
337
+ <dialog>This is a closed dialog window</dialog>
338
+ </th>
339
+ <th>March</th>
340
+ </tr>
341
+ <tr>
342
+ <td>31</td>
343
+ <td>28</td>
344
+ <td>31</td>
345
+ </tr>
346
+ </table>
347
+ <table>
348
+ <thead>
349
+ <tr>
350
+ <th>Month</th>
351
+ <th>Savings</th>
352
+ </tr>
353
+ </thead>
354
+ <tfoot>
355
+ <tr>
356
+ <td>Sum</td>
357
+ <td>$180</td>
358
+ </tr>
359
+ </tfoot>
360
+ <tbody>
361
+ <tr>
362
+ <td>January</td>
363
+ <td>$100</td>
364
+ </tr>
365
+ <tr>
366
+ <td>February</td>
367
+ <td>$80</td>
368
+ </tr>
369
+ </tbody>
370
+ </table>
371
+ </section>
372
+
373
+ <hr />
374
+
375
+ </body>
72
376
 
73
- <ul class="list">
74
- <li>Gingerbread</li>
75
- <li>Tiramisu</li>
76
- <li>Cotton candy</li>
77
- </ul>
78
- </li>
79
- </ul>
80
-
81
- <ol class="list">
82
- <li>Gingerbread</li>
83
- <li>Tiramisu</li>
84
- <li>Cotton candy</li>
85
- <li>Gingerbread</li>
86
- <li>Tiramisu</li>
87
- <li>Cotton candy</li>
88
- <li>Gingerbread</li>
89
- <li>Tiramisu</li>
90
- <li>Cotton candy</li>
91
- <li>Gingerbread</li>
92
- <li>Tiramisu</li>
93
- <li>Cotton candy</li>
94
- </ol>
95
-
96
-
97
- <h2>Tables</h2>
98
-
99
- <table>
100
- <caption>Recipees</caption>
101
- <colgroup>
102
- <col class="name" title="Name">
103
- <col class="ingredients" title="Ingredients">
104
- <col class="time" title="Cooking Time">
105
- </colgroup>
106
- <tbody>
107
- <tr>
108
- <td>Candy sweet roll</td>
109
- <td>
110
- <ul>
111
- <li>Sugar</li>
112
- <li>Flour</li>
113
- <li>Butter</li>
114
- </ul>
115
- </td>
116
- <td>20 minutes</td>
117
- </tr>
118
- </tbody>
119
- <thead>
120
- <tr>
121
- <th>Name</th>
122
- <th>Ingredients</th>
123
- <th>Cooking Time</th>
124
- </tr>
125
- </thead>
126
- <tfoot>
127
- <tr>
128
- <td id="3">Sugar is bad for you.</td>
129
- </tr>
130
- </tfoot>
131
- </table>
132
-
133
-
134
- <h2>Forms</h2>
135
-
136
- <form>
137
- <fieldset>
138
- <legend>Recipe</legend>
139
- <fieldset>
140
- <legend>Ingredients</legend>
141
- <div>
142
- <label for="text">Type</label>
143
- <input class="" id="text" type="text" value="">
144
- </div>
145
- <div>
146
- <label for="search">Search</label>
147
- <input class="" id="text" type="search" value="">
148
- </div>
149
- <div>
150
- <label for="color">Color</label>
151
- <input class="" id="text" type="color" value="">
152
- </div>
153
- <div>
154
- <label for="range">Range</label>
155
- <input class="" id="text" type="range" value="">
156
- </div>
157
- <div>
158
- <label for="select1">Select</label>
159
- <select name="select1">
160
- <option>Pick one</option>
161
- <optgroup label="Group">
162
- <option>High in calories</option>
163
- <option>Low in calories</option>
164
- </optgroup>
165
- </select>
166
- </div>
167
- <div>
168
- <label for="select2">Select</label>
169
- <select name="select2" size="5" multiple="multiple">
170
- <option>Pick many</option>
171
- <optgroup label="Group">
172
- <option>High in calories</option>
173
- <option>Low in calories</option>
174
- </optgroup>
175
- </select>
176
- </div>
177
- <fieldset>
178
- <legend>Choose</legend>
179
- <div>
180
- <label for="radio1">High in calories</label>
181
- <input class="" id="radio1" type="radio" name="radio" value="">
182
- </div>
183
- <div>
184
- <label for="radio2">Low in calories</label>
185
- <input class="" id="radio2" type="radio" name="radio" value="">
186
- </div>
187
- </fieldset>
188
- <fieldset>
189
- <legend>Check</legend>
190
- <div>
191
- <label for="check1">High in calories</label>
192
- <input class="" id="check1" type="checkbox" name="checkbox" value="">
193
- </div>
194
- <div>
195
- <label for="check2">Low in calories</label>
196
- <input class="" id="check2" type="checkbox" name="checkbox" value="">
197
- </div>
198
- </fieldset>
199
- </fieldset>
200
- <fieldset>
201
- <legend>Preparation</legend>
202
- <div>
203
- <label for="textarea">Name</label>
204
- <textarea class="" id="textarea"></textarea>
205
- </div>
206
- <div>
207
- <label for="textarea">Name</label>
208
- <textarea class="editor--medium" id="textarea"></textarea>
209
- </div>
210
- <div>
211
- <label for="textarea">Name</label>
212
- <textarea class="editor--large" id="textarea"></textarea>
213
- </div>
214
- </fieldset>
215
- </fieldset>
216
- </form>
217
-
218
- </div><!--
219
- --><div class="side">
220
- <p class="column">Sweet <a href="#cantgothere">gingerbread</a> tiramisu cotton candy sweet roll. Sugar plum sweet sugar plum. Tiramisu bear claw pie tiramisu. Donut candy canes chocolate cake icing gummies. Tiramisu gummi bears danish chocolate cake halvah jelly cake. Marzipan unerdwear.com bonbon apple pie wafer tart cookie. Liquorice cookie jelly-o marzipan muffin. Chocolate bar jujubes ice cream muffin tiramisu pudding. Dragée dessert dessert. Soufflé tiramisu sweet biscuit cheesecake donut. Wafer toffee dessert bonbon muffin toffee. Apple pie marzipan dessert icing gummies tart marshmallow. Biscuit gingerbread cupcake cake cupcake tootsie roll. Brownie cheesecake cupcake halvah.</p>
221
- </div>
222
-
223
-
224
- </body>
225
377
  </html>