survivalkit 1.0.beta.11 → 1.0.beta.12

Sign up to get free protection for your applications and to get access to all the features.
Files changed (107) hide show
  1. data/CHANGELOG.markdown +4 -0
  2. data/lib/survivalkit.rb +2 -2
  3. data/stylesheets/survivalkit/fonts/_all.scss +2 -0
  4. data/stylesheets/survivalkit/fonts/_ss-social.scss +136 -0
  5. data/stylesheets/survivalkit/fonts/_ss-standard.scss +426 -0
  6. data/stylesheets/survivalkit/reset/_reset.scss +4 -0
  7. data/templates/clean/manifest.rb +0 -2
  8. data/templates/drupal/manifest.rb +0 -2
  9. data/templates/project/manifest.rb +44 -46
  10. data/templates/project/sources/FitVids/README.md +49 -0
  11. data/templates/project/sources/FitVids/jquery.fitvids.js +80 -0
  12. data/templates/project/sources/FitVids/tests.html +66 -0
  13. data/templates/project/sources/Geared-Scrolling/README.md +31 -0
  14. data/templates/project/sources/Geared-Scrolling/css/specific.css +88 -0
  15. data/templates/project/sources/Geared-Scrolling/images/col1.png +0 -0
  16. data/templates/project/sources/Geared-Scrolling/images/col2.png +0 -0
  17. data/templates/project/sources/Geared-Scrolling/images/col3.png +0 -0
  18. data/templates/project/sources/Geared-Scrolling/images/header.png +0 -0
  19. data/templates/project/sources/Geared-Scrolling/index.html +32 -0
  20. data/templates/project/sources/Geared-Scrolling/js/init.js +11 -0
  21. data/templates/project/sources/Geared-Scrolling/js/jquery.heyday.gearedscrolling.js +283 -0
  22. data/templates/project/sources/Lettering.js/README.md +58 -0
  23. data/templates/project/sources/Lettering.js/examples/index.html +135 -0
  24. data/templates/project/sources/Lettering.js/examples/style.css +171 -0
  25. data/templates/project/sources/Lettering.js/jquery.lettering.js +66 -0
  26. data/templates/project/sources/Respond/README.md +100 -0
  27. data/templates/project/sources/Respond/cross-domain/example.html +24 -0
  28. data/templates/project/sources/Respond/cross-domain/respond-proxy.html +96 -0
  29. data/templates/project/sources/Respond/cross-domain/respond.proxy.gif +0 -0
  30. data/templates/project/sources/Respond/cross-domain/respond.proxy.js +127 -0
  31. data/templates/project/sources/Respond/respond.min.js +6 -0
  32. data/templates/project/sources/Respond/respond.src.js +326 -0
  33. data/templates/project/sources/Respond/test/test.css +80 -0
  34. data/templates/project/sources/Respond/test/test.html +20 -0
  35. data/templates/project/sources/Respond/test/test2.css +8 -0
  36. data/templates/project/sources/Respond/test/unit/index.html +29 -0
  37. data/templates/project/sources/Respond/test/unit/qunit/qunit.css +226 -0
  38. data/templates/project/sources/Respond/test/unit/qunit/qunit.js +1598 -0
  39. data/templates/project/sources/Respond/test/unit/test.css +73 -0
  40. data/templates/project/sources/Respond/test/unit/test2.css +5 -0
  41. data/templates/project/sources/Respond/test/unit/test3.css +5 -0
  42. data/templates/project/sources/Respond/test/unit/tests.js +144 -0
  43. data/templates/project/sources/box-sizing-polyfill/README.md +24 -0
  44. data/templates/project/sources/box-sizing-polyfill/boxsizing.htc +501 -0
  45. data/templates/project/sources/formalize/README.txt +26 -0
  46. data/templates/project/sources/formalize/assets/css/_formalize.sass +326 -0
  47. data/templates/project/sources/formalize/assets/css/demo.css +654 -0
  48. data/templates/project/sources/formalize/assets/css/formalize.css +368 -0
  49. data/templates/project/sources/formalize/assets/css/reset.css +211 -0
  50. data/templates/project/sources/formalize/assets/css/text.css +81 -0
  51. data/templates/project/sources/formalize/assets/images/button.png +0 -0
  52. data/templates/project/sources/formalize/assets/images/select_arrow.gif +0 -0
  53. data/templates/project/sources/formalize/assets/js/dojo.formalize.js +202 -0
  54. data/templates/project/sources/formalize/assets/js/dojo.formalize.min.js +1 -0
  55. data/templates/project/sources/formalize/assets/js/extjs.formalize.js +192 -0
  56. data/templates/project/sources/formalize/assets/js/extjs.formalize.min.js +1 -0
  57. data/templates/project/sources/formalize/assets/js/jquery.formalize.js +181 -0
  58. data/templates/project/sources/formalize/assets/js/jquery.formalize.min.js +1 -0
  59. data/templates/project/sources/formalize/assets/js/mootools.formalize.js +193 -0
  60. data/templates/project/sources/formalize/assets/js/mootools.formalize.min.js +1 -0
  61. data/templates/project/sources/formalize/assets/js/prototype.formalize.js +192 -0
  62. data/templates/project/sources/formalize/assets/js/prototype.formalize.min.js +1 -0
  63. data/templates/project/sources/formalize/assets/js/yui.formalize.js +183 -0
  64. data/templates/project/sources/formalize/assets/js/yui.formalize.min.js +1 -0
  65. data/templates/project/sources/formalize/demo.html +130 -0
  66. data/templates/project/sources/formalize/dojo_demo.html +215 -0
  67. data/templates/project/sources/formalize/dojo_disabled.html +215 -0
  68. data/templates/project/sources/formalize/dojo_errors.html +215 -0
  69. data/templates/project/sources/formalize/extjs_demo.html +215 -0
  70. data/templates/project/sources/formalize/extjs_disabled.html +215 -0
  71. data/templates/project/sources/formalize/extjs_errors.html +215 -0
  72. data/templates/project/sources/formalize/jquery_demo.html +215 -0
  73. data/templates/project/sources/formalize/jquery_disabled.html +215 -0
  74. data/templates/project/sources/formalize/jquery_errors.html +215 -0
  75. data/templates/project/sources/formalize/mootools_demo.html +215 -0
  76. data/templates/project/sources/formalize/mootools_disabled.html +215 -0
  77. data/templates/project/sources/formalize/mootools_errors.html +215 -0
  78. data/templates/project/sources/formalize/prototype_demo.html +215 -0
  79. data/templates/project/sources/formalize/prototype_disabled.html +215 -0
  80. data/templates/project/sources/formalize/prototype_errors.html +215 -0
  81. data/templates/project/sources/formalize/unstyled.html +210 -0
  82. data/templates/project/sources/formalize/yui_demo.html +223 -0
  83. data/templates/project/sources/formalize/yui_disabled.html +223 -0
  84. data/templates/project/sources/formalize/yui_errors.html +223 -0
  85. data/templates/project/sources/iOS-Orientationchange-Fix/README.md +16 -0
  86. data/templates/project/sources/iOS-Orientationchange-Fix/demo.html +43 -0
  87. data/templates/project/sources/iOS-Orientationchange-Fix/ios-orientationchange-fix.js +56 -0
  88. data/templates/project/sources/jQuery-widowFix/index.html +159 -0
  89. data/templates/project/sources/jQuery-widowFix/js/jquery-1.4.3.min.js +166 -0
  90. data/templates/project/sources/jQuery-widowFix/js/jquery.widowFix-1.3.2.js +135 -0
  91. data/templates/project/sources/jQuery-widowFix/js/jquery.widowFix-1.3.2.min.js +10 -0
  92. data/templates/project/sources/jQuery-widowFix/sample.html +84 -0
  93. data/templates/project/sources/jquery-html5-placeholder-shim/jquery.html5-placeholder-shim.js +96 -0
  94. data/templates/project/sources/jquery-html5-placeholder-shim/readme.md +22 -0
  95. data/templates/project/sources/jquery-html5-placeholder-shim/test.html +103 -0
  96. data/templates/project/sources/ss-social/ss-social.js +78 -0
  97. data/templates/project/sources/ss-standard/ss-standard.js +78 -0
  98. data/templates/shared/partials/01-variables/_colors.scss +2 -6
  99. data/templates/shared/partials/01-variables/_fonts.scss +49 -2
  100. data/templates/shared/partials/01-variables/_settings.scss +48 -13
  101. data/templates/shared/partials/04-base/_all.scss +0 -2
  102. data/templates/shared/partials/04-base/_common.scss +0 -4
  103. data/templates/shared/partials/05-layout/_grids-susy.scss +4 -4
  104. data/templates/shared/style.scss +9 -9
  105. metadata +93 -5
  106. data/templates/shared/partials/04-base/_edits.scss +0 -8
  107. data/templates/shared/partials/04-base/_font-face.scss +0 -14
@@ -0,0 +1,215 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="utf-8" />
5
+ <title>Formalize CSS</title>
6
+ <link rel="stylesheet" href="assets/css/demo.css" />
7
+ <script src="http://ajax.googleapis.com/ajax/libs/ext-core/3.1.0/ext-core.js"></script>
8
+ <script src="assets/js/extjs.formalize.js"></script>
9
+ </head>
10
+ <body>
11
+ <div id="wrapper">
12
+ <h1>
13
+ Example of all form elements
14
+ </h1>
15
+ <form action="#" method="post" enctype="multipart/form-data" onsubmit="return false">
16
+ <p>
17
+ <input disabled="disabled" type="checkbox" id="test_checkbox_1" name="test_checkbox_1" />
18
+ <label for="test_checkbox_1">
19
+ Test checkbox 1
20
+ </label>
21
+ &nbsp;
22
+ &nbsp;
23
+ <input disabled="disabled" type="checkbox" id="test_checkbox_2" name="test_checkbox_2" />
24
+ <label for="test_checkbox_2">
25
+ Test checkbox 2
26
+ </label>
27
+ &nbsp;
28
+ &nbsp;
29
+ <input disabled="disabled" type="checkbox" id="test_checkbox_3" name="test_checkbox_3" />
30
+ <label for="test_checkbox_3">
31
+ Test checkbox 3
32
+ </label>
33
+ </p>
34
+ <p>
35
+ <input disabled="disabled" type="radio" id="test_radio_1" name="test_radio_group" />
36
+ <label for="test_radio_1">
37
+ Test radio 1
38
+ </label>
39
+ &nbsp;
40
+ &nbsp;
41
+ <input disabled="disabled" type="radio" id="test_radio_2" name="test_radio_group" />
42
+ <label for="test_radio_2">
43
+ Test radio 2
44
+ </label>
45
+ &nbsp;
46
+ &nbsp;
47
+ <input disabled="disabled" type="radio" id="test_radio_3" name="test_radio_group" />
48
+ <label for="test_radio_3">
49
+ Test radio 3
50
+ </label>
51
+ </p>
52
+ <p>
53
+ <label for="select_dd">
54
+ Select drop-down
55
+ </label>
56
+ <br />
57
+ <select disabled="disabled" id="select_dd" name="select_dd">
58
+ <optgroup label="Group 1">
59
+ <option value="1">Some text goes here</option>
60
+ <option value="2">Another choice could be here</option>
61
+ <option value="3">Yet another item to be chosen</option>
62
+ </optgroup>
63
+ <optgroup label="Group 2">
64
+ <option value="4">Some text goes here</option>
65
+ <option value="5">Another choice could be here</option>
66
+ <option value="6">Yet another item to be chosen</option>
67
+ </optgroup>
68
+ <optgroup label="Group 3">
69
+ <option value="7">Some text goes here</option>
70
+ <option value="8">Another choice could be here</option>
71
+ <option value="9">Yet another item to be chosen</option>
72
+ </optgroup>
73
+ </select>
74
+ <input disabled="disabled" type="text" id="text_inline" name="text_inline" />
75
+ <input disabled="disabled" type="button" value="Input Button" />
76
+ <button disabled="disabled">Button Tag</button>
77
+ <a href="#" class="button button_disabled">Link Button</a>
78
+ </p>
79
+ <p>
80
+ <label for="select_multi">
81
+ Select multiple
82
+ </label>
83
+ <br />
84
+ <select disabled="disabled" id="select_multi" name="select_multi" multiple="multiple" size="10">
85
+ <optgroup label="Group 1">
86
+ <option value="1">Some text goes here</option>
87
+ <option value="2">Another choice could be here</option>
88
+ <option value="3">Yet another item to be chosen</option>
89
+ </optgroup>
90
+ <optgroup label="Group 2">
91
+ <option value="4">Some text goes here</option>
92
+ <option value="5">Another choice could be here</option>
93
+ <option value="6">Yet another item to be chosen</option>
94
+ </optgroup>
95
+ <optgroup label="Group 3">
96
+ <option value="7">Some text goes here</option>
97
+ <option value="8">Another choice could be here</option>
98
+ <option value="9">Yet another item to be chosen</option>
99
+ </optgroup>
100
+ </select>
101
+ </p>
102
+ <p>
103
+ <label for="textarea">
104
+ Textarea
105
+ </label>
106
+ <br />
107
+ <textarea disabled="disabled" id="textarea" name="textarea" rows="5" placeholder="This is an example of HTML5 placeholder text."></textarea>
108
+ </p>
109
+ <table class="horiz">
110
+ <tr>
111
+ <td>
112
+ <label for="url">
113
+ URL + Autofocus
114
+ </label>
115
+ <br />
116
+ <input disabled="disabled" type="url" id="url" name="url" value="http://" autofocus="autofocus" />
117
+ </td>
118
+ <td>
119
+ <label for="email">
120
+ Email
121
+ </label>
122
+ <br />
123
+ <input disabled="disabled" type="email" id="email" name="email" placeholder="name@example.com" />
124
+ </td>
125
+ <td>
126
+ <label for="password">
127
+ Password
128
+ </label>
129
+ <br />
130
+ <input disabled="disabled" type="password" id="password" name="password" placeholder="Alphanumeric123!" />
131
+ </td>
132
+ </tr>
133
+ <tr>
134
+ <td>
135
+ <label for="datetime-local">
136
+ Datetime local
137
+ </label>
138
+ <br />
139
+ <input disabled="disabled" type="datetime-local" id="datetime-local" name="datetime-local" />
140
+ </td>
141
+ <td>
142
+ <label for="number">
143
+ Number
144
+ </label>
145
+ <br />
146
+ <input disabled="disabled" type="number" id="number" name="number" min="0" max="999" step="1" />
147
+ </td>
148
+ <td>
149
+ <label for="tel">
150
+ Tel (phone)
151
+ </label>
152
+ <br />
153
+ <input disabled="disabled" type="tel" id="tel" name="tel" />
154
+ </td>
155
+ </tr>
156
+ <tr>
157
+ <td>
158
+ <label for="datetime">
159
+ Datetime
160
+ </label>
161
+ <br />
162
+ <input disabled="disabled" type="datetime" id="datetime" name="datetime" />
163
+ </td>
164
+ <td>
165
+ <label for="date">
166
+ Date
167
+ </label>
168
+ <br />
169
+ <input disabled="disabled" type="date" id="date" name="date" />
170
+ </td>
171
+ <td>
172
+ <label for="month">
173
+ Month
174
+ </label>
175
+ <br />
176
+ <input disabled="disabled" type="month" id="month" name="month" />
177
+ </td>
178
+ </tr>
179
+ <tr>
180
+ <td>
181
+ <label for="search">
182
+ Search
183
+ </label>
184
+ <br />
185
+ <input disabled="disabled" type="search" id="search" name="search" />
186
+ </td>
187
+ <td>
188
+ <label for="range">
189
+ Range
190
+ </label>
191
+ <br />
192
+ <input disabled="disabled" type="range" id="range" name="range" />
193
+ </td>
194
+ <td>
195
+ <label for="file">
196
+ File upload
197
+ </label>
198
+ <br />
199
+ <input disabled="disabled" type="file" id="file" name="file" />
200
+ </td>
201
+ </tr>
202
+ </table>
203
+ <p>
204
+ <input disabled="disabled" type="submit" value="Input - Submit" />
205
+ &nbsp;
206
+ <input disabled="disabled" type="button" value="Input - Button" />
207
+ &nbsp;
208
+ <input disabled="disabled" type="reset" value="Input - Reset" />
209
+ &nbsp;
210
+ <button disabled="disabled">Button tag</button>
211
+ </p>
212
+ </form>
213
+ </div>
214
+ </body>
215
+ </html>
@@ -0,0 +1,215 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="utf-8" />
5
+ <title>Formalize CSS</title>
6
+ <link rel="stylesheet" href="assets/css/demo.css" />
7
+ <script src="http://ajax.googleapis.com/ajax/libs/ext-core/3.1.0/ext-core.js"></script>
8
+ <script src="assets/js/extjs.formalize.js"></script>
9
+ </head>
10
+ <body>
11
+ <div id="wrapper">
12
+ <h1>
13
+ Example of all form elements
14
+ </h1>
15
+ <form action="#" method="post" enctype="multipart/form-data" onsubmit="return false">
16
+ <p>
17
+ <input type="checkbox" id="test_checkbox_1" name="test_checkbox_1" />
18
+ <label class="error" for="test_checkbox_1">
19
+ Test checkbox 1
20
+ </label>
21
+ &nbsp;
22
+ &nbsp;
23
+ <input type="checkbox" id="test_checkbox_2" name="test_checkbox_2" />
24
+ <label class="error" for="test_checkbox_2">
25
+ Test checkbox 2
26
+ </label>
27
+ &nbsp;
28
+ &nbsp;
29
+ <input type="checkbox" id="test_checkbox_3" name="test_checkbox_3" />
30
+ <label class="error" for="test_checkbox_3">
31
+ Test checkbox 3
32
+ </label>
33
+ </p>
34
+ <p>
35
+ <input type="radio" id="test_radio_1" name="test_radio_group" />
36
+ <label class="error" for="test_radio_1">
37
+ Test radio 1
38
+ </label>
39
+ &nbsp;
40
+ &nbsp;
41
+ <input type="radio" id="test_radio_2" name="test_radio_group" />
42
+ <label class="error" for="test_radio_2">
43
+ Test radio 2
44
+ </label>
45
+ &nbsp;
46
+ &nbsp;
47
+ <input type="radio" id="test_radio_3" name="test_radio_group" />
48
+ <label class="error" for="test_radio_3">
49
+ Test radio 3
50
+ </label>
51
+ </p>
52
+ <p>
53
+ <label class="error" for="select_dd">
54
+ Select drop-down
55
+ </label>
56
+ <br />
57
+ <select class="error" id="select_dd" name="select_dd">
58
+ <optgroup label="Group 1">
59
+ <option value="1">Some text goes here</option>
60
+ <option value="2">Another choice could be here</option>
61
+ <option value="3">Yet another item to be chosen</option>
62
+ </optgroup>
63
+ <optgroup label="Group 2">
64
+ <option value="4">Some text goes here</option>
65
+ <option value="5">Another choice could be here</option>
66
+ <option value="6">Yet another item to be chosen</option>
67
+ </optgroup>
68
+ <optgroup label="Group 3">
69
+ <option value="7">Some text goes here</option>
70
+ <option value="8">Another choice could be here</option>
71
+ <option value="9">Yet another item to be chosen</option>
72
+ </optgroup>
73
+ </select>
74
+ <input class="error" type="text" id="text_inline" name="text_inline" />
75
+ <input type="button" value="Input Button" />
76
+ <button>Button Tag</button>
77
+ <a href="#" class="button">Link Button</a>
78
+ </p>
79
+ <p>
80
+ <label class="error" for="select_multi">
81
+ Select multiple
82
+ </label>
83
+ <br />
84
+ <select class="error" id="select_multi" name="select_multi" multiple="multiple" size="10">
85
+ <optgroup label="Group 1">
86
+ <option value="1">Some text goes here</option>
87
+ <option value="2">Another choice could be here</option>
88
+ <option value="3">Yet another item to be chosen</option>
89
+ </optgroup>
90
+ <optgroup label="Group 2">
91
+ <option value="4">Some text goes here</option>
92
+ <option value="5">Another choice could be here</option>
93
+ <option value="6">Yet another item to be chosen</option>
94
+ </optgroup>
95
+ <optgroup label="Group 3">
96
+ <option value="7">Some text goes here</option>
97
+ <option value="8">Another choice could be here</option>
98
+ <option value="9">Yet another item to be chosen</option>
99
+ </optgroup>
100
+ </select>
101
+ </p>
102
+ <p>
103
+ <label class="error" for="textarea">
104
+ Textarea
105
+ </label>
106
+ <br />
107
+ <textarea class="error" id="textarea" name="textarea" rows="5" placeholder="This is an example of HTML5 placeholder text."></textarea>
108
+ </p>
109
+ <table class="horiz">
110
+ <tr>
111
+ <td>
112
+ <label class="error" for="url">
113
+ URL + Autofocus
114
+ </label>
115
+ <br />
116
+ <input class="error" type="url" id="url" name="url" value="http://" autofocus="autofocus" />
117
+ </td>
118
+ <td>
119
+ <label class="error" for="email">
120
+ Email
121
+ </label>
122
+ <br />
123
+ <input class="error" type="email" id="email" name="email" placeholder="name@example.com" />
124
+ </td>
125
+ <td>
126
+ <label class="error" for="password">
127
+ Password
128
+ </label>
129
+ <br />
130
+ <input class="error" type="password" id="password" name="password" placeholder="Alphanumeric123!" />
131
+ </td>
132
+ </tr>
133
+ <tr>
134
+ <td>
135
+ <label class="error" for="datetime-local">
136
+ Datetime local
137
+ </label>
138
+ <br />
139
+ <input class="error" type="datetime-local" id="datetime-local" name="datetime-local" />
140
+ </td>
141
+ <td>
142
+ <label class="error" for="number">
143
+ Number
144
+ </label>
145
+ <br />
146
+ <input class="error" type="number" id="number" name="number" min="0" max="999" step="1" />
147
+ </td>
148
+ <td>
149
+ <label class="error" for="tel">
150
+ Tel (phone)
151
+ </label>
152
+ <br />
153
+ <input class="error" type="tel" id="tel" name="tel" />
154
+ </td>
155
+ </tr>
156
+ <tr>
157
+ <td>
158
+ <label class="error" for="datetime">
159
+ Datetime
160
+ </label>
161
+ <br />
162
+ <input class="error" type="datetime" id="datetime" name="datetime" />
163
+ </td>
164
+ <td>
165
+ <label class="error" for="date">
166
+ Date
167
+ </label>
168
+ <br />
169
+ <input class="error" type="date" id="date" name="date" />
170
+ </td>
171
+ <td>
172
+ <label class="error" for="month">
173
+ Month
174
+ </label>
175
+ <br />
176
+ <input class="error" type="month" id="month" name="month" />
177
+ </td>
178
+ </tr>
179
+ <tr>
180
+ <td>
181
+ <label class="error" for="search">
182
+ Search
183
+ </label>
184
+ <br />
185
+ <input class="error" type="search" id="search" name="search" />
186
+ </td>
187
+ <td>
188
+ <label class="error" for="range">
189
+ Range
190
+ </label>
191
+ <br />
192
+ <input class="error" type="range" id="range" name="range" />
193
+ </td>
194
+ <td>
195
+ <label class="error" for="file">
196
+ File upload
197
+ </label>
198
+ <br />
199
+ <input class="error" type="file" id="file" name="file" />
200
+ </td>
201
+ </tr>
202
+ </table>
203
+ <p>
204
+ <input type="submit" value="Input - Submit" />
205
+ &nbsp;
206
+ <input type="button" value="Input - Button" />
207
+ &nbsp;
208
+ <input type="reset" value="Input - Reset" />
209
+ &nbsp;
210
+ <button>Button tag</button>
211
+ </p>
212
+ </form>
213
+ </div>
214
+ </body>
215
+ </html>
@@ -0,0 +1,215 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="utf-8" />
5
+ <title>Formalize CSS</title>
6
+ <link rel="stylesheet" href="assets/css/demo.css" />
7
+ <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
8
+ <script src="assets/js/jquery.formalize.js"></script>
9
+ </head>
10
+ <body>
11
+ <div id="wrapper">
12
+ <h1>
13
+ Example of all form elements
14
+ </h1>
15
+ <form action="#" method="post" enctype="multipart/form-data" onsubmit="return false">
16
+ <p>
17
+ <input type="checkbox" id="test_checkbox_1" name="test_checkbox_1" />
18
+ <label for="test_checkbox_1">
19
+ Test checkbox 1
20
+ </label>
21
+ &nbsp;
22
+ &nbsp;
23
+ <input type="checkbox" id="test_checkbox_2" name="test_checkbox_2" />
24
+ <label for="test_checkbox_2">
25
+ Test checkbox 2
26
+ </label>
27
+ &nbsp;
28
+ &nbsp;
29
+ <input type="checkbox" id="test_checkbox_3" name="test_checkbox_3" />
30
+ <label for="test_checkbox_3">
31
+ Test checkbox 3
32
+ </label>
33
+ </p>
34
+ <p>
35
+ <input type="radio" id="test_radio_1" name="test_radio_group" />
36
+ <label for="test_radio_1">
37
+ Test radio 1
38
+ </label>
39
+ &nbsp;
40
+ &nbsp;
41
+ <input type="radio" id="test_radio_2" name="test_radio_group" />
42
+ <label for="test_radio_2">
43
+ Test radio 2
44
+ </label>
45
+ &nbsp;
46
+ &nbsp;
47
+ <input type="radio" id="test_radio_3" name="test_radio_group" />
48
+ <label for="test_radio_3">
49
+ Test radio 3
50
+ </label>
51
+ </p>
52
+ <p>
53
+ <label for="select_dd">
54
+ Select drop-down
55
+ </label>
56
+ <br />
57
+ <select id="select_dd" name="select_dd">
58
+ <optgroup label="Group 1">
59
+ <option value="1">Some text goes here</option>
60
+ <option value="2">Another choice could be here</option>
61
+ <option value="3">Yet another item to be chosen</option>
62
+ </optgroup>
63
+ <optgroup label="Group 2">
64
+ <option value="4">Some text goes here</option>
65
+ <option value="5">Another choice could be here</option>
66
+ <option value="6">Yet another item to be chosen</option>
67
+ </optgroup>
68
+ <optgroup label="Group 3">
69
+ <option value="7">Some text goes here</option>
70
+ <option value="8">Another choice could be here</option>
71
+ <option value="9">Yet another item to be chosen</option>
72
+ </optgroup>
73
+ </select>
74
+ <input type="text" id="text_inline" name="text_inline" />
75
+ <input type="button" value="Input Button" />
76
+ <button>Button Tag</button>
77
+ <a href="#" class="button">Link Button</a>
78
+ </p>
79
+ <p>
80
+ <label for="select_multi">
81
+ Select multiple
82
+ </label>
83
+ <br />
84
+ <select id="select_multi" name="select_multi" multiple="multiple" size="10">
85
+ <optgroup label="Group 1">
86
+ <option value="1">Some text goes here</option>
87
+ <option value="2">Another choice could be here</option>
88
+ <option value="3">Yet another item to be chosen</option>
89
+ </optgroup>
90
+ <optgroup label="Group 2">
91
+ <option value="4">Some text goes here</option>
92
+ <option value="5">Another choice could be here</option>
93
+ <option value="6">Yet another item to be chosen</option>
94
+ </optgroup>
95
+ <optgroup label="Group 3">
96
+ <option value="7">Some text goes here</option>
97
+ <option value="8">Another choice could be here</option>
98
+ <option value="9">Yet another item to be chosen</option>
99
+ </optgroup>
100
+ </select>
101
+ </p>
102
+ <p>
103
+ <label for="textarea">
104
+ Textarea
105
+ </label>
106
+ <br />
107
+ <textarea id="textarea" name="textarea" rows="5" placeholder="This is an example of HTML5 placeholder text."></textarea>
108
+ </p>
109
+ <table class="horiz">
110
+ <tr>
111
+ <td>
112
+ <label for="url">
113
+ URL + Autofocus
114
+ </label>
115
+ <br />
116
+ <input type="url" id="url" name="url" value="http://" autofocus="autofocus" />
117
+ </td>
118
+ <td>
119
+ <label for="email">
120
+ Email
121
+ </label>
122
+ <br />
123
+ <input type="email" id="email" name="email" placeholder="name@example.com" />
124
+ </td>
125
+ <td>
126
+ <label for="password">
127
+ Password
128
+ </label>
129
+ <br />
130
+ <input type="password" id="password" name="password" placeholder="Alphanumeric123!" />
131
+ </td>
132
+ </tr>
133
+ <tr>
134
+ <td>
135
+ <label for="datetime-local">
136
+ Datetime local
137
+ </label>
138
+ <br />
139
+ <input type="datetime-local" id="datetime-local" name="datetime-local" />
140
+ </td>
141
+ <td>
142
+ <label for="number">
143
+ Number
144
+ </label>
145
+ <br />
146
+ <input type="number" id="number" name="number" min="0" max="999" step="1" />
147
+ </td>
148
+ <td>
149
+ <label for="tel">
150
+ Tel (phone)
151
+ </label>
152
+ <br />
153
+ <input type="tel" id="tel" name="tel" />
154
+ </td>
155
+ </tr>
156
+ <tr>
157
+ <td>
158
+ <label for="datetime">
159
+ Datetime
160
+ </label>
161
+ <br />
162
+ <input type="datetime" id="datetime" name="datetime" />
163
+ </td>
164
+ <td>
165
+ <label for="date">
166
+ Date
167
+ </label>
168
+ <br />
169
+ <input type="date" id="date" name="date" />
170
+ </td>
171
+ <td>
172
+ <label for="month">
173
+ Month
174
+ </label>
175
+ <br />
176
+ <input type="month" id="month" name="month" />
177
+ </td>
178
+ </tr>
179
+ <tr>
180
+ <td>
181
+ <label for="search">
182
+ Search
183
+ </label>
184
+ <br />
185
+ <input type="search" id="search" name="search" />
186
+ </td>
187
+ <td>
188
+ <label for="range">
189
+ Range
190
+ </label>
191
+ <br />
192
+ <input type="range" id="range" name="range" />
193
+ </td>
194
+ <td>
195
+ <label for="file">
196
+ File upload
197
+ </label>
198
+ <br />
199
+ <input type="file" id="file" name="file" />
200
+ </td>
201
+ </tr>
202
+ </table>
203
+ <p>
204
+ <input type="submit" value="Input - Submit" />
205
+ &nbsp;
206
+ <input type="button" value="Input - Button" />
207
+ &nbsp;
208
+ <input type="reset" value="Input - Reset" />
209
+ &nbsp;
210
+ <button>Button tag</button>
211
+ </p>
212
+ </form>
213
+ </div>
214
+ </body>
215
+ </html>