bullframe.css 3.8.1 → 4.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (103) hide show
  1. package/.browserslistrc +10 -6
  2. package/.stylelintrc.json +10 -0
  3. package/CHANGELOG.md +20 -4
  4. package/LICENSE +20 -20
  5. package/README.md +28 -179
  6. package/dist/css/bullframe-classless-dark-prefers.css +357 -425
  7. package/dist/css/bullframe-classless-dark-prefers.min.css +2 -3
  8. package/dist/css/bullframe-classless-dark-prefers.min.css.map +1 -1
  9. package/dist/css/bullframe-classless-dark.css +328 -412
  10. package/dist/css/bullframe-classless-dark.min.css +2 -3
  11. package/dist/css/bullframe-classless-dark.min.css.map +1 -1
  12. package/dist/css/bullframe-classless.css +237 -293
  13. package/dist/css/bullframe-classless.min.css +2 -2
  14. package/dist/css/bullframe-classless.min.css.map +1 -1
  15. package/dist/css/bullframe-dark-prefers.css +468 -633
  16. package/dist/css/bullframe-dark-prefers.min.css +2 -2
  17. package/dist/css/bullframe-dark-prefers.min.css.map +1 -1
  18. package/dist/css/bullframe-dark.css +402 -593
  19. package/dist/css/bullframe-dark.min.css +2 -2
  20. package/dist/css/bullframe-dark.min.css.map +1 -1
  21. package/dist/css/bullframe-utilities.css +87 -125
  22. package/dist/css/bullframe-utilities.min.css +1 -1
  23. package/dist/css/bullframe-utilities.min.css.map +1 -1
  24. package/dist/css/bullframe.css +288 -455
  25. package/dist/css/bullframe.min.css +1 -1
  26. package/dist/css/bullframe.min.css.map +1 -1
  27. package/docs/test/css/style.css +130 -130
  28. package/docs/test/icons/safari-pinned-tab.svg +28 -28
  29. package/docs/test/js/vendor/html5shiv.js +335 -335
  30. package/docs/test/js/vendor/ie10-viewport-bug-workaround.js +20 -20
  31. package/gulpfile.js +5 -2
  32. package/index.html +1214 -1223
  33. package/package.json +14 -11
  34. package/src/scss/bullframe-classless-dark-prefers.scss +5 -5
  35. package/src/scss/bullframe-classless-dark.scss +5 -5
  36. package/src/scss/bullframe-classless.scss +1 -9
  37. package/src/scss/bullframe-dark-prefers.scss +4 -4
  38. package/src/scss/bullframe-dark.scss +4 -4
  39. package/src/scss/bullframe-utilities.scss +1 -1
  40. package/src/scss/bullframe.scss +0 -7
  41. package/src/scss/forms/_forms-normalization.scss +4 -2
  42. package/src/scss/forms/_forms-styling-radio-checkbox.scss +84 -85
  43. package/src/scss/forms/_forms-styling-range.scss +99 -103
  44. package/src/scss/forms/_forms-styling-select.scss +63 -63
  45. package/src/scss/forms/_forms-styling.scss +119 -121
  46. package/src/scss/miscellaneous/_misc-focus.scss +0 -1
  47. package/src/scss/miscellaneous/_misc-layout.scss +1 -24
  48. package/src/scss/mixins/_mixin-grid-flex.scss +83 -83
  49. package/src/scss/mixins/_mixin-layout.scss +42 -42
  50. package/src/scss/mixins/_mixin-texts.scss +38 -37
  51. package/src/scss/typography/_typography-blockquotes.scss +23 -23
  52. package/src/scss/typography/_typography-headings.scss +43 -43
  53. package/src/scss/typography/_typography-html-body.scss +72 -72
  54. package/src/scss/typography/_typography-misc.scss +3 -3
  55. package/src/scss/typography/_typography-monospaced-elements.scss +50 -56
  56. package/src/scss/utilities/_utility-buttons.scss +71 -71
  57. package/src/scss/utilities/_utility-embeds.scss +34 -34
  58. package/src/scss/utilities/_utility-filters.scss +24 -24
  59. package/src/scss/utilities/_utility-form-states.scss +80 -80
  60. package/src/scss/utilities/_utility-global-dark-classless.scss +157 -169
  61. package/src/scss/utilities/_utility-global-dark-prefers-classless.scss +3 -3
  62. package/src/scss/utilities/_utility-global-dark-prefers.scss +3 -3
  63. package/src/scss/utilities/_utility-global-dark-scrollbars.scss +29 -29
  64. package/src/scss/utilities/_utility-global-dark.scss +213 -224
  65. package/src/scss/utilities/_utility-grid-system.scss +204 -204
  66. package/src/scss/utilities/_utility-layout.scss +195 -196
  67. package/src/scss/utilities/_utility-lists.scss +17 -17
  68. package/src/scss/utilities/_utility-print.scss +101 -111
  69. package/src/scss/utilities/_utility-reduced-motion.scss +29 -29
  70. package/src/scss/utilities/_utility-tables.scss +40 -40
  71. package/src/scss/utilities/_utility-texts.scss +199 -199
  72. package/src/scss/utilities/_utility-z-index.scss +82 -82
  73. package/src/scss/variables/_variables-breakpoints.scss +5 -5
  74. package/src/scss/variables/_variables-colors.scss +31 -31
  75. package/src/scss/variables/_variables-spacing.scss +25 -25
  76. package/src/scss/variables/_variables-texts.scss +12 -12
  77. package/dist/css/bullframe-classless-dark-ie10+.css +0 -1321
  78. package/dist/css/bullframe-classless-dark-ie10+.min.css +0 -4
  79. package/dist/css/bullframe-classless-dark-ie10+.min.css.map +0 -1
  80. package/dist/css/bullframe-classless-dark-prefers-ie10+.css +0 -1301
  81. package/dist/css/bullframe-classless-dark-prefers-ie10+.min.css +0 -4
  82. package/dist/css/bullframe-classless-dark-prefers-ie10+.min.css.map +0 -1
  83. package/dist/css/bullframe-classless-ie10+.css +0 -1084
  84. package/dist/css/bullframe-classless-ie10+.min.css +0 -3
  85. package/dist/css/bullframe-classless-ie10+.min.css.map +0 -1
  86. package/dist/css/bullframe-dark-ie10+.css +0 -2569
  87. package/dist/css/bullframe-dark-ie10+.min.css +0 -3
  88. package/dist/css/bullframe-dark-ie10+.min.css.map +0 -1
  89. package/dist/css/bullframe-dark-prefers-ie10+.css +0 -2541
  90. package/dist/css/bullframe-dark-prefers-ie10+.min.css +0 -3
  91. package/dist/css/bullframe-dark-prefers-ie10+.min.css.map +0 -1
  92. package/dist/css/bullframe-ie10+.css +0 -2250
  93. package/dist/css/bullframe-ie10+.min.css +0 -2
  94. package/dist/css/bullframe-ie10+.min.css.map +0 -1
  95. package/docs/images-readme/browserstack-logo.png +0 -0
  96. package/src/scss/bullframe-classless-dark-ie10+.scss +0 -5
  97. package/src/scss/bullframe-classless-dark-prefers-ie10+.scss +0 -5
  98. package/src/scss/bullframe-classless-ie10+.scss +0 -43
  99. package/src/scss/bullframe-dark-ie10+.scss +0 -4
  100. package/src/scss/bullframe-dark-prefers-ie10+.scss +0 -4
  101. package/src/scss/bullframe-ie10+.scss +0 -121
  102. package/src/scss/forms/_forms-styling-ie-hacks.scss +0 -56
  103. package/src/scss/forms/_forms-styling-select-ie-hacks.scss +0 -30
package/index.html CHANGED
@@ -1,1224 +1,1215 @@
1
- <!DOCTYPE html>
2
- <html class="test" id="top" lang="en">
3
-
4
- <head>
5
- <meta charset="UTF-8" />
6
- <meta http-equiv="x-ua-Compatible" content="IE=edge" />
7
- <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
8
-
9
- <title>Test page — bullframe.css Sass (SCSS) framework</title>
10
- <meta name="description"
11
- content="A quick look at a wide range of HTML elements, divided into several sections and rendered into unusual combinations, for testing purpose only." />
12
-
13
- <!-- https://realfavicongenerator.net/ -->
14
- <link rel="apple-touch-icon" sizes="180x180" href="./docs/test/icons/apple-touch-icon.png?v=PYqzMzgx6v" />
15
- <link rel="icon" type="image/png" sizes="32x32" href="./docs/test/icons/favicon-32x32.png?v=PYqzMzgx6v" />
16
- <link rel="icon" type="image/png" sizes="16x16" href="./docs/test/icons/favicon-16x16.png?v=PYqzMzgx6v" />
17
- <link rel="mask-icon" href="./docs/test/icons/safari-pinned-tab.svg?v=PYqzMzgx6v" color="#f95c1f" />
18
- <link rel="shortcut icon" href="./docs/test/icons/favicon.ico?v=PYqzMzgx6v" />
19
- <meta name="msapplication-TileColor" content="#da532c" />
20
- <meta name="theme-color" content="#f95c1f" />
21
-
22
- <link rel="stylesheet" href="./dist/css/bullframe-dark-prefers.min.css" />
23
-
24
- <!-- this is just for a nicer demo -->
25
- <link rel="stylesheet" href="./docs/test/css/style.css" />
26
-
27
- <!-- enable HTML5 elements in all browsers, and fix IE10 viewport on Windows 8 -->
28
- <script src="./docs/test/js/vendor/html5shiv.js?v3.7.3"></script>
29
- <script src="./docs/test/js/vendor/ie10-viewport-bug-workaround.js?v1..0"></script>
30
- </head>
31
-
32
- <body class="bf-responsive-typography bf-reduced-motion">
33
- <a class="bf-sr-only focusable" href="#main-content">Skip to main content</a>
34
- <div class="bf-container bf-container--break-md">
35
- <header class="bf-t-center bf-m-b-3">
36
- <h1>bullframe<span>.css</span></h1>
37
- <p class="bf-lead">Solid, fluid, IE-friendly Sass (SCSS) framework</p>
38
- <a class="bf-btn bf-btn--primary" href="https://github.com/marcop135/bullframe.css/archive/master.zip"
39
- role="button">Download</a>
40
- <a class="bf-btn" href="https://github.com/marcop135/bullframe.css" role="button">GitHub</a>
41
- <p class="description">
42
- This an is a quick look at a wide range of HTML elements, divided into
43
- several sections and rendered into unusual combinations, for testing
44
- purpose only.
45
- </p>
46
-
47
- <hr />
48
-
49
- <p class="bf-t-center">
50
- CSS build in use:<br />
51
- <mark><code>bullframe-dark-prefers.min.css</code></mark>
52
- </p>
53
- <p class="bf-t-center">
54
- Polyfills:<br />
55
- <code>html5shiv.js v3.7.3</code><br />
56
- <code>ie10-viewport-bug-workaround.js v1..0</code>
57
- </p>
58
- <p class="bf-t-center">
59
- <code>&lt;body&gt;</code> classes:<br />
60
- <code>.bf-responsive-typography</code><br />
61
- <code>.bf-reduced-motion</code>
62
- </p>
63
-
64
- <hr />
65
- </header>
66
-
67
- <main id="main-content">
68
- <h2 id="texts" class="h2--section">Text elements</h2>
69
-
70
- <div class="bf-row">
71
- <div class="bf-col-6">
72
- <div class="bf-m-b-4">
73
- <h3>Headings</h3>
74
- <h1>Heading 1 <a href="#">with link</a></h1>
75
- <h2>Heading 2 <a href="#">with link</a></h2>
76
- <h3>Heading 3 <a href="#">with link</a></h3>
77
- <h4>Heading 4 <a href="#">with link</a></h4>
78
- <h5>Heading 5 <a href="#">with link</a></h5>
79
- <h6>Heading 6 <a href="#">with link</a></h6>
80
- </div>
81
-
82
- <h3>Paragraphs with headings utilities</h3>
83
- <p class="bf-h1">Heading 1</p>
84
- <p class="bf-h2">Heading 2</p>
85
- <p class="bf-h3">Heading 3</p>
86
- <p class="bf-h4">Heading 4</p>
87
- <p class="bf-h5">Heading 5</p>
88
- <p class="bf-h6">Heading 6</p>
89
- </div>
90
- <div class="bf-col-6">
91
- <h3>Inline text elements</h3>
92
- <p>
93
- The <a href="#">a element</a> example<br />
94
- The <abbr>abbr element</abbr> and
95
- <abbr title="Title text">abbr element with title</abbr> examples
96
- <br />
97
- The <strong>b element</strong> example<br />
98
- The <cite>cite element</cite> example<br />
99
- The <code>code element</code> example<br />
100
- The <del>del element</del> example<br />
101
- The <dfn>dfn element</dfn> and
102
- <dfn title="Title text">dfn element with title</dfn>
103
- examples<br />
104
- The <em>em element</em> example<br />
105
- The <em>i element</em> example<br />
106
- The img element
107
- <img src="../docs/test/images/placeholder-img-16x16.jpg" alt="just a placeholder" loading="lazy" />
108
- example<br />
109
- The <ins>ins element</ins> example<br />
110
- The <kbd>kbd element</kbd> example<br />
111
- The <mark>mark element</mark> example<br />
112
- The <q>q element <q>inside</q> a q element</q> example<br />
113
- The <s>s element</s> example<br />
114
- The <samp>samp element</samp> example<br />
115
- The <small>small element</small> example<br />
116
- The <span>span element</span> example<br />
117
- The <strong>strong element</strong> example<br />
118
- The <sub>sub element</sub> example<br />
119
- The <sup>sup element</sup> example<br />
120
- The <u>u element</u> example<br />
121
- The <var>var element</var> example
122
- </p>
123
- </div>
124
- </div>
125
- <div class="bf-row">
126
- <div class="bf-col-6">
127
- <h3>Paragraphs</h3>
128
- <p>
129
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean
130
- commodo ligula eget dolor. Aenean massa. Cum sociis natoque
131
- penatibus et m. Lorem ipsum dolor sit amet, consectetuer
132
- adipiscing elit. Aenean commodo ligula eget dolor.
133
- </p>
134
- <p>
135
- The European languages are members of the same family. Their
136
- separate existence is a myth. For science, music, sport, etc,
137
- Europe uses the same vocabulary. The languages only differ in
138
- their grammar, their pronunciation and their most common words.
139
- Everyone realizes why a new common language would be desirable.
140
- </p>
141
- </div>
142
- <div class="bf-col-6">
143
- <h3>hidden attribute</h3>
144
- <p hidden="">
145
- This should be hidden in all browsers (apart from IE6)
146
- </p>
147
-
148
- <h3>Template content</h3>
149
- <template>
150
- <h1>{{title}}</h1>
151
- <content></content>
152
- </template>
153
-
154
- <h3>Address</h3>
155
- <address>Address: somewhere, world</address>
156
- </div>
157
- </div>
158
- <div class="bf-row">
159
- <div class="bf-col-12">
160
- <h3>hr</h3>
161
- <hr />
162
- </div>
163
- </div>
164
- <div class="bf-row">
165
- <div class="bf-col-12">
166
- <h3>pre (383 characters)</h3>
167
- <pre>
168
- Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.
169
- </pre>
170
-
171
- <h3>code (526 characters)</h3>
172
- <code>
173
- html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em
174
- 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline
175
- dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}
176
- </code>
177
- </div>
178
- </div>
179
- <div class="bf-row">
180
- <div class="bf-col-12">
181
- <h3>pre code</h3>
182
- <pre><code>&lt;!doctype html&gt;
183
- &lt;html&gt;
184
- &lt;head&gt;
185
- &lt;meta charset="utf-8"&gt;
186
- &lt;meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"&gt;
187
- &lt;title &gt;...&lt;/title&gt;
188
- &lt;link rel="stylesheet" href="bullframe.css"&gt;
189
- &lt;/head&gt;
190
- &lt;body&gt;
191
- &lt;main&gt;...&lt;/div&gt;
192
- &lt;/body&gt;
193
- &lt;/html&gt;</code></pre>
194
- </div>
195
- </div>
196
- <div class="bf-row">
197
- <div class="bf-col-12">
198
- <h3>blockquotes</h3>
199
- <blockquote>
200
- <p>
201
- Some sort of famous witty quote marked up with a
202
- <code>&lt;blockquote&gt;</code> and a child
203
- <code>&lt;p&gt;</code> element.
204
- </p>
205
- <small>Tom Whatever</small>
206
- </blockquote>
207
-
208
- <blockquote>
209
- Even better philosophical quote marked up with just a
210
- <code>&lt;blockquote&gt;</code> element.
211
- </blockquote>
212
- </div>
213
- </div>
214
- <div class="bf-row">
215
- <div class="bf-col-4">
216
- <h3>Ordered list</h3>
217
- <ol>
218
- <li>list item 1</li>
219
- <li>
220
- list item 1
221
- <ol>
222
- <li>list item 2</li>
223
- <li>
224
- list item 2
225
- <ol>
226
- <li>list item 3</li>
227
- <li>list item 3</li>
228
- </ol>
229
- </li>
230
- <li>list item 2</li>
231
- <li>list item 2</li>
232
- </ol>
233
- </li>
234
- <li>list item 1</li>
235
- <li>list item 1</li>
236
- </ol>
237
- </div>
238
- <div class="bf-col-4">
239
- <h3>Unordered list</h3>
240
- <ul>
241
- <li>list item 1</li>
242
- <li>
243
- list item 1
244
- <ul>
245
- <li>list item 2</li>
246
- <li>
247
- list item 2
248
- <ul>
249
- <li>list item 3</li>
250
- <li>list item 3</li>
251
- </ul>
252
- </li>
253
- <li>list item 2</li>
254
- <li>list item 2</li>
255
- </ul>
256
- </li>
257
- <li>list item 1</li>
258
- <li>list item 1</li>
259
- </ul>
260
- </div>
261
- <div class="bf-col-4">
262
- <h3>Definition list</h3>
263
- <dl>
264
- <dt>Description name</dt>
265
- <dd>Description value</dd>
266
- <dt>Description name</dt>
267
- <dd>Description value</dd>
268
- <dt>Description name</dt>
269
- <dd>Description value</dd>
270
- </dl>
271
- </div>
272
- </div>
273
-
274
- <div class="bf-row">
275
- <div class="bf-col-6">
276
- <h3>Unstyled list</h3>
277
- <ol class="bf-list-unstyled">
278
- <li>list item 1</li>
279
- <li>
280
- list item 1
281
- <ol>
282
- <li>list item 2</li>
283
- <li>
284
- list item 2
285
- <ol>
286
- <li>list item 3</li>
287
- <li>list item 3</li>
288
- </ol>
289
- </li>
290
- <li>list item 2</li>
291
- <li>list item 2</li>
292
- </ol>
293
- </li>
294
- <li>list item 1</li>
295
- <li>list item 1</li>
296
- </ol>
297
- </div>
298
- <div class="bf-col-6">
299
- <h3>Navigation list</h3>
300
- <nav>
301
- <ul>
302
- <li>list item 1</li>
303
- <li>
304
- list item 1
305
- <ol>
306
- <li>list item 2</li>
307
- <li>
308
- list item 2
309
- <ol>
310
- <li>list item 3</li>
311
- <li>list item 3</li>
312
- </ol>
313
- </li>
314
- <li>list item 2</li>
315
- <li>list item 2</li>
316
- </ol>
317
- </li>
318
- <li>list item 1</li>
319
- <li>list item 1</li>
320
- </ul>
321
- </nav>
322
- </div>
323
- </div>
324
-
325
- <div class="bf-row">
326
- <div class="bf-col-12">
327
- <h2 id="embedded-content" class="h2--section">Embedded content</h2>
328
- </div>
329
- </div>
330
- <div class="bf-row">
331
- <div class="bf-col-6">
332
- <h3>Linked figure with an image and a caption</h3>
333
- <figure>
334
- <a href="#">
335
- <img src="../docs/test/images/placeholder-img-800x40.jpg" alt="just a placeholder" loading="lazy" />
336
- </a>
337
- <figcaption>The image above is 800x400 pixels</figcaption>
338
- </figure>
339
- </div>
340
- <div class="bf-col-6">
341
- <h3>SVG</h3>
342
- <svg width="200px" height="200px">
343
- <circle cx="0" cy="0" r="200" fill="#ff0000" />
344
- </svg>
345
- </div>
346
- </div>
347
- <div class="bf-row">
348
- <div class="bf-col-6">
349
- <div class="bf-m-b-3">
350
- <h3>HTML5 video with controls</h3>
351
- <video poster="./docs/test/images/video-poster.png" controls width="450">
352
- <source src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm"
353
- type="video/webm" />
354
- <source src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm"
355
- type="video/mp4" />
356
- Sorry, your browser doesn't support embedded videos.
357
- </video>
358
- </div>
359
-
360
- <div class="bf-m-b-3">
361
- <h3>Audio with controls</h3>
362
- <audio controls>
363
- <source src="https://media.html5media.info/audio.mp3" type="audio/mp3" />
364
- <source src="https://media.html5media.info/audio.ogg" type="audio/ogg" />
365
- <p>Your browser does not support the HTML5 Audio element.</p>
366
- </audio>
367
- </div>
368
- </div>
369
- <div class="bf-col-6">
370
- <h3>YouTube iframe 16:9 (default)</h3>
371
- <div class="bf-embed-responsive">
372
- <iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/Z-4v4I7Gzk0"
373
- allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen
374
- loading="lazy"></iframe>
375
- </div>
376
- </div>
377
- </div>
378
- <div class="bf-row">
379
- <div class="bf-col-6 bf-m-b-4">
380
- <h3>Progress</h3>
381
- <div class="bf-m-b-3">
382
- <label for="file">File progress:</label>
383
- <progress id="file" max="100" value="70">70%</progress>
384
- </div>
385
-
386
- <h3>Meter</h3>
387
- <label for="fuel">Fuel level:</label>
388
- <meter id="fuel" min="0" max="100" low="33" high="66" optimum="80" value="50">
389
- at 50/100
390
- </meter>
391
- </div>
392
- <div class="bf-col-6">
393
- <h3>Details with a summary</h3>
394
- <div class="bf-m-b-2">
395
- <details>
396
- <summary>Click to Open</summary>
397
- Something small enough to escape casual notice.
398
- </details>
399
- </div>
400
-
401
- <details open>
402
- <summary>Click to Hide</summary>
403
- Something small enough to escape casual notice.
404
- </details>
405
- </div>
406
- </div>
407
- <div class="bf-row">
408
- <div class="bf-col-12">
409
- <h2 id="forms" class="h2--section">Forms</h2>
410
- </div>
411
- </div>
412
- <div class="bf-row">
413
- <div class="bf-col-6 bf-m-b-3">
414
- <h3>Inputs</h3>
415
-
416
- <form>
417
- <fieldset>
418
- <legend>
419
- HTML5 has several new input types for forms (legend).
420
- </legend>
421
- <div class="bf-m-b-4">
422
- <label>Text input as sibling of label</label>
423
- <input type="text" value="default value that goes on and on without stopping or punctuation" />
424
-
425
- <label>Text input as descendant of label (not recommended)
426
- <input type="text"
427
- value="default value that goes on and on without stopping or punctuation" /></label>
428
-
429
- <label disabled>Text input as sibling of label (disabled)</label>
430
- <input type="text" value="default value that goes on and on without stopping or punctuation" disabled />
431
-
432
- <label aria-disabled="true">Text input as sibling of label (aria-disabled)</label>
433
- <input type="text" value="default value that goes on and on without stopping or punctuation"
434
- aria-disabled="true" />
435
-
436
- <label class="bf-disabled">Text input as sibling of label (.bf-disabled)</label>
437
- <input type="text" value="default value that goes on and on without stopping or punctuation"
438
- class="bf-disabled" />
439
-
440
- <label class="bf-disabled">Text input as descendant of label (disabled, not
441
- recommended)
442
- <input type="text" value="default value" disabled /></label>
443
-
444
- <label>Text input (focused)</label>
445
- <input class="bf-focused" type="text" value="default value" />
446
-
447
- <label>Text input (invalid)</label>
448
- <input class="bf-invalid" type="text" value="invalid value" />
449
-
450
- <label>Email input (required)</label>
451
- <input type="email" required />
452
-
453
- <label>Number input</label>
454
- <input id="in" max="10" min="0" type="number" value="5" />
455
-
456
- <label>Tel input</label> <input type="tel" />
457
-
458
- <label>URL input</label> <input type="url" />
459
-
460
- <label>Date input</label>
461
- <input id="idd" type="date" value="1970-01-01" />
462
-
463
- <label>Month input</label>
464
- <input id="idm" type="month" value="1970-01" />
465
-
466
- <label>Week input</label>
467
- <input id="idw" type="week" value="1970-W01" />
468
-
469
- <label>Datetime-local input</label>
470
- <input id="idtl" type="datetime-local" value="1970-01-01T00:00" />
471
- <label>Password input</label>
472
- <input type="password" value="password" />
473
-
474
- <label>Search input</label>
475
- <input id="search" name="search" type="search" />
476
-
477
- <label for="myBrowser">Input datalist (choose a browser)</label>
478
- <input list="browsers" id="myBrowser" name="myBrowser" />
479
- <datalist id="browsers">
480
- <option value="Chrome"></option>
481
- <option value="Firefox"></option>
482
- <option value="Internet Explorer"></option>
483
- <option value="Opera"></option>
484
- <option value="Safari"></option>
485
- <option value="Microsoft Edge"></option>
486
- </datalist>
487
-
488
- <label>File input</label>
489
- <input type="file" />
490
-
491
- <label>Range input</label>
492
- <input id="ir" type="range" value="10" />
493
- </div>
494
-
495
- <h3>Radio and checkbox inputs</h3>
496
-
497
- <h4>Radios</h4>
498
-
499
- <div class="bf-m-b-3">
500
- <div>
501
- <input type="radio" id="huey" name="drone" value="huey" checked />
502
- <label for="huey">Huey</label>
503
- </div>
504
-
505
- <div>
506
- <input type="radio" id="louie" name="drone" value="louie" checked />
507
- <label for="louie">Louie (checked)</label>
508
- </div>
509
-
510
- <div>
511
- <input type="radio" id="jake" name="drone" value="jake" disabled />
512
- <label class="bf-disabled" for="jake">Jake (disabled)</label>
513
- </div>
514
- </div>
515
-
516
- <h4>Checkboxes</h4>
517
- <div>
518
- <input type="checkbox" id="scales" name="scales" />
519
- <label for="scales">Scales</label>
520
- </div>
521
-
522
- <div>
523
- <input type="checkbox" id="horns" name="horns" checked />
524
- <label for="horns">Horns (checked)</label>
525
- </div>
526
-
527
- <div>
528
- <input type="checkbox" id="wings" name="wings" disabled />
529
- <label class="bf-disabled" for="wings">Wings (disabled)</label>
530
- </div>
531
- </fieldset>
532
- </form>
533
- </div>
534
- <div class="bf-col-6">
535
- <form>
536
- <h3>Selects</h3>
537
- <fieldset>
538
- <label for="s">Select field</label>
539
- <select id="s">
540
- <option>Option 01</option>
541
- <option>Option 02</option>
542
- <option>Option 03</option>
543
- <option>Option 04</option>
544
- <option>Option 05</option>
545
- </select>
546
-
547
- <label for="s-ltr">Select field (RTL)</label>
548
- <select id="s-ltr" dir="rtl">
549
- <option>Option 01</option>
550
- <option>Option 02</option>
551
- <option>Option 03</option>
552
- <option>Option 04</option>
553
- <option>Option 05</option>
554
- </select>
555
-
556
- <label class="bf-disabled" for="s2">Select field (disabled)</label>
557
- <select id="s2" disabled>
558
- <option>Option 01</option>
559
- <option>Option 02</option>
560
- <option>Option 03</option>
561
- <option>Option 04</option>
562
- <option>Option 05</option>
563
- </select>
564
-
565
- <label for="select_multi">Select [size="2"]</label>
566
- <select id="select_size" name="select_size" size="2">
567
- <optgroup label="Group 1">
568
- <option value="1">Some text goes here</option>
569
- <option value="2">Another choice could be here</option>
570
- <option value="3">Yet another item to be chosen</option>
571
- </optgroup>
572
- <optgroup label="Group 2">
573
- <option value="4">Some text goes here</option>
574
- <option value="5">Another choice could be here</option>
575
- <option value="6">Yet another item to be chosen</option>
576
- </optgroup>
577
- </select>
578
-
579
- <label for="select_multi">Select multiple</label>
580
- <select id="select_multi" multiple="multiple" name="select_multi">
581
- <optgroup label="Group 1">
582
- <option value="1">Some text goes here</option>
583
- <option value="2">Another choice could be here</option>
584
- <option value="3">Yet another item to be chosen</option>
585
- </optgroup>
586
- <optgroup label="Group 2">
587
- <option value="4">Some text goes here</option>
588
- <option value="5">Another choice could be here</option>
589
- <option value="6">Yet another item to be chosen</option>
590
- </optgroup>
591
- <optgroup label="Group 3">
592
- <option value="7">Some text goes here</option>
593
- <option value="8">Another choice could be here</option>
594
- <option value="9">Yet another item to be chosen</option>
595
- </optgroup>
596
- </select>
597
- </fieldset>
598
- </form>
599
-
600
- <h3>Textareas</h3>
601
- <form>
602
- <fieldset>
603
- <label>Textarea</label>
604
- <textarea rows="7">Textarea text</textarea>
605
- <label>Textarea placeholder</label>
606
- <textarea id="textarea" name="textarea" placeholder="This is an example of HTML5 placeholder text."
607
- rows="7"></textarea>
608
- </fieldset>
609
- </form>
610
-
611
- <h3>Textareas (disabled)</h3>
612
- <form>
613
- <fieldset disabled>
614
- <label>Textarea</label>
615
- <textarea rows="7">Textarea text</textarea>
616
- <label>Textarea placeholder</label>
617
- <textarea id="textarea2" name="textarea2" placeholder="This is an example of HTML5 placeholder text."
618
- rows="7"></textarea>
619
- </fieldset>
620
- </form>
621
- </div>
622
- </div>
623
- <div class="bf-row">
624
- <div class="bf-col-6">
625
- <h3>Clickable inputs</h3>
626
- <fieldset class="bf-m-b-3">
627
- <div class="input-image">
628
- <input alt="Image (input)" src="../docs/test/images/placeholder-img-130x14.jpg" type="image" /><br />
629
- <code>input type="image" (130x40px)</code>
630
- </div>
631
- <div>
632
- <input type="reset" value="Reset (input)" />
633
- </div>
634
- <div>
635
- <input type="button" value="Button (input)" />
636
- </div>
637
- <div>
638
- <input type="submit" value="Submit (input)" />
639
- </div>
640
- <div>
641
- <a class="bf-btn" href="#" title="button link" role="button">Button (link)</a>
642
- </div>
643
- <div>
644
- <a class="bf-btn bf-btn--primary" href="#" title="button link" role="button">Primary button (link)</a>
645
- </div>
646
- </fieldset>
647
-
648
- <fieldset disabled>
649
- <h3>Clickable inputs (disabled)</h3>
650
- <div class="input-image">
651
- <input alt="Image (input)" src="../docs/test/images/placeholder-img-130x14.jpg" type="image" /><br />
652
- <code>input type="image" (130x40px)</code>
653
- </div>
654
- <div>
655
- <input type="reset" value="Reset (input)" />
656
- </div>
657
- <div>
658
- <input type="button" value="Button (input)" />
659
- </div>
660
- <div>
661
- <input type="submit" value="Submit (input)" />
662
- </div>
663
- <div>
664
- <a class="bf-btn" href="#" title="button link" role="button">Button (link)</a>
665
- </div>
666
- <div>
667
- <a class="bf-btn bf-btn--primary" href="#" title="button link" role="button">Primary button (link)</a>
668
- </div>
669
- </fieldset>
670
- </div>
671
- <div class="bf-col-6">
672
- <h3>Buttons</h3>
673
- <fieldset class="bf-m-b-3">
674
- <div>
675
- <button type="reset">Reset (button)</button>
676
- </div>
677
- <div>
678
- <button type="button">Button (button)</button>
679
- </div>
680
- <div>
681
- <button type="submit">Submit (button)</button>
682
- </div>
683
- <div>
684
- <button class="bf-btn bf-btn--primary" type="submit">
685
- Primary submit (button)
686
- </button>
687
- </div>
688
- </fieldset>
689
-
690
- <h3>Buttons (.bf-disabled)</h3>
691
- <fieldset>
692
- <div>
693
- <button type="reset" class="bf-disabled">Reset (button)</button>
694
- </div>
695
- <div>
696
- <button type="button" class="bf-disabled">
697
- Button (button)
698
- </button>
699
- </div>
700
- <div>
701
- <button type="submit" class="bf-disabled">
702
- Submit (button)
703
- </button>
704
- </div>
705
- <div>
706
- <button class="bf-btn bf-btn--primary bf-disabled" type="submit">
707
- Primary submit (button)
708
- </button>
709
- </div>
710
- </fieldset>
711
- </div>
712
- </div>
713
- <div class="bf-row">
714
- <div class="bf-col-12">
715
- <h2 id="tables" class="h2--section">Tables</h2>
716
- </div>
717
- </div>
718
- <div class="bf-row">
719
- <div class="bf-col-6">
720
- <h3>Unstyled tabular data</h3>
721
- <table>
722
- <caption>
723
- Jimi Hendrix - albums
724
- </caption>
725
- <thead>
726
- <tr>
727
- <th>Album</th>
728
- <th>Year</th>
729
- <th>Price</th>
730
- </tr>
731
- </thead>
732
- <tbody>
733
- <tr>
734
- <td>Are You Experienced</td>
735
- <td>1967</td>
736
- <td>$1.00</td>
737
- </tr>
738
- <tr>
739
- <td>Axis: Bold as Love</td>
740
- <td>1967</td>
741
- <td>$12.00</td>
742
- </tr>
743
- <tr>
744
- <td>Electric Ladyland</td>
745
- <td>1968</td>
746
- <td>$1.00</td>
747
- </tr>
748
- <tr>
749
- <td>Band of Gypsys</td>
750
- <td>1970</td>
751
- <td>$12.00</td>
752
- </tr>
753
- </tbody>
754
- <tfoot>
755
- <tr>
756
- <th>Album</th>
757
- <th>Year</th>
758
- <th>Price</th>
759
- </tr>
760
- </tfoot>
761
- </table>
762
- </div>
763
-
764
- <div class="bf-col-6">
765
- <h3>Styled tabular data</h3>
766
- <table class="bf-table">
767
- <caption>
768
- Jimi Hendrix - albums
769
- </caption>
770
- <thead>
771
- <tr>
772
- <th>Album</th>
773
- <th>Year</th>
774
- <th>Price</th>
775
- </tr>
776
- </thead>
777
- <tbody>
778
- <tr>
779
- <td>Are You Experienced</td>
780
- <td>1967</td>
781
- <td>$1.00</td>
782
- </tr>
783
- <tr>
784
- <td>Axis: Bold as Love</td>
785
- <td>1967</td>
786
- <td>$12.00</td>
787
- </tr>
788
- <tr>
789
- <td>Electric Ladyland</td>
790
- <td>1968</td>
791
- <td>$1.00</td>
792
- </tr>
793
- <tr>
794
- <td>Band of Gypsys</td>
795
- <td>1970</td>
796
- <td>$12.00</td>
797
- </tr>
798
- </tbody>
799
- <tfoot>
800
- <tr>
801
- <th>Album</th>
802
- <th>Year</th>
803
- <th>Price</th>
804
- </tr>
805
- </tfoot>
806
- </table>
807
- </div>
808
- </div>
809
- <div class="bf-row">
810
- <div class="bf-col-12">
811
- <h3>Styled responsive tabular data</h3>
812
- <div class="bf-table-responsive">
813
- <table class="bf-table">
814
- <caption>
815
- Caption goes here
816
- </caption>
817
- <thead>
818
- <tr>
819
- <th>Header 1</th>
820
- <th>Header 2</th>
821
- <th>Header 3</th>
822
- <th>Header 4</th>
823
- <th>Header 5</th>
824
- <th>Header 6</th>
825
- <th>Header 7</th>
826
- <th>Header 8</th>
827
- </tr>
828
- </thead>
829
- <tr>
830
- <td>row1_cell1</td>
831
- <td>row1_cell2</td>
832
- <td>row1_cell3</td>
833
- <td>row1_cell4</td>
834
- <td>row1_cell5</td>
835
- <td>row1_cell6</td>
836
- <td>row1_cell7</td>
837
- <td>row1_cell8</td>
838
- </tr>
839
- <tr>
840
- <td>row2_cell1</td>
841
- <td>row2_cell2</td>
842
- <td>row2_cell3</td>
843
- <td>row2_cell4</td>
844
- <td>row2_cell5</td>
845
- <td>row2_cell6</td>
846
- <td>row2_cell7</td>
847
- <td>row2_cell8</td>
848
- </tr>
849
- <tr>
850
- <td>row3_cell1</td>
851
- <td>row3_cell2</td>
852
- <td>row3_cell3</td>
853
- <td>row3_cell4</td>
854
- <td>row3_cell5</td>
855
- <td>row3_cell6</td>
856
- <td>row3_cell7</td>
857
- <td>row3_cell8</td>
858
- </tr>
859
- <tr>
860
- <td>row4_cell1</td>
861
- <td>row4_cell2</td>
862
- <td>row4_cell3</td>
863
- <td>row4_cell4</td>
864
- <td>row4_cell5</td>
865
- <td>row4_cell6</td>
866
- <td>row4_cell7</td>
867
- <td>row4_cell8</td>
868
- </tr>
869
- <tr>
870
- <td>row5_cell1</td>
871
- <td>row5_cell2</td>
872
- <td>row5_cell3</td>
873
- <td>row5_cell4</td>
874
- <td>row5_cell5</td>
875
- <td>row5_cell6</td>
876
- <td>row5_cell7</td>
877
- <td>row5_cell8</td>
878
- </tr>
879
- <tfoot>
880
- <tr>
881
- <th>Header 1</th>
882
- <th>Header 2</th>
883
- <th>Header 3</th>
884
- <th>Header 4</th>
885
- <th>Header 5</th>
886
- <th>Header 6</th>
887
- <th>Header 7</th>
888
- <th>Header 8</th>
889
- </tr>
890
- </tfoot>
891
- </table>
892
- </div>
893
- </div>
894
- </div>
895
-
896
- <div class="bf-row">
897
- <div class="bf-col-4 bf-m-b-3">
898
- <h3>Styled tabular data + zebra striping</h3>
899
- <table class="bf-table bf-table--zebra">
900
- <caption>
901
- Jimi Hendrix - albums
902
- </caption>
903
- <thead>
904
- <tr>
905
- <th>Album</th>
906
- <th>Year</th>
907
- <th>Price</th>
908
- </tr>
909
- </thead>
910
- <tbody>
911
- <tr>
912
- <td>Are You Experienced</td>
913
- <td>1967</td>
914
- <td>$1.00</td>
915
- </tr>
916
- <tr>
917
- <td>Axis: Bold as Love</td>
918
- <td>1967</td>
919
- <td>$12.00</td>
920
- </tr>
921
- <tr>
922
- <td>Electric Ladyland</td>
923
- <td>1968</td>
924
- <td>$1.00</td>
925
- </tr>
926
- <tr>
927
- <td>Band of Gypsys</td>
928
- <td>1970</td>
929
- <td>$12.00</td>
930
- </tr>
931
- </tbody>
932
- <tfoot>
933
- <tr>
934
- <th>Album</th>
935
- <th>Year</th>
936
- <th>Price</th>
937
- </tr>
938
- </tfoot>
939
- </table>
940
- </div>
941
-
942
- <div class="bf-col-8">
943
- <h3>Styled responsive tabular data + zebra striping</h3>
944
- <div class="bf-table-responsive bf-table-responsive--zebra">
945
- <table class="bf-table">
946
- <caption>
947
- Caption goes here
948
- </caption>
949
- <thead>
950
- <tr>
951
- <th>Header 1</th>
952
- <th>Header 2</th>
953
- <th>Header 3</th>
954
- <th>Header 4</th>
955
- <th>Header 5</th>
956
- <th>Header 6</th>
957
- <th>Header 7</th>
958
- <th>Header 8</th>
959
- </tr>
960
- </thead>
961
- <tr>
962
- <td>row1_cell1</td>
963
- <td>row1_cell2</td>
964
- <td>row1_cell3</td>
965
- <td>row1_cell4</td>
966
- <td>row1_cell5</td>
967
- <td>row1_cell6</td>
968
- <td>row1_cell7</td>
969
- <td>row1_cell8</td>
970
- </tr>
971
- <tr>
972
- <td>row2_cell1</td>
973
- <td>row2_cell2</td>
974
- <td>row2_cell3</td>
975
- <td>row2_cell4</td>
976
- <td>row2_cell5</td>
977
- <td>row2_cell6</td>
978
- <td>row2_cell7</td>
979
- <td>row2_cell8</td>
980
- </tr>
981
- <tr>
982
- <td>row3_cell1</td>
983
- <td>row3_cell2</td>
984
- <td>row3_cell3</td>
985
- <td>row3_cell4</td>
986
- <td>row3_cell5</td>
987
- <td>row3_cell6</td>
988
- <td>row3_cell7</td>
989
- <td>row3_cell8</td>
990
- </tr>
991
- <tr>
992
- <td>row4_cell1</td>
993
- <td>row4_cell2</td>
994
- <td>row4_cell3</td>
995
- <td>row4_cell4</td>
996
- <td>row4_cell5</td>
997
- <td>row4_cell6</td>
998
- <td>row4_cell7</td>
999
- <td>row4_cell8</td>
1000
- </tr>
1001
- <tr>
1002
- <td>row5_cell1</td>
1003
- <td>row5_cell2</td>
1004
- <td>row5_cell3</td>
1005
- <td>row5_cell4</td>
1006
- <td>row5_cell5</td>
1007
- <td>row5_cell6</td>
1008
- <td>row5_cell7</td>
1009
- <td>row5_cell8</td>
1010
- </tr>
1011
- <tfoot>
1012
- <tr>
1013
- <th>Header 1</th>
1014
- <th>Header 2</th>
1015
- <th>Header 3</th>
1016
- <th>Header 4</th>
1017
- <th>Header 5</th>
1018
- <th>Header 6</th>
1019
- <th>Header 7</th>
1020
- <th>Header 8</th>
1021
- </tr>
1022
- </tfoot>
1023
- </table>
1024
- </div>
1025
- </div>
1026
- </div>
1027
- <div class="bf-row">
1028
- <div class="bf-col-12">
1029
- <h2 id="grid-system" class="h2--section">Grid System</h2>
1030
- <p>
1031
- 12 columns fluid Grid System with containers, rows and columns.<br />
1032
- At 575, 768 or 991 pixels the columns could be 100% of the row's
1033
- width.<br />
1034
- The default container <code>.bf-container</code> has a
1035
- <code>max-width</code> set to 1140 pixels by default.<br />
1036
- The custom container <code>.bf-container--fluid</code> doesn't
1037
- have a <code>max-width</code>.
1038
- </p>
1039
- <p class="bf-m-b-0">
1040
- This is a default container with a
1041
- <code>bf-container--break-md</code> class and a set a columns
1042
- combinations.
1043
- </p>
1044
- </div>
1045
- </div>
1046
-
1047
- <div class="grid bf-m-b-4">
1048
- <div class="bf-row">
1049
- <div class="bf-col-12">
1050
- <div class="col-wrapper">12 col</div>
1051
- </div>
1052
- </div>
1053
-
1054
- <div class="bf-row">
1055
- <div class="bf-col-11">
1056
- <div class="col-wrapper">11 col</div>
1057
- </div>
1058
-
1059
- <div class="bf-col-1">
1060
- <div class="col-wrapper">1 col</div>
1061
- </div>
1062
- </div>
1063
-
1064
- <div class="bf-row">
1065
- <div class="bf-col-10">
1066
- <div class="col-wrapper">10 col</div>
1067
- </div>
1068
- <div class="bf-col-2">
1069
- <div class="col-wrapper">2 col</div>
1070
- </div>
1071
- </div>
1072
-
1073
- <div class="bf-row">
1074
- <div class="bf-col-9">
1075
- <div class="col-wrapper">9 col</div>
1076
- </div>
1077
- <div class="bf-col-3">
1078
- <div class="col-wrapper">3 col</div>
1079
- </div>
1080
- </div>
1081
-
1082
- <div class="bf-row">
1083
- <div class="bf-col-8">
1084
- <div class="col-wrapper">8 col</div>
1085
- </div>
1086
- <div class="bf-col-4">
1087
- <div class="col-wrapper">4 col</div>
1088
- </div>
1089
- </div>
1090
- <div class="bf-row">
1091
- <div class="bf-col-7">
1092
- <div class="col-wrapper">7 col</div>
1093
- </div>
1094
- <div class="bf-col-5">
1095
- <div class="col-wrapper">5 col</div>
1096
- </div>
1097
- </div>
1098
-
1099
- <div class="bf-row">
1100
- <div class="bf-col-6">
1101
- <div class="col-wrapper">6 col</div>
1102
- </div>
1103
- <div class="bf-col-6">
1104
- <div class="col-wrapper">6 col</div>
1105
- </div>
1106
- </div>
1107
-
1108
- <div class="bf-row">
1109
- <div class="bf-col-5">
1110
- <div class="col-wrapper">5 col</div>
1111
- </div>
1112
-
1113
- <div class="bf-col-7">
1114
- <div class="col-wrapper">7 col</div>
1115
- </div>
1116
- </div>
1117
-
1118
- <div class="bf-row">
1119
- <div class="bf-col-4">
1120
- <div class="col-wrapper">4 col</div>
1121
- </div>
1122
-
1123
- <div class="bf-col-4">
1124
- <div class="col-wrapper">4 col</div>
1125
- </div>
1126
-
1127
- <div class="bf-col-4">
1128
- <div class="col-wrapper">4 col</div>
1129
- </div>
1130
- </div>
1131
-
1132
- <div class="bf-row">
1133
- <div class="bf-col-3">
1134
- <div class="col-wrapper">3 col</div>
1135
- </div>
1136
- <div class="bf-col-3">
1137
- <div class="col-wrapper">3 col</div>
1138
- </div>
1139
-
1140
- <div class="bf-col-3">
1141
- <div class="col-wrapper">3 col</div>
1142
- </div>
1143
-
1144
- <div class="bf-col-3">
1145
- <div class="col-wrapper">3 col</div>
1146
- </div>
1147
- </div>
1148
-
1149
- <div class="bf-row">
1150
- <div class="bf-col-2">
1151
- <div class="col-wrapper">2 col</div>
1152
- </div>
1153
-
1154
- <div class="bf-col-2">
1155
- <div class="col-wrapper">2 col</div>
1156
- </div>
1157
-
1158
- <div class="bf-col-2">
1159
- <div class="col-wrapper">2 col</div>
1160
- </div>
1161
-
1162
- <div class="bf-col-2">
1163
- <div class="col-wrapper">2 col</div>
1164
- </div>
1165
-
1166
- <div class="bf-col-2">
1167
- <div class="col-wrapper">2 col</div>
1168
- </div>
1169
- <div class="bf-col-2">
1170
- <div class="col-wrapper">2 col</div>
1171
- </div>
1172
- </div>
1173
-
1174
- <p>No gutters between columns (<code>.bf-no-gutters</code>)</p>
1175
- <div class="bf-row bf-no-gutters">
1176
- <div class="bf-col-2 bf-no-gutters">
1177
- <div class="col-wrapper">2 col</div>
1178
- </div>
1179
-
1180
- <div class="bf-col-2 bf-no-gutters">
1181
- <div class="col-wrapper">2 col</div>
1182
- </div>
1183
-
1184
- <div class="bf-col-2 bf-no-gutters">
1185
- <div class="col-wrapper">2 col</div>
1186
- </div>
1187
-
1188
- <div class="bf-col-2 bf-no-gutters">
1189
- <div class="col-wrapper">2 col</div>
1190
- </div>
1191
-
1192
- <div class="bf-col-2 bf-no-gutters">
1193
- <div class="col-wrapper">2 col</div>
1194
- </div>
1195
- <div class="bf-col-2 bf-no-gutters">
1196
- <div class="col-wrapper">2 col</div>
1197
- </div>
1198
- </div>
1199
- </div>
1200
- </main>
1201
-
1202
- <footer>
1203
- <div class="bf-row bf-m-b-4">
1204
- <div class="bf-col-12 bf-t-center">
1205
- <div class="bf-m-b-4 bf-p-t-3">
1206
- <h2>Fork, download or contribute</h2>
1207
- <code class="bf-display-block bf-m-b-3">
1208
- $ git clone https://github.com/marcop135/bullframe.css.git
1209
- </code>
1210
- <a class="bf-btn bf-btn--primary" href="https://github.com/marcop135/bullframe.css/archive/master.zip"
1211
- role="button">Download</a>
1212
- <a class="bf-btn" href="https://github.com/marcop135/bullframe.css" role="button">GitHub</a>
1213
- </div>
1214
-
1215
- <div class="bf-t-center">
1216
- <a class="bf-display-inline-block" href="#top">Back to top</a>
1217
- </div>
1218
- </div>
1219
- </div>
1220
- </footer>
1221
- </div>
1222
- </body>
1223
-
1
+ <!DOCTYPE html>
2
+ <html class="test" id="top" lang="en">
3
+
4
+ <head>
5
+ <meta charset="UTF-8" />
6
+ <meta http-equiv="x-ua-Compatible" content="IE=edge" />
7
+ <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
8
+
9
+ <title>Test page — bullframe.css Sass (SCSS) framework</title>
10
+ <meta name="description"
11
+ content="A quick look at a wide range of HTML elements, divided into several sections and rendered into unusual combinations, for testing purposes only." />
12
+
13
+ <!-- https://realfavicongenerator.net/ -->
14
+ <link rel="apple-touch-icon" sizes="180x180" href="./docs/test/icons/apple-touch-icon.png?v=PYqzMzgx6v" />
15
+ <link rel="icon" type="image/png" sizes="32x32" href="./docs/test/icons/favicon-32x32.png?v=PYqzMzgx6v" />
16
+ <link rel="icon" type="image/png" sizes="16x16" href="./docs/test/icons/favicon-16x16.png?v=PYqzMzgx6v" />
17
+ <link rel="mask-icon" href="./docs/test/icons/safari-pinned-tab.svg?v=PYqzMzgx6v" color="#f95c1f" />
18
+ <link rel="shortcut icon" href="./docs/test/icons/favicon.ico?v=PYqzMzgx6v" />
19
+ <meta name="msapplication-TileColor" content="#da532c" />
20
+ <meta name="theme-color" content="#f95c1f" />
21
+
22
+ <link rel="stylesheet" href="./dist/css/bullframe-dark-prefers.min.css?v4.0.1" />
23
+
24
+ <!-- this is just for a nicer demo -->
25
+ <link rel="stylesheet" href="./docs/test/css/style.css" />
26
+ </head>
27
+
28
+ <body class="bf-responsive-typography bf-reduced-motion">
29
+ <a class="bf-sr-only focusable" href="#main-content">Skip to main content</a>
30
+ <div class="bf-container bf-container--break-md">
31
+ <header class="bf-t-center bf-m-b-3">
32
+ <h1>bullframe<span>.css</span></h1>
33
+ <p class="bf-lead">Solid, fluid, cross-browser Sass (SCSS) framework</p>
34
+ <a class="bf-btn bf-btn--primary" href="https://github.com/marcop135/bullframe.css/archive/master.zip"
35
+ role="button">Download</a>
36
+ <a class="bf-btn" href="https://github.com/marcop135/bullframe.css" role="button">GitHub</a>
37
+ <p class="description">
38
+ This an is a quick look at a wide range of HTML elements, divided into
39
+ several sections and rendered into unusual combinations, for testing
40
+ purpose only.
41
+ </p>
42
+
43
+ <hr />
44
+
45
+ <p class="bf-t-center">
46
+ CSS build in use:<br />
47
+ <mark><code>bullframe-dark-prefers.min.css</code></mark>
48
+ </p>
49
+ <p class="bf-t-center">
50
+ <code>&lt;body&gt;</code> classes:<br />
51
+ <code>.bf-responsive-typography</code><br />
52
+ <code>.bf-reduced-motion</code>
53
+ </p>
54
+
55
+ <hr />
56
+ </header>
57
+
58
+ <main id="main-content">
59
+ <h2 id="texts" class="h2--section">Text elements</h2>
60
+
61
+ <div class="bf-row">
62
+ <div class="bf-col-6">
63
+ <div class="bf-m-b-4">
64
+ <h3>Headings</h3>
65
+ <h1>Heading 1 <a href="#">with link</a></h1>
66
+ <h2>Heading 2 <a href="#">with link</a></h2>
67
+ <h3>Heading 3 <a href="#">with link</a></h3>
68
+ <h4>Heading 4 <a href="#">with link</a></h4>
69
+ <h5>Heading 5 <a href="#">with link</a></h5>
70
+ <h6>Heading 6 <a href="#">with link</a></h6>
71
+ </div>
72
+
73
+ <h3>Paragraphs with headings utilities</h3>
74
+ <p class="bf-h1">Heading 1</p>
75
+ <p class="bf-h2">Heading 2</p>
76
+ <p class="bf-h3">Heading 3</p>
77
+ <p class="bf-h4">Heading 4</p>
78
+ <p class="bf-h5">Heading 5</p>
79
+ <p class="bf-h6">Heading 6</p>
80
+ </div>
81
+ <div class="bf-col-6">
82
+ <h3>Inline text elements</h3>
83
+ <p>
84
+ The <a href="#">a element</a> example<br />
85
+ The <abbr>abbr element</abbr> and
86
+ <abbr title="Title text">abbr element with title</abbr> examples
87
+ <br />
88
+ The <strong>b element</strong> example<br />
89
+ The <cite>cite element</cite> example<br />
90
+ The <code>code element</code> example<br />
91
+ The <del>del element</del> example<br />
92
+ The <dfn>dfn element</dfn> and
93
+ <dfn title="Title text">dfn element with title</dfn>
94
+ examples<br />
95
+ The <em>em element</em> example<br />
96
+ The <em>i element</em> example<br />
97
+ The img element
98
+ <img src="../docs/test/images/placeholder-img-16x16.jpg" alt="just a placeholder" loading="lazy" />
99
+ example<br />
100
+ The <ins>ins element</ins> example<br />
101
+ The <kbd>kbd element</kbd> example<br />
102
+ The <mark>mark element</mark> example<br />
103
+ The <q>q element <q>inside</q> a q element</q> example<br />
104
+ The <s>s element</s> example<br />
105
+ The <samp>samp element</samp> example<br />
106
+ The <small>small element</small> example<br />
107
+ The <span>span element</span> example<br />
108
+ The <strong>strong element</strong> example<br />
109
+ The <sub>sub element</sub> example<br />
110
+ The <sup>sup element</sup> example<br />
111
+ The <u>u element</u> example<br />
112
+ The <var>var element</var> example
113
+ </p>
114
+ </div>
115
+ </div>
116
+ <div class="bf-row">
117
+ <div class="bf-col-6">
118
+ <h3>Paragraphs</h3>
119
+ <p>
120
+ Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean
121
+ commodo ligula eget dolor. Aenean massa. Cum sociis natoque
122
+ penatibus et m. Lorem ipsum dolor sit amet, consectetuer
123
+ adipiscing elit. Aenean commodo ligula eget dolor.
124
+ </p>
125
+ <p>
126
+ The European languages are members of the same family. Their
127
+ separate existence is a myth. For science, music, sport, etc,
128
+ Europe uses the same vocabulary. The languages only differ in
129
+ their grammar, their pronunciation and their most common words.
130
+ Everyone realizes why a new common language would be desirable.
131
+ </p>
132
+ </div>
133
+ <div class="bf-col-6">
134
+ <h3>hidden attribute</h3>
135
+ <p hidden="">
136
+ This should be hidden in all browsers (apart from IE6)
137
+ </p>
138
+
139
+ <h3>Template content</h3>
140
+ <template>
141
+ <h1>{{title}}</h1>
142
+ <content></content>
143
+ </template>
144
+
145
+ <h3>Address</h3>
146
+ <address>Address: somewhere, world</address>
147
+ </div>
148
+ </div>
149
+ <div class="bf-row">
150
+ <div class="bf-col-12">
151
+ <h3>hr</h3>
152
+ <hr />
153
+ </div>
154
+ </div>
155
+ <div class="bf-row">
156
+ <div class="bf-col-12">
157
+ <h3>pre (383 characters)</h3>
158
+ <pre>
159
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.
160
+ </pre>
161
+
162
+ <h3>code (526 characters)</h3>
163
+ <code>
164
+ html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em
165
+ 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline
166
+ dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}
167
+ </code>
168
+ </div>
169
+ </div>
170
+ <div class="bf-row">
171
+ <div class="bf-col-12">
172
+ <h3>pre code</h3>
173
+ <pre><code>&lt;!doctype html&gt;
174
+ &lt;html&gt;
175
+ &lt;head&gt;
176
+ &lt;meta charset="utf-8"&gt;
177
+ &lt;meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"&gt;
178
+ &lt;title &gt;...&lt;/title&gt;
179
+ &lt;link rel="stylesheet" href="bullframe.css"&gt;
180
+ &lt;/head&gt;
181
+ &lt;body&gt;
182
+ &lt;main&gt;...&lt;/div&gt;
183
+ &lt;/body&gt;
184
+ &lt;/html&gt;</code></pre>
185
+ </div>
186
+ </div>
187
+ <div class="bf-row">
188
+ <div class="bf-col-12">
189
+ <h3>blockquotes</h3>
190
+ <blockquote>
191
+ <p>
192
+ Some sort of famous witty quote marked up with a
193
+ <code>&lt;blockquote&gt;</code> and a child
194
+ <code>&lt;p&gt;</code> element.
195
+ </p>
196
+ <small>Tom Whatever</small>
197
+ </blockquote>
198
+
199
+ <blockquote>
200
+ Even better philosophical quote marked up with just a
201
+ <code>&lt;blockquote&gt;</code> element.
202
+ </blockquote>
203
+ </div>
204
+ </div>
205
+ <div class="bf-row">
206
+ <div class="bf-col-4">
207
+ <h3>Ordered list</h3>
208
+ <ol>
209
+ <li>list item 1</li>
210
+ <li>
211
+ list item 1
212
+ <ol>
213
+ <li>list item 2</li>
214
+ <li>
215
+ list item 2
216
+ <ol>
217
+ <li>list item 3</li>
218
+ <li>list item 3</li>
219
+ </ol>
220
+ </li>
221
+ <li>list item 2</li>
222
+ <li>list item 2</li>
223
+ </ol>
224
+ </li>
225
+ <li>list item 1</li>
226
+ <li>list item 1</li>
227
+ </ol>
228
+ </div>
229
+ <div class="bf-col-4">
230
+ <h3>Unordered list</h3>
231
+ <ul>
232
+ <li>list item 1</li>
233
+ <li>
234
+ list item 1
235
+ <ul>
236
+ <li>list item 2</li>
237
+ <li>
238
+ list item 2
239
+ <ul>
240
+ <li>list item 3</li>
241
+ <li>list item 3</li>
242
+ </ul>
243
+ </li>
244
+ <li>list item 2</li>
245
+ <li>list item 2</li>
246
+ </ul>
247
+ </li>
248
+ <li>list item 1</li>
249
+ <li>list item 1</li>
250
+ </ul>
251
+ </div>
252
+ <div class="bf-col-4">
253
+ <h3>Definition list</h3>
254
+ <dl>
255
+ <dt>Description name</dt>
256
+ <dd>Description value</dd>
257
+ <dt>Description name</dt>
258
+ <dd>Description value</dd>
259
+ <dt>Description name</dt>
260
+ <dd>Description value</dd>
261
+ </dl>
262
+ </div>
263
+ </div>
264
+
265
+ <div class="bf-row">
266
+ <div class="bf-col-6">
267
+ <h3>Unstyled list</h3>
268
+ <ol class="bf-list-unstyled">
269
+ <li>list item 1</li>
270
+ <li>
271
+ list item 1
272
+ <ol>
273
+ <li>list item 2</li>
274
+ <li>
275
+ list item 2
276
+ <ol>
277
+ <li>list item 3</li>
278
+ <li>list item 3</li>
279
+ </ol>
280
+ </li>
281
+ <li>list item 2</li>
282
+ <li>list item 2</li>
283
+ </ol>
284
+ </li>
285
+ <li>list item 1</li>
286
+ <li>list item 1</li>
287
+ </ol>
288
+ </div>
289
+ <div class="bf-col-6">
290
+ <h3>Navigation list</h3>
291
+ <nav>
292
+ <ul>
293
+ <li>list item 1</li>
294
+ <li>
295
+ list item 1
296
+ <ol>
297
+ <li>list item 2</li>
298
+ <li>
299
+ list item 2
300
+ <ol>
301
+ <li>list item 3</li>
302
+ <li>list item 3</li>
303
+ </ol>
304
+ </li>
305
+ <li>list item 2</li>
306
+ <li>list item 2</li>
307
+ </ol>
308
+ </li>
309
+ <li>list item 1</li>
310
+ <li>list item 1</li>
311
+ </ul>
312
+ </nav>
313
+ </div>
314
+ </div>
315
+
316
+ <div class="bf-row">
317
+ <div class="bf-col-12">
318
+ <h2 id="embedded-content" class="h2--section">Embedded content</h2>
319
+ </div>
320
+ </div>
321
+ <div class="bf-row">
322
+ <div class="bf-col-6">
323
+ <h3>Linked figure with an image and a caption</h3>
324
+ <figure>
325
+ <a href="#">
326
+ <img src="../docs/test/images/placeholder-img-800x40.jpg" alt="just a placeholder" loading="lazy" />
327
+ </a>
328
+ <figcaption>The image above is 800x400 pixels</figcaption>
329
+ </figure>
330
+ </div>
331
+ <div class="bf-col-6">
332
+ <h3>SVG</h3>
333
+ <svg width="200px" height="200px">
334
+ <circle cx="0" cy="0" r="200" fill="#ff0000" />
335
+ </svg>
336
+ </div>
337
+ </div>
338
+ <div class="bf-row">
339
+ <div class="bf-col-6">
340
+ <div class="bf-m-b-3">
341
+ <h3>HTML5 video with controls</h3>
342
+ <video poster="./docs/test/images/video-poster.png" controls width="450">
343
+ <source src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm"
344
+ type="video/webm" />
345
+ <source src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm"
346
+ type="video/mp4" />
347
+ Sorry, your browser doesn't support embedded videos.
348
+ </video>
349
+ </div>
350
+
351
+ <div class="bf-m-b-3">
352
+ <h3>Audio with controls</h3>
353
+ <audio controls>
354
+ <source src="https://media.html5media.info/audio.mp3" type="audio/mp3" />
355
+ <source src="https://media.html5media.info/audio.ogg" type="audio/ogg" />
356
+ <p>Your browser does not support the HTML5 Audio element.</p>
357
+ </audio>
358
+ </div>
359
+ </div>
360
+ <div class="bf-col-6">
361
+ <h3>YouTube iframe 16:9 (default)</h3>
362
+ <div class="bf-embed-responsive">
363
+ <iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/Z-4v4I7Gzk0"
364
+ allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen
365
+ loading="lazy"></iframe>
366
+ </div>
367
+ </div>
368
+ </div>
369
+ <div class="bf-row">
370
+ <div class="bf-col-6 bf-m-b-4">
371
+ <h3>Progress</h3>
372
+ <div class="bf-m-b-3">
373
+ <label for="file">File progress:</label>
374
+ <progress id="file" max="100" value="70">70%</progress>
375
+ </div>
376
+
377
+ <h3>Meter</h3>
378
+ <label for="fuel">Fuel level:</label>
379
+ <meter id="fuel" min="0" max="100" low="33" high="66" optimum="80" value="50">
380
+ at 50/100
381
+ </meter>
382
+ </div>
383
+ <div class="bf-col-6">
384
+ <h3>Details with a summary</h3>
385
+ <div class="bf-m-b-2">
386
+ <details>
387
+ <summary>Click to Open</summary>
388
+ Something small enough to escape casual notice.
389
+ </details>
390
+ </div>
391
+
392
+ <details open>
393
+ <summary>Click to Hide</summary>
394
+ Something small enough to escape casual notice.
395
+ </details>
396
+ </div>
397
+ </div>
398
+ <div class="bf-row">
399
+ <div class="bf-col-12">
400
+ <h2 id="forms" class="h2--section">Forms</h2>
401
+ </div>
402
+ </div>
403
+ <div class="bf-row">
404
+ <div class="bf-col-6 bf-m-b-3">
405
+ <h3>Inputs</h3>
406
+
407
+ <form>
408
+ <fieldset>
409
+ <legend>
410
+ HTML5 has several new input types for forms (legend).
411
+ </legend>
412
+ <div class="bf-m-b-4">
413
+ <label>Text input as sibling of label</label>
414
+ <input type="text" value="default value that goes on and on without stopping or punctuation" />
415
+
416
+ <label>Text input as descendant of label (not recommended)
417
+ <input type="text"
418
+ value="default value that goes on and on without stopping or punctuation" /></label>
419
+
420
+ <label disabled>Text input as sibling of label (disabled)</label>
421
+ <input type="text" value="default value that goes on and on without stopping or punctuation" disabled />
422
+
423
+ <label aria-disabled="true">Text input as sibling of label (aria-disabled)</label>
424
+ <input type="text" value="default value that goes on and on without stopping or punctuation"
425
+ aria-disabled="true" />
426
+
427
+ <label class="bf-disabled">Text input as sibling of label (.bf-disabled)</label>
428
+ <input type="text" value="default value that goes on and on without stopping or punctuation"
429
+ class="bf-disabled" />
430
+
431
+ <label class="bf-disabled">Text input as descendant of label (disabled, not
432
+ recommended)
433
+ <input type="text" value="default value" disabled /></label>
434
+
435
+ <label>Text input (focused)</label>
436
+ <input class="bf-focused" type="text" value="default value" />
437
+
438
+ <label>Text input (invalid)</label>
439
+ <input class="bf-invalid" type="text" value="invalid value" />
440
+
441
+ <label>Email input (required)</label>
442
+ <input type="email" required />
443
+
444
+ <label>Number input</label>
445
+ <input id="in" max="10" min="0" type="number" value="5" />
446
+
447
+ <label>Tel input</label> <input type="tel" />
448
+
449
+ <label>URL input</label> <input type="url" />
450
+
451
+ <label>Date input</label>
452
+ <input id="idd" type="date" value="1970-01-01" />
453
+
454
+ <label>Month input</label>
455
+ <input id="idm" type="month" value="1970-01" />
456
+
457
+ <label>Week input</label>
458
+ <input id="idw" type="week" value="1970-W01" />
459
+
460
+ <label>Datetime-local input</label>
461
+ <input id="idtl" type="datetime-local" value="1970-01-01T00:00" />
462
+ <label>Password input</label>
463
+ <input type="password" value="password" />
464
+
465
+ <label>Search input</label>
466
+ <input id="search" name="search" type="search" />
467
+
468
+ <label for="myBrowser">Input datalist (choose a browser)</label>
469
+ <input list="browsers" id="myBrowser" name="myBrowser" />
470
+ <datalist id="browsers">
471
+ <option value="Chrome"></option>
472
+ <option value="Firefox"></option>
473
+ <option value="Internet Explorer"></option>
474
+ <option value="Opera"></option>
475
+ <option value="Safari"></option>
476
+ <option value="Microsoft Edge"></option>
477
+ </datalist>
478
+
479
+ <label>File input</label>
480
+ <input type="file" />
481
+
482
+ <label>Range input</label>
483
+ <input id="ir" type="range" value="10" />
484
+ </div>
485
+
486
+ <h3>Radio and checkbox inputs</h3>
487
+
488
+ <h4>Radios</h4>
489
+
490
+ <div class="bf-m-b-3">
491
+ <div>
492
+ <input type="radio" id="huey" name="drone" value="huey" checked />
493
+ <label for="huey">Huey</label>
494
+ </div>
495
+
496
+ <div>
497
+ <input type="radio" id="louie" name="drone" value="louie" checked />
498
+ <label for="louie">Louie (checked)</label>
499
+ </div>
500
+
501
+ <div>
502
+ <input type="radio" id="jake" name="drone" value="jake" disabled />
503
+ <label class="bf-disabled" for="jake">Jake (disabled)</label>
504
+ </div>
505
+ </div>
506
+
507
+ <h4>Checkboxes</h4>
508
+ <div>
509
+ <input type="checkbox" id="scales" name="scales" />
510
+ <label for="scales">Scales</label>
511
+ </div>
512
+
513
+ <div>
514
+ <input type="checkbox" id="horns" name="horns" checked />
515
+ <label for="horns">Horns (checked)</label>
516
+ </div>
517
+
518
+ <div>
519
+ <input type="checkbox" id="wings" name="wings" disabled />
520
+ <label class="bf-disabled" for="wings">Wings (disabled)</label>
521
+ </div>
522
+ </fieldset>
523
+ </form>
524
+ </div>
525
+ <div class="bf-col-6">
526
+ <form>
527
+ <h3>Selects</h3>
528
+ <fieldset>
529
+ <label for="s">Select field</label>
530
+ <select id="s">
531
+ <option>Option 01</option>
532
+ <option>Option 02</option>
533
+ <option>Option 03</option>
534
+ <option>Option 04</option>
535
+ <option>Option 05</option>
536
+ </select>
537
+
538
+ <label for="s-ltr">Select field (RTL)</label>
539
+ <select id="s-ltr" dir="rtl">
540
+ <option>Option 01</option>
541
+ <option>Option 02</option>
542
+ <option>Option 03</option>
543
+ <option>Option 04</option>
544
+ <option>Option 05</option>
545
+ </select>
546
+
547
+ <label class="bf-disabled" for="s2">Select field (disabled)</label>
548
+ <select id="s2" disabled>
549
+ <option>Option 01</option>
550
+ <option>Option 02</option>
551
+ <option>Option 03</option>
552
+ <option>Option 04</option>
553
+ <option>Option 05</option>
554
+ </select>
555
+
556
+ <label for="select_multi">Select [size="2"]</label>
557
+ <select id="select_size" name="select_size" size="2">
558
+ <optgroup label="Group 1">
559
+ <option value="1">Some text goes here</option>
560
+ <option value="2">Another choice could be here</option>
561
+ <option value="3">Yet another item to be chosen</option>
562
+ </optgroup>
563
+ <optgroup label="Group 2">
564
+ <option value="4">Some text goes here</option>
565
+ <option value="5">Another choice could be here</option>
566
+ <option value="6">Yet another item to be chosen</option>
567
+ </optgroup>
568
+ </select>
569
+
570
+ <label for="select_multi">Select multiple</label>
571
+ <select id="select_multi" multiple="multiple" name="select_multi">
572
+ <optgroup label="Group 1">
573
+ <option value="1">Some text goes here</option>
574
+ <option value="2">Another choice could be here</option>
575
+ <option value="3">Yet another item to be chosen</option>
576
+ </optgroup>
577
+ <optgroup label="Group 2">
578
+ <option value="4">Some text goes here</option>
579
+ <option value="5">Another choice could be here</option>
580
+ <option value="6">Yet another item to be chosen</option>
581
+ </optgroup>
582
+ <optgroup label="Group 3">
583
+ <option value="7">Some text goes here</option>
584
+ <option value="8">Another choice could be here</option>
585
+ <option value="9">Yet another item to be chosen</option>
586
+ </optgroup>
587
+ </select>
588
+ </fieldset>
589
+ </form>
590
+
591
+ <h3>Textareas</h3>
592
+ <form>
593
+ <fieldset>
594
+ <label>Textarea</label>
595
+ <textarea rows="7">Textarea text</textarea>
596
+ <label>Textarea placeholder</label>
597
+ <textarea id="textarea" name="textarea" placeholder="This is an example of HTML5 placeholder text."
598
+ rows="7"></textarea>
599
+ </fieldset>
600
+ </form>
601
+
602
+ <h3>Textareas (disabled)</h3>
603
+ <form>
604
+ <fieldset disabled>
605
+ <label>Textarea</label>
606
+ <textarea rows="7">Textarea text</textarea>
607
+ <label>Textarea placeholder</label>
608
+ <textarea id="textarea2" name="textarea2" placeholder="This is an example of HTML5 placeholder text."
609
+ rows="7"></textarea>
610
+ </fieldset>
611
+ </form>
612
+ </div>
613
+ </div>
614
+ <div class="bf-row">
615
+ <div class="bf-col-6">
616
+ <h3>Clickable inputs</h3>
617
+ <fieldset class="bf-m-b-3">
618
+ <div class="input-image">
619
+ <input alt="Image (input)" src="../docs/test/images/placeholder-img-130x14.jpg" type="image" /><br />
620
+ <code>input type="image" (130x40px)</code>
621
+ </div>
622
+ <div>
623
+ <input type="reset" value="Reset (input)" />
624
+ </div>
625
+ <div>
626
+ <input type="button" value="Button (input)" />
627
+ </div>
628
+ <div>
629
+ <input type="submit" value="Submit (input)" />
630
+ </div>
631
+ <div>
632
+ <a class="bf-btn" href="#" title="button link" role="button">Button (link)</a>
633
+ </div>
634
+ <div>
635
+ <a class="bf-btn bf-btn--primary" href="#" title="button link" role="button">Primary button (link)</a>
636
+ </div>
637
+ </fieldset>
638
+
639
+ <fieldset disabled>
640
+ <h3>Clickable inputs (disabled)</h3>
641
+ <div class="input-image">
642
+ <input alt="Image (input)" src="../docs/test/images/placeholder-img-130x14.jpg" type="image" /><br />
643
+ <code>input type="image" (130x40px)</code>
644
+ </div>
645
+ <div>
646
+ <input type="reset" value="Reset (input)" />
647
+ </div>
648
+ <div>
649
+ <input type="button" value="Button (input)" />
650
+ </div>
651
+ <div>
652
+ <input type="submit" value="Submit (input)" />
653
+ </div>
654
+ <div>
655
+ <a class="bf-btn" href="#" title="button link" role="button">Button (link)</a>
656
+ </div>
657
+ <div>
658
+ <a class="bf-btn bf-btn--primary" href="#" title="button link" role="button">Primary button (link)</a>
659
+ </div>
660
+ </fieldset>
661
+ </div>
662
+ <div class="bf-col-6">
663
+ <h3>Buttons</h3>
664
+ <fieldset class="bf-m-b-3">
665
+ <div>
666
+ <button type="reset">Reset (button)</button>
667
+ </div>
668
+ <div>
669
+ <button type="button">Button (button)</button>
670
+ </div>
671
+ <div>
672
+ <button type="submit">Submit (button)</button>
673
+ </div>
674
+ <div>
675
+ <button class="bf-btn bf-btn--primary" type="submit">
676
+ Primary submit (button)
677
+ </button>
678
+ </div>
679
+ </fieldset>
680
+
681
+ <h3>Buttons (.bf-disabled)</h3>
682
+ <fieldset>
683
+ <div>
684
+ <button type="reset" class="bf-disabled">Reset (button)</button>
685
+ </div>
686
+ <div>
687
+ <button type="button" class="bf-disabled">
688
+ Button (button)
689
+ </button>
690
+ </div>
691
+ <div>
692
+ <button type="submit" class="bf-disabled">
693
+ Submit (button)
694
+ </button>
695
+ </div>
696
+ <div>
697
+ <button class="bf-btn bf-btn--primary bf-disabled" type="submit">
698
+ Primary submit (button)
699
+ </button>
700
+ </div>
701
+ </fieldset>
702
+ </div>
703
+ </div>
704
+ <div class="bf-row">
705
+ <div class="bf-col-12">
706
+ <h2 id="tables" class="h2--section">Tables</h2>
707
+ </div>
708
+ </div>
709
+ <div class="bf-row">
710
+ <div class="bf-col-6">
711
+ <h3>Unstyled tabular data</h3>
712
+ <table>
713
+ <caption>
714
+ Jimi Hendrix - albums
715
+ </caption>
716
+ <thead>
717
+ <tr>
718
+ <th>Album</th>
719
+ <th>Year</th>
720
+ <th>Price</th>
721
+ </tr>
722
+ </thead>
723
+ <tbody>
724
+ <tr>
725
+ <td>Are You Experienced</td>
726
+ <td>1967</td>
727
+ <td>$1.00</td>
728
+ </tr>
729
+ <tr>
730
+ <td>Axis: Bold as Love</td>
731
+ <td>1967</td>
732
+ <td>$12.00</td>
733
+ </tr>
734
+ <tr>
735
+ <td>Electric Ladyland</td>
736
+ <td>1968</td>
737
+ <td>$1.00</td>
738
+ </tr>
739
+ <tr>
740
+ <td>Band of Gypsys</td>
741
+ <td>1970</td>
742
+ <td>$12.00</td>
743
+ </tr>
744
+ </tbody>
745
+ <tfoot>
746
+ <tr>
747
+ <th>Album</th>
748
+ <th>Year</th>
749
+ <th>Price</th>
750
+ </tr>
751
+ </tfoot>
752
+ </table>
753
+ </div>
754
+
755
+ <div class="bf-col-6">
756
+ <h3>Styled tabular data</h3>
757
+ <table class="bf-table">
758
+ <caption>
759
+ Jimi Hendrix - albums
760
+ </caption>
761
+ <thead>
762
+ <tr>
763
+ <th>Album</th>
764
+ <th>Year</th>
765
+ <th>Price</th>
766
+ </tr>
767
+ </thead>
768
+ <tbody>
769
+ <tr>
770
+ <td>Are You Experienced</td>
771
+ <td>1967</td>
772
+ <td>$1.00</td>
773
+ </tr>
774
+ <tr>
775
+ <td>Axis: Bold as Love</td>
776
+ <td>1967</td>
777
+ <td>$12.00</td>
778
+ </tr>
779
+ <tr>
780
+ <td>Electric Ladyland</td>
781
+ <td>1968</td>
782
+ <td>$1.00</td>
783
+ </tr>
784
+ <tr>
785
+ <td>Band of Gypsys</td>
786
+ <td>1970</td>
787
+ <td>$12.00</td>
788
+ </tr>
789
+ </tbody>
790
+ <tfoot>
791
+ <tr>
792
+ <th>Album</th>
793
+ <th>Year</th>
794
+ <th>Price</th>
795
+ </tr>
796
+ </tfoot>
797
+ </table>
798
+ </div>
799
+ </div>
800
+ <div class="bf-row">
801
+ <div class="bf-col-12">
802
+ <h3>Styled responsive tabular data</h3>
803
+ <div class="bf-table-responsive">
804
+ <table class="bf-table">
805
+ <caption>
806
+ Caption goes here
807
+ </caption>
808
+ <thead>
809
+ <tr>
810
+ <th>Header 1</th>
811
+ <th>Header 2</th>
812
+ <th>Header 3</th>
813
+ <th>Header 4</th>
814
+ <th>Header 5</th>
815
+ <th>Header 6</th>
816
+ <th>Header 7</th>
817
+ <th>Header 8</th>
818
+ </tr>
819
+ </thead>
820
+ <tr>
821
+ <td>row1_cell1</td>
822
+ <td>row1_cell2</td>
823
+ <td>row1_cell3</td>
824
+ <td>row1_cell4</td>
825
+ <td>row1_cell5</td>
826
+ <td>row1_cell6</td>
827
+ <td>row1_cell7</td>
828
+ <td>row1_cell8</td>
829
+ </tr>
830
+ <tr>
831
+ <td>row2_cell1</td>
832
+ <td>row2_cell2</td>
833
+ <td>row2_cell3</td>
834
+ <td>row2_cell4</td>
835
+ <td>row2_cell5</td>
836
+ <td>row2_cell6</td>
837
+ <td>row2_cell7</td>
838
+ <td>row2_cell8</td>
839
+ </tr>
840
+ <tr>
841
+ <td>row3_cell1</td>
842
+ <td>row3_cell2</td>
843
+ <td>row3_cell3</td>
844
+ <td>row3_cell4</td>
845
+ <td>row3_cell5</td>
846
+ <td>row3_cell6</td>
847
+ <td>row3_cell7</td>
848
+ <td>row3_cell8</td>
849
+ </tr>
850
+ <tr>
851
+ <td>row4_cell1</td>
852
+ <td>row4_cell2</td>
853
+ <td>row4_cell3</td>
854
+ <td>row4_cell4</td>
855
+ <td>row4_cell5</td>
856
+ <td>row4_cell6</td>
857
+ <td>row4_cell7</td>
858
+ <td>row4_cell8</td>
859
+ </tr>
860
+ <tr>
861
+ <td>row5_cell1</td>
862
+ <td>row5_cell2</td>
863
+ <td>row5_cell3</td>
864
+ <td>row5_cell4</td>
865
+ <td>row5_cell5</td>
866
+ <td>row5_cell6</td>
867
+ <td>row5_cell7</td>
868
+ <td>row5_cell8</td>
869
+ </tr>
870
+ <tfoot>
871
+ <tr>
872
+ <th>Header 1</th>
873
+ <th>Header 2</th>
874
+ <th>Header 3</th>
875
+ <th>Header 4</th>
876
+ <th>Header 5</th>
877
+ <th>Header 6</th>
878
+ <th>Header 7</th>
879
+ <th>Header 8</th>
880
+ </tr>
881
+ </tfoot>
882
+ </table>
883
+ </div>
884
+ </div>
885
+ </div>
886
+
887
+ <div class="bf-row">
888
+ <div class="bf-col-4 bf-m-b-3">
889
+ <h3>Styled tabular data + zebra striping</h3>
890
+ <table class="bf-table bf-table--zebra">
891
+ <caption>
892
+ Jimi Hendrix - albums
893
+ </caption>
894
+ <thead>
895
+ <tr>
896
+ <th>Album</th>
897
+ <th>Year</th>
898
+ <th>Price</th>
899
+ </tr>
900
+ </thead>
901
+ <tbody>
902
+ <tr>
903
+ <td>Are You Experienced</td>
904
+ <td>1967</td>
905
+ <td>$1.00</td>
906
+ </tr>
907
+ <tr>
908
+ <td>Axis: Bold as Love</td>
909
+ <td>1967</td>
910
+ <td>$12.00</td>
911
+ </tr>
912
+ <tr>
913
+ <td>Electric Ladyland</td>
914
+ <td>1968</td>
915
+ <td>$1.00</td>
916
+ </tr>
917
+ <tr>
918
+ <td>Band of Gypsys</td>
919
+ <td>1970</td>
920
+ <td>$12.00</td>
921
+ </tr>
922
+ </tbody>
923
+ <tfoot>
924
+ <tr>
925
+ <th>Album</th>
926
+ <th>Year</th>
927
+ <th>Price</th>
928
+ </tr>
929
+ </tfoot>
930
+ </table>
931
+ </div>
932
+
933
+ <div class="bf-col-8">
934
+ <h3>Styled responsive tabular data + zebra striping</h3>
935
+ <div class="bf-table-responsive bf-table-responsive--zebra">
936
+ <table class="bf-table">
937
+ <caption>
938
+ Caption goes here
939
+ </caption>
940
+ <thead>
941
+ <tr>
942
+ <th>Header 1</th>
943
+ <th>Header 2</th>
944
+ <th>Header 3</th>
945
+ <th>Header 4</th>
946
+ <th>Header 5</th>
947
+ <th>Header 6</th>
948
+ <th>Header 7</th>
949
+ <th>Header 8</th>
950
+ </tr>
951
+ </thead>
952
+ <tr>
953
+ <td>row1_cell1</td>
954
+ <td>row1_cell2</td>
955
+ <td>row1_cell3</td>
956
+ <td>row1_cell4</td>
957
+ <td>row1_cell5</td>
958
+ <td>row1_cell6</td>
959
+ <td>row1_cell7</td>
960
+ <td>row1_cell8</td>
961
+ </tr>
962
+ <tr>
963
+ <td>row2_cell1</td>
964
+ <td>row2_cell2</td>
965
+ <td>row2_cell3</td>
966
+ <td>row2_cell4</td>
967
+ <td>row2_cell5</td>
968
+ <td>row2_cell6</td>
969
+ <td>row2_cell7</td>
970
+ <td>row2_cell8</td>
971
+ </tr>
972
+ <tr>
973
+ <td>row3_cell1</td>
974
+ <td>row3_cell2</td>
975
+ <td>row3_cell3</td>
976
+ <td>row3_cell4</td>
977
+ <td>row3_cell5</td>
978
+ <td>row3_cell6</td>
979
+ <td>row3_cell7</td>
980
+ <td>row3_cell8</td>
981
+ </tr>
982
+ <tr>
983
+ <td>row4_cell1</td>
984
+ <td>row4_cell2</td>
985
+ <td>row4_cell3</td>
986
+ <td>row4_cell4</td>
987
+ <td>row4_cell5</td>
988
+ <td>row4_cell6</td>
989
+ <td>row4_cell7</td>
990
+ <td>row4_cell8</td>
991
+ </tr>
992
+ <tr>
993
+ <td>row5_cell1</td>
994
+ <td>row5_cell2</td>
995
+ <td>row5_cell3</td>
996
+ <td>row5_cell4</td>
997
+ <td>row5_cell5</td>
998
+ <td>row5_cell6</td>
999
+ <td>row5_cell7</td>
1000
+ <td>row5_cell8</td>
1001
+ </tr>
1002
+ <tfoot>
1003
+ <tr>
1004
+ <th>Header 1</th>
1005
+ <th>Header 2</th>
1006
+ <th>Header 3</th>
1007
+ <th>Header 4</th>
1008
+ <th>Header 5</th>
1009
+ <th>Header 6</th>
1010
+ <th>Header 7</th>
1011
+ <th>Header 8</th>
1012
+ </tr>
1013
+ </tfoot>
1014
+ </table>
1015
+ </div>
1016
+ </div>
1017
+ </div>
1018
+ <div class="bf-row">
1019
+ <div class="bf-col-12">
1020
+ <h2 id="grid-system" class="h2--section">Grid System</h2>
1021
+ <p>
1022
+ 12 columns fluid Grid System with containers, rows and columns.<br />
1023
+ At 575, 768 or 991 pixels the columns could be 100% of the row's
1024
+ width.<br />
1025
+ The default container <code>.bf-container</code> has a
1026
+ <code>max-width</code> set to 1140 pixels by default.<br />
1027
+ The custom container <code>.bf-container--fluid</code> doesn't
1028
+ have a <code>max-width</code>.
1029
+ </p>
1030
+ <p class="bf-m-b-0">
1031
+ This is a default container with a
1032
+ <code>bf-container--break-md</code> class and a set a columns
1033
+ combinations.
1034
+ </p>
1035
+ </div>
1036
+ </div>
1037
+
1038
+ <div class="grid bf-m-b-4">
1039
+ <div class="bf-row">
1040
+ <div class="bf-col-12">
1041
+ <div class="col-wrapper">12 col</div>
1042
+ </div>
1043
+ </div>
1044
+
1045
+ <div class="bf-row">
1046
+ <div class="bf-col-11">
1047
+ <div class="col-wrapper">11 col</div>
1048
+ </div>
1049
+
1050
+ <div class="bf-col-1">
1051
+ <div class="col-wrapper">1 col</div>
1052
+ </div>
1053
+ </div>
1054
+
1055
+ <div class="bf-row">
1056
+ <div class="bf-col-10">
1057
+ <div class="col-wrapper">10 col</div>
1058
+ </div>
1059
+ <div class="bf-col-2">
1060
+ <div class="col-wrapper">2 col</div>
1061
+ </div>
1062
+ </div>
1063
+
1064
+ <div class="bf-row">
1065
+ <div class="bf-col-9">
1066
+ <div class="col-wrapper">9 col</div>
1067
+ </div>
1068
+ <div class="bf-col-3">
1069
+ <div class="col-wrapper">3 col</div>
1070
+ </div>
1071
+ </div>
1072
+
1073
+ <div class="bf-row">
1074
+ <div class="bf-col-8">
1075
+ <div class="col-wrapper">8 col</div>
1076
+ </div>
1077
+ <div class="bf-col-4">
1078
+ <div class="col-wrapper">4 col</div>
1079
+ </div>
1080
+ </div>
1081
+ <div class="bf-row">
1082
+ <div class="bf-col-7">
1083
+ <div class="col-wrapper">7 col</div>
1084
+ </div>
1085
+ <div class="bf-col-5">
1086
+ <div class="col-wrapper">5 col</div>
1087
+ </div>
1088
+ </div>
1089
+
1090
+ <div class="bf-row">
1091
+ <div class="bf-col-6">
1092
+ <div class="col-wrapper">6 col</div>
1093
+ </div>
1094
+ <div class="bf-col-6">
1095
+ <div class="col-wrapper">6 col</div>
1096
+ </div>
1097
+ </div>
1098
+
1099
+ <div class="bf-row">
1100
+ <div class="bf-col-5">
1101
+ <div class="col-wrapper">5 col</div>
1102
+ </div>
1103
+
1104
+ <div class="bf-col-7">
1105
+ <div class="col-wrapper">7 col</div>
1106
+ </div>
1107
+ </div>
1108
+
1109
+ <div class="bf-row">
1110
+ <div class="bf-col-4">
1111
+ <div class="col-wrapper">4 col</div>
1112
+ </div>
1113
+
1114
+ <div class="bf-col-4">
1115
+ <div class="col-wrapper">4 col</div>
1116
+ </div>
1117
+
1118
+ <div class="bf-col-4">
1119
+ <div class="col-wrapper">4 col</div>
1120
+ </div>
1121
+ </div>
1122
+
1123
+ <div class="bf-row">
1124
+ <div class="bf-col-3">
1125
+ <div class="col-wrapper">3 col</div>
1126
+ </div>
1127
+ <div class="bf-col-3">
1128
+ <div class="col-wrapper">3 col</div>
1129
+ </div>
1130
+
1131
+ <div class="bf-col-3">
1132
+ <div class="col-wrapper">3 col</div>
1133
+ </div>
1134
+
1135
+ <div class="bf-col-3">
1136
+ <div class="col-wrapper">3 col</div>
1137
+ </div>
1138
+ </div>
1139
+
1140
+ <div class="bf-row">
1141
+ <div class="bf-col-2">
1142
+ <div class="col-wrapper">2 col</div>
1143
+ </div>
1144
+
1145
+ <div class="bf-col-2">
1146
+ <div class="col-wrapper">2 col</div>
1147
+ </div>
1148
+
1149
+ <div class="bf-col-2">
1150
+ <div class="col-wrapper">2 col</div>
1151
+ </div>
1152
+
1153
+ <div class="bf-col-2">
1154
+ <div class="col-wrapper">2 col</div>
1155
+ </div>
1156
+
1157
+ <div class="bf-col-2">
1158
+ <div class="col-wrapper">2 col</div>
1159
+ </div>
1160
+ <div class="bf-col-2">
1161
+ <div class="col-wrapper">2 col</div>
1162
+ </div>
1163
+ </div>
1164
+
1165
+ <p>No gutters between columns (<code>.bf-no-gutters</code>)</p>
1166
+ <div class="bf-row bf-no-gutters">
1167
+ <div class="bf-col-2 bf-no-gutters">
1168
+ <div class="col-wrapper">2 col</div>
1169
+ </div>
1170
+
1171
+ <div class="bf-col-2 bf-no-gutters">
1172
+ <div class="col-wrapper">2 col</div>
1173
+ </div>
1174
+
1175
+ <div class="bf-col-2 bf-no-gutters">
1176
+ <div class="col-wrapper">2 col</div>
1177
+ </div>
1178
+
1179
+ <div class="bf-col-2 bf-no-gutters">
1180
+ <div class="col-wrapper">2 col</div>
1181
+ </div>
1182
+
1183
+ <div class="bf-col-2 bf-no-gutters">
1184
+ <div class="col-wrapper">2 col</div>
1185
+ </div>
1186
+ <div class="bf-col-2 bf-no-gutters">
1187
+ <div class="col-wrapper">2 col</div>
1188
+ </div>
1189
+ </div>
1190
+ </div>
1191
+ </main>
1192
+
1193
+ <footer>
1194
+ <div class="bf-row bf-m-b-4">
1195
+ <div class="bf-col-12 bf-t-center">
1196
+ <div class="bf-m-b-4 bf-p-t-3">
1197
+ <h2>Fork, download or contribute</h2>
1198
+ <code class="bf-display-block bf-m-b-3">
1199
+ $ git clone https://github.com/marcop135/bullframe.css.git
1200
+ </code>
1201
+ <a class="bf-btn bf-btn--primary" href="https://github.com/marcop135/bullframe.css/archive/master.zip"
1202
+ role="button">Download</a>
1203
+ <a class="bf-btn" href="https://github.com/marcop135/bullframe.css" role="button">GitHub</a>
1204
+ </div>
1205
+
1206
+ <div class="bf-t-center">
1207
+ <a class="bf-display-inline-block" href="#top">Back to top</a>
1208
+ </div>
1209
+ </div>
1210
+ </div>
1211
+ </footer>
1212
+ </div>
1213
+ </body>
1214
+
1224
1215
  </html>