bullframe.css 4.2.2 → 5.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.
- package/.browserslistrc +2 -4
- package/.editorconfig +8 -4
- package/.prettierignore +1 -0
- package/.stylelintignore +3 -0
- package/.stylelintrc.json +5 -2
- package/CHANGELOG.md +18 -1
- package/README.md +369 -327
- package/dist/css/bullframe-classless-dark-prefers.css +378 -269
- package/dist/css/bullframe-classless-dark-prefers.css.map +1 -0
- package/dist/css/bullframe-classless-dark-prefers.min.css +3 -3
- package/dist/css/bullframe-classless-dark-prefers.min.css.map +1 -1
- package/dist/css/bullframe-classless-dark.css +384 -253
- package/dist/css/bullframe-classless-dark.css.map +1 -0
- package/dist/css/bullframe-classless-dark.min.css +3 -3
- package/dist/css/bullframe-classless-dark.min.css.map +1 -1
- package/dist/css/bullframe-classless-system-default.css +378 -269
- package/dist/css/bullframe-classless-system-default.css.map +1 -0
- package/dist/css/bullframe-classless-system-default.min.css +3 -3
- package/dist/css/bullframe-classless-system-default.min.css.map +1 -1
- package/dist/css/bullframe-classless.css +343 -229
- package/dist/css/bullframe-classless.css.map +1 -0
- package/dist/css/bullframe-classless.min.css +3 -2
- package/dist/css/bullframe-classless.min.css.map +1 -1
- package/dist/css/bullframe-dark-prefers.css +399 -464
- package/dist/css/bullframe-dark-prefers.css.map +1 -0
- package/dist/css/bullframe-dark-prefers.min.css +3 -2
- package/dist/css/bullframe-dark-prefers.min.css.map +1 -1
- package/dist/css/bullframe-dark.css +401 -375
- package/dist/css/bullframe-dark.css.map +1 -0
- package/dist/css/bullframe-dark.min.css +3 -2
- package/dist/css/bullframe-dark.min.css.map +1 -1
- package/dist/css/bullframe-system-default.css +396 -391
- package/dist/css/bullframe-system-default.css.map +1 -0
- package/dist/css/bullframe-system-default.min.css +3 -2
- package/dist/css/bullframe-system-default.min.css.map +1 -1
- package/dist/css/bullframe-utilities.css +69 -109
- package/dist/css/bullframe-utilities.css.map +1 -0
- package/dist/css/bullframe-utilities.min.css +2 -1
- package/dist/css/bullframe-utilities.min.css.map +1 -1
- package/dist/css/bullframe.css +370 -350
- package/dist/css/bullframe.css.map +1 -0
- package/dist/css/bullframe.min.css +3 -1
- package/dist/css/bullframe.min.css.map +1 -1
- package/dist/docs/demo/css/style.css +131 -0
- package/{docs/test-page → dist/docs/demo}/index.html +166 -358
- package/dist/docs/github-readme/bf-logo-full-dark.png +0 -0
- package/package.json +25 -27
- package/prettier.config.js +26 -0
- package/src/docs/demo/css/style.css +131 -0
- package/src/docs/demo/icons/android-chrome-192x192.png +0 -0
- package/src/docs/demo/icons/android-chrome-384x384.png +0 -0
- package/src/docs/demo/icons/apple-touch-icon.png +0 -0
- package/src/docs/demo/icons/favicon-16x16.png +0 -0
- package/src/docs/demo/icons/favicon-32x32.png +0 -0
- package/src/docs/demo/icons/favicon.ico +0 -0
- package/src/docs/demo/icons/mstile-150x150.png +0 -0
- package/src/docs/demo/icons/safari-pinned-tab.svg +28 -0
- package/src/docs/demo/images/logo.png +0 -0
- package/src/docs/demo/images/placeholder-img-130x140.jpg +0 -0
- package/src/docs/demo/images/placeholder-img-16x16.jpg +0 -0
- package/src/docs/demo/images/placeholder-img-800x400.jpg +0 -0
- package/src/docs/demo/images/video-poster.png +0 -0
- package/src/docs/demo/index.html +1152 -0
- package/src/docs/github-readme/bf-logo-full-dark.png +0 -0
- package/src/docs/github-readme/bf-logo-full-light.png +0 -0
- package/src/scss/bullframe-classless-dark-prefers.scss +2 -5
- package/src/scss/bullframe-classless-dark.scss +2 -5
- package/src/scss/bullframe-classless-system-default.scss +2 -5
- package/src/scss/bullframe-classless.scss +49 -43
- package/src/scss/bullframe-dark-prefers.scss +2 -4
- package/src/scss/bullframe-dark.scss +2 -4
- package/src/scss/bullframe-system-default.scss +2 -4
- package/src/scss/bullframe-utilities.scss +21 -61
- package/src/scss/bullframe.scss +49 -121
- package/src/scss/custom/_author-styles.scss +5 -0
- package/src/scss/forms/_forms-normalization.scss +68 -58
- package/src/scss/forms/_forms-styling-radio-checkbox.scss +64 -66
- package/src/scss/forms/_forms-styling-range.scss +88 -74
- package/src/scss/forms/_forms-styling-select.scss +18 -16
- package/src/scss/forms/_forms-styling.scss +38 -26
- package/src/scss/miscellaneous/_misc-accessibility.scss +10 -16
- package/src/scss/miscellaneous/_misc-anchors.scss +15 -13
- package/src/scss/miscellaneous/_misc-embedded-content.scss +14 -21
- package/src/scss/miscellaneous/_misc-focus.scss +0 -21
- package/src/scss/miscellaneous/_misc-interactive.scss +48 -0
- package/src/scss/miscellaneous/_misc-lists.scss +9 -5
- package/src/scss/miscellaneous/_misc-scrolling.scss +5 -0
- package/src/scss/miscellaneous/_misc-shame.scss +6 -0
- package/src/scss/miscellaneous/_misc-tables.scss +11 -5
- package/src/scss/mixins/_mixin-dark-prefers.scss +414 -0
- package/src/scss/mixins/_mixin-dark.scss +396 -0
- package/src/scss/mixins/_mixin-grid-flex.scss +0 -3
- package/src/scss/mixins/_mixin-layout.scss +1 -1
- package/src/scss/mixins/_mixin-texts.scss +2 -3
- package/src/scss/typography/_typography-blockquotes.scss +10 -5
- package/src/scss/typography/_typography-headings.scss +9 -8
- package/src/scss/typography/_typography-html-body.scss +17 -14
- package/src/scss/typography/_typography-misc.scss +19 -22
- package/src/scss/typography/_typography-monospaced-elements.scss +21 -12
- package/src/scss/utilities/_utility-buttons.scss +20 -18
- package/src/scss/utilities/_utility-debugging.scss +2 -88
- package/src/scss/utilities/_utility-embeds.scss +1 -1
- package/src/scss/utilities/_utility-filters.scss +0 -3
- package/src/scss/utilities/_utility-form-states.scss +30 -21
- package/src/scss/utilities/_utility-global-dark-classless.scss +3 -157
- package/src/scss/utilities/_utility-global-dark-prefers-classless.scss +3 -3
- package/src/scss/utilities/_utility-global-dark-prefers.scss +3 -3
- package/src/scss/utilities/_utility-global-dark-scrollbars.scss +11 -6
- package/src/scss/utilities/_utility-global-dark.scss +4 -213
- package/src/scss/utilities/_utility-global-system-default-classless.scss +3 -3
- package/src/scss/utilities/_utility-global-system-default.scss +3 -3
- package/src/scss/utilities/_utility-grid-system.scss +51 -115
- package/src/scss/utilities/_utility-layout.scss +7 -15
- package/src/scss/utilities/_utility-print.scss +5 -5
- package/src/scss/utilities/_utility-spacing.scss +42 -40
- package/src/scss/utilities/_utility-tables.scss +12 -18
- package/src/scss/utilities/_utility-texts.scss +48 -22
- package/src/scss/utilities/_utility-z-index.scss +1 -1
- package/src/scss/variables/_variables-breakpoints.scss +1 -0
- package/src/scss/variables/_variables-colors.scss +8 -5
- package/src/scss/variables/_variables-spacing.scss +3 -5
- package/src/scss/variables/_variables-texts.scss +5 -9
- package/vite.config.js +116 -0
- package/.nvmrc +0 -1
- package/.prettierrc +0 -19
- package/gulpfile.js +0 -67
- package/src/scss/miscellaneous/_misc-author-styles-in-css.scss +0 -76
- /package/{docs/test-page/assets → dist/docs/demo}/icons/android-chrome-192x192.png +0 -0
- /package/{docs/test-page/assets → dist/docs/demo}/icons/android-chrome-384x384.png +0 -0
- /package/{docs/test-page/assets → dist/docs/demo}/icons/apple-touch-icon.png +0 -0
- /package/{docs/test-page/assets → dist/docs/demo}/icons/favicon-16x16.png +0 -0
- /package/{docs/test-page/assets → dist/docs/demo}/icons/favicon-32x32.png +0 -0
- /package/{docs/test-page/assets → dist/docs/demo}/icons/favicon.ico +0 -0
- /package/{docs/test-page/assets → dist/docs/demo}/icons/mstile-150x150.png +0 -0
- /package/{docs/test-page/assets → dist/docs/demo}/icons/safari-pinned-tab.svg +0 -0
- /package/{docs/test-page/assets → dist/docs/demo}/images/logo.png +0 -0
- /package/{docs/test-page/assets → dist/docs/demo}/images/placeholder-img-130x140.jpg +0 -0
- /package/{docs/test-page/assets → dist/docs/demo}/images/placeholder-img-16x16.jpg +0 -0
- /package/{docs/test-page/assets → dist/docs/demo}/images/placeholder-img-800x400.jpg +0 -0
- /package/{docs/test-page/assets → dist/docs/demo}/images/video-poster.png +0 -0
- /package/{docs/assets/images/branding/logo-full.png → dist/docs/github-readme/bf-logo-full-light.png} +0 -0
|
@@ -1,192 +1,51 @@
|
|
|
1
|
-
<!
|
|
2
|
-
<html class="
|
|
1
|
+
<!doctype html>
|
|
2
|
+
<html class="demo" id="top" lang="en">
|
|
3
3
|
|
|
4
4
|
<head>
|
|
5
|
-
<meta charset="UTF-8"
|
|
6
|
-
<meta
|
|
7
|
-
<
|
|
8
|
-
|
|
9
|
-
<title>Test page — bullframe.css Sass (SCSS) framework</title>
|
|
5
|
+
<meta charset="UTF-8">
|
|
6
|
+
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
|
7
|
+
<title>Demo | Bullframe CSS</title>
|
|
10
8
|
<meta name="description"
|
|
11
|
-
content="
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
<link rel="apple-touch-icon" sizes="180x180" href="
|
|
15
|
-
<link rel="icon"
|
|
16
|
-
|
|
17
|
-
<link rel="
|
|
18
|
-
|
|
19
|
-
<
|
|
20
|
-
<meta name="theme-color" content="#f95c1f" />
|
|
21
|
-
|
|
22
|
-
<link rel="stylesheet" href="./css/bullframe-system-default.min.css?v4.2.2" />
|
|
23
|
-
|
|
24
|
-
<!-- custom styles -->
|
|
25
|
-
<style>
|
|
26
|
-
.test .bf-row {
|
|
27
|
-
margin-bottom: 20px;
|
|
28
|
-
margin-bottom: 2rem;
|
|
29
|
-
}
|
|
30
|
-
|
|
31
|
-
.test [class^='bf-col'] {
|
|
32
|
-
margin-bottom: 10px;
|
|
33
|
-
margin-bottom: 1rem;
|
|
34
|
-
}
|
|
35
|
-
|
|
36
|
-
@media (max-width: 575px) {
|
|
37
|
-
.test header {
|
|
38
|
-
margin-bottom: 1rem;
|
|
39
|
-
}
|
|
40
|
-
}
|
|
41
|
-
|
|
42
|
-
.test header h1 {
|
|
43
|
-
margin-top: 10px;
|
|
44
|
-
margin-top: 1rem;
|
|
45
|
-
margin-bottom: 0;
|
|
46
|
-
}
|
|
47
|
-
|
|
48
|
-
.test header h1 span {
|
|
49
|
-
color: #f95c1f;
|
|
50
|
-
}
|
|
51
|
-
|
|
52
|
-
@media (min-width: 600px) {
|
|
53
|
-
.test header h1 {
|
|
54
|
-
font-size: 55px;
|
|
55
|
-
font-size: 5.5rem;
|
|
56
|
-
}
|
|
57
|
-
}
|
|
58
|
-
|
|
59
|
-
@media (min-width: 1000px) {
|
|
60
|
-
.test header h1 {
|
|
61
|
-
font-size: 70px;
|
|
62
|
-
font-size: 7rem;
|
|
63
|
-
}
|
|
64
|
-
}
|
|
65
|
-
|
|
66
|
-
.test .description {
|
|
67
|
-
max-width: 800px;
|
|
68
|
-
max-width: 80rem;
|
|
69
|
-
margin-left: auto;
|
|
70
|
-
margin-right: auto;
|
|
71
|
-
}
|
|
72
|
-
|
|
73
|
-
.test header a {
|
|
74
|
-
margin-right: 10px;
|
|
75
|
-
margin-right: 1rem;
|
|
76
|
-
}
|
|
77
|
-
|
|
78
|
-
@media (min-width: 600px) {
|
|
79
|
-
.test .h2--section {
|
|
80
|
-
font-size: 40px;
|
|
81
|
-
font-size: 4rem;
|
|
82
|
-
}
|
|
83
|
-
}
|
|
84
|
-
|
|
85
|
-
.test .h2--section {
|
|
86
|
-
padding-top: 20px;
|
|
87
|
-
padding-bottom: 2rem;
|
|
88
|
-
text-transform: uppercase;
|
|
89
|
-
}
|
|
90
|
-
|
|
91
|
-
.test legend {
|
|
92
|
-
padding-bottom: 10px;
|
|
93
|
-
padding-bottom: 1rem;
|
|
94
|
-
}
|
|
95
|
-
|
|
96
|
-
.test button,
|
|
97
|
-
.test .bf-btn,
|
|
98
|
-
.test .input-image,
|
|
99
|
-
.test input,
|
|
100
|
-
.test select,
|
|
101
|
-
.test textarea {
|
|
102
|
-
margin-bottom: 20px;
|
|
103
|
-
margin-bottom: 2rem;
|
|
104
|
-
}
|
|
105
|
-
|
|
106
|
-
.test [type='image'],
|
|
107
|
-
.test [type='checkbox'],
|
|
108
|
-
.test [type='radio'] {
|
|
109
|
-
margin-bottom: 0;
|
|
110
|
-
}
|
|
111
|
-
|
|
112
|
-
.test .grid .col-wrapper {
|
|
113
|
-
background-color: #888;
|
|
114
|
-
height: 60px;
|
|
115
|
-
height: 6rem;
|
|
116
|
-
line-height: 60px;
|
|
117
|
-
line-height: 6rem;
|
|
118
|
-
overflow-y: hidden;
|
|
119
|
-
color: #fff;
|
|
120
|
-
font-size: 80%;
|
|
121
|
-
text-align: center;
|
|
122
|
-
-webkit-border-radius: 3px;
|
|
123
|
-
border-radius: 3px;
|
|
124
|
-
font-weight: 700;
|
|
125
|
-
}
|
|
126
|
-
|
|
127
|
-
.test .grid .bf-row:nth-child(odd) .col-wrapper {
|
|
128
|
-
background-color: #ccc;
|
|
129
|
-
color: #000;
|
|
130
|
-
}
|
|
131
|
-
|
|
132
|
-
@media (max-width: 767px) {
|
|
133
|
-
.test .grid .bf-row {
|
|
134
|
-
margin-bottom: 0;
|
|
135
|
-
}
|
|
136
|
-
|
|
137
|
-
.test .grid [class*='bf-col-'] {
|
|
138
|
-
margin-bottom: 20px;
|
|
139
|
-
margin-bottom: 2rem;
|
|
140
|
-
}
|
|
141
|
-
}
|
|
142
|
-
|
|
143
|
-
.test .back-to-top {
|
|
144
|
-
text-align: center;
|
|
145
|
-
display: block;
|
|
146
|
-
margin: 60px 0 120px 0;
|
|
147
|
-
margin: 6rem 0 12rem 0;
|
|
148
|
-
}
|
|
149
|
-
|
|
150
|
-
.test .back-to-top a i {
|
|
151
|
-
vertical-align: middle;
|
|
152
|
-
font-style: normal;
|
|
153
|
-
}
|
|
154
|
-
</style>
|
|
9
|
+
content="Bullframe is a solid Sass-based CSS framework for responsive, cross-browser UIs. Fast, semantic, themable, and classless-friendly.">
|
|
10
|
+
<link rel="icon" type="image/png" sizes="16x16" href="/docs/demo/icons/favicon-16x16.png">
|
|
11
|
+
<link rel="icon" type="image/png" sizes="32x32" href="/docs/demo/icons/favicon-32x32.png">
|
|
12
|
+
<link rel="apple-touch-icon" sizes="180x180" href="/docs/demo/icons/apple-touch-icon.png">
|
|
13
|
+
<link rel="shortcut icon" href="/docs/demo/icons/favicon.ico">
|
|
14
|
+
<!-- Bullframe CSS, system-default build -->
|
|
15
|
+
<link rel="stylesheet" href="../../css/bullframe-system-default.min.css?v5.0.0">
|
|
16
|
+
<!-- These styles are added just for a nicer demo -->
|
|
17
|
+
<link rel="stylesheet" href="/docs/demo/css/style.css">
|
|
155
18
|
</head>
|
|
156
19
|
|
|
157
20
|
<body class="bf-responsive-typography bf-reduced-motion">
|
|
158
21
|
<a class="bf-sr-only focusable" href="#main-content">Skip to main content</a>
|
|
159
22
|
<div class="bf-container bf-container--break-md">
|
|
160
23
|
<header class="bf-t-center bf-m-b-3">
|
|
161
|
-
<h1>
|
|
24
|
+
<h1 class="bf-t-transform-uppercase"> Bullframe <span>CSS</span></h1>
|
|
162
25
|
<p class="bf-lead">Solid, fluid, cross-browser Sass (SCSS) framework</p>
|
|
163
|
-
<a class="bf-btn bf-btn--primary" href="https://github.com/marcop135/bullframe.css
|
|
164
|
-
role="button">
|
|
165
|
-
<a class="bf-btn" href="https://github.com/marcop135/bullframe.css"
|
|
26
|
+
<a class="bf-btn bf-btn--primary btn-github" href="https://github.com/marcop135/bullframe.css"
|
|
27
|
+
role="button">GitHub</a>
|
|
28
|
+
<a class="bf-btn btn-github" href="https://github.com/marcop135/bullframe.css/blob/master/README.md"
|
|
29
|
+
role="button">Docs</a>
|
|
30
|
+
<hr>
|
|
166
31
|
<p class="description">
|
|
167
|
-
This is a quick look at a wide range of HTML elements, divided into
|
|
168
|
-
|
|
169
|
-
purposes only.
|
|
32
|
+
This is a quick look at a wide range of HTML elements, divided into several sections and
|
|
33
|
+
rendered into unusual combinations, for testing purposes only.
|
|
170
34
|
</p>
|
|
171
|
-
|
|
172
|
-
<hr />
|
|
173
|
-
|
|
35
|
+
<hr>
|
|
174
36
|
<p class="bf-t-center">
|
|
175
|
-
CSS build in use
|
|
37
|
+
<b>CSS build in use:</b><br>
|
|
176
38
|
<mark><code>bullframe-system-default.min.css</code></mark>
|
|
177
39
|
</p>
|
|
178
40
|
<p class="bf-t-center">
|
|
179
|
-
<code><body></code> classes
|
|
180
|
-
<code>.bf-responsive-typography</code><br
|
|
181
|
-
<code>.bf-reduced-motion</code>
|
|
41
|
+
<b><code><body></code> classes:</b><br>
|
|
42
|
+
<mark><code>.bf-responsive-typography</code></mark><br>
|
|
43
|
+
<mark><code>.bf-reduced-motion</code></mark>
|
|
182
44
|
</p>
|
|
183
|
-
|
|
184
|
-
<hr />
|
|
45
|
+
<hr>
|
|
185
46
|
</header>
|
|
186
|
-
|
|
187
47
|
<main id="main-content">
|
|
188
48
|
<h2 id="texts" class="h2--section">Text elements</h2>
|
|
189
|
-
|
|
190
49
|
<div class="bf-row">
|
|
191
50
|
<div class="bf-col-6">
|
|
192
51
|
<div class="bf-m-b-4">
|
|
@@ -198,7 +57,6 @@
|
|
|
198
57
|
<h5>Heading 5 <a href="#">with link</a></h5>
|
|
199
58
|
<h6>Heading 6 <a href="#">with link</a></h6>
|
|
200
59
|
</div>
|
|
201
|
-
|
|
202
60
|
<h3>Paragraphs with headings utilities</h3>
|
|
203
61
|
<p class="bf-h1">Heading 1</p>
|
|
204
62
|
<p class="bf-h2">Heading 2</p>
|
|
@@ -210,34 +68,34 @@
|
|
|
210
68
|
<div class="bf-col-6">
|
|
211
69
|
<h3>Inline text elements</h3>
|
|
212
70
|
<p>
|
|
213
|
-
The <a href="#">a element</a> example<br
|
|
71
|
+
The <a href="#">a element</a> example<br>
|
|
214
72
|
The <abbr>abbr element</abbr> and
|
|
215
73
|
<abbr title="Title text">abbr element with title</abbr> examples
|
|
216
|
-
<br
|
|
217
|
-
The <strong>b element</strong> example<br
|
|
218
|
-
The <cite>cite element</cite> example<br
|
|
219
|
-
The <code>code element</code> example<br
|
|
220
|
-
The <del>del element</del> example<br
|
|
74
|
+
<br>
|
|
75
|
+
The <strong>b element</strong> example<br>
|
|
76
|
+
The <cite>cite element</cite> example<br>
|
|
77
|
+
The <code>code element</code> example<br>
|
|
78
|
+
The <del>del element</del> example<br>
|
|
221
79
|
The <dfn>dfn element</dfn> and
|
|
222
80
|
<dfn title="Title text">dfn element with title</dfn>
|
|
223
|
-
examples<br
|
|
224
|
-
The <em>em element</em> example<br
|
|
225
|
-
The <em>i element</em> example<br
|
|
81
|
+
examples<br>
|
|
82
|
+
The <em>em element</em> example<br>
|
|
83
|
+
The <em>i element</em> example<br>
|
|
226
84
|
The img element
|
|
227
|
-
<img src="
|
|
228
|
-
example<br
|
|
229
|
-
The <ins>ins element</ins> example<br
|
|
230
|
-
The <kbd>kbd element</kbd> example<br
|
|
231
|
-
The <mark>mark element</mark> example<br
|
|
232
|
-
The <q>q element <q>inside</q> a q element</q> example<br
|
|
233
|
-
The <s>s element</s> example<br
|
|
234
|
-
The <samp>samp element</samp> example<br
|
|
235
|
-
The <small>small element</small> example<br
|
|
236
|
-
The <span>span element</span> example<br
|
|
237
|
-
The <strong>strong element</strong> example<br
|
|
238
|
-
The <sub>sub element</sub> example<br
|
|
239
|
-
The <sup>sup element</sup> example<br
|
|
240
|
-
The <u>u element</u> example<br
|
|
85
|
+
<img src="/docs/demo/images/placeholder-img-16x16.jpg" alt="just a placeholder" loading="lazy">
|
|
86
|
+
example<br>
|
|
87
|
+
The <ins>ins element</ins> example<br>
|
|
88
|
+
The <kbd>kbd element</kbd> example<br>
|
|
89
|
+
The <mark>mark element</mark> example<br>
|
|
90
|
+
The <q>q element <q>inside</q> a q element</q> example<br>
|
|
91
|
+
The <s>s element</s> example<br>
|
|
92
|
+
The <samp>samp element</samp> example<br>
|
|
93
|
+
The <small>small element</small> example<br>
|
|
94
|
+
The <span>span element</span> example<br>
|
|
95
|
+
The <strong>strong element</strong> example<br>
|
|
96
|
+
The <sub>sub element</sub> example<br>
|
|
97
|
+
The <sup>sup element</sup> example<br>
|
|
98
|
+
The <u>u element</u> example<br>
|
|
241
99
|
The <var>var element</var> example
|
|
242
100
|
</p>
|
|
243
101
|
</div>
|
|
@@ -246,31 +104,25 @@
|
|
|
246
104
|
<div class="bf-col-6">
|
|
247
105
|
<h3>Paragraphs</h3>
|
|
248
106
|
<p>
|
|
249
|
-
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
adipiscing elit. Aenean commodo ligula eget dolor.
|
|
107
|
+
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget
|
|
108
|
+
dolor. Aenean massa. Cum sociis natoque penatibus et m. Lorem ipsum dolor sit amet,
|
|
109
|
+
consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
|
|
253
110
|
</p>
|
|
254
111
|
<p>
|
|
255
|
-
The European languages are members of the same family. Their
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
their grammar, their pronunciation and their most common words.
|
|
112
|
+
The European languages are members of the same family. Their separate existence is a
|
|
113
|
+
myth. For science, music, sport, etc, Europe uses the same vocabulary. The languages
|
|
114
|
+
only differ in their grammar, their pronunciation and their most common words.
|
|
259
115
|
Everyone realizes why a new common language would be desirable.
|
|
260
116
|
</p>
|
|
261
117
|
</div>
|
|
262
118
|
<div class="bf-col-6">
|
|
263
119
|
<h3>hidden attribute</h3>
|
|
264
|
-
<p hidden="">
|
|
265
|
-
This should be hidden in all browsers (apart from IE6)
|
|
266
|
-
</p>
|
|
267
|
-
|
|
120
|
+
<p hidden="">This should be hidden in all browsers (apart from IE6)</p>
|
|
268
121
|
<h3>Template content</h3>
|
|
269
122
|
<template>
|
|
270
123
|
<h1>{{title}}</h1>
|
|
271
124
|
<content></content>
|
|
272
125
|
</template>
|
|
273
|
-
|
|
274
126
|
<h3>Address</h3>
|
|
275
127
|
<address>Address: somewhere, world</address>
|
|
276
128
|
</div>
|
|
@@ -278,7 +130,7 @@
|
|
|
278
130
|
<div class="bf-row">
|
|
279
131
|
<div class="bf-col-12">
|
|
280
132
|
<h3>hr</h3>
|
|
281
|
-
<hr
|
|
133
|
+
<hr>
|
|
282
134
|
</div>
|
|
283
135
|
</div>
|
|
284
136
|
<div class="bf-row">
|
|
@@ -287,12 +139,11 @@
|
|
|
287
139
|
<pre>
|
|
288
140
|
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.
|
|
289
141
|
</pre>
|
|
290
|
-
|
|
291
142
|
<h3>code (526 characters)</h3>
|
|
292
143
|
<code>
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
144
|
+
html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em
|
|
145
|
+
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
|
|
146
|
+
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}
|
|
296
147
|
</code>
|
|
297
148
|
</div>
|
|
298
149
|
</div>
|
|
@@ -319,12 +170,10 @@ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
|
|
|
319
170
|
<blockquote>
|
|
320
171
|
<p>
|
|
321
172
|
Some sort of famous witty quote marked up with a
|
|
322
|
-
<code><blockquote></code> and a child
|
|
323
|
-
<code><p></code> element.
|
|
173
|
+
<code><blockquote></code> and a child <code><p></code> element.
|
|
324
174
|
</p>
|
|
325
175
|
<small>Tom Whatever</small>
|
|
326
176
|
</blockquote>
|
|
327
|
-
|
|
328
177
|
<blockquote>
|
|
329
178
|
Even better philosophical quote marked up with just a
|
|
330
179
|
<code><blockquote></code> element.
|
|
@@ -390,7 +239,6 @@ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
|
|
|
390
239
|
</dl>
|
|
391
240
|
</div>
|
|
392
241
|
</div>
|
|
393
|
-
|
|
394
242
|
<div class="bf-row">
|
|
395
243
|
<div class="bf-col-6">
|
|
396
244
|
<h3>Unstyled list</h3>
|
|
@@ -441,7 +289,6 @@ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
|
|
|
441
289
|
</nav>
|
|
442
290
|
</div>
|
|
443
291
|
</div>
|
|
444
|
-
|
|
445
292
|
<div class="bf-row">
|
|
446
293
|
<div class="bf-col-12">
|
|
447
294
|
<h2 id="embedded-content" class="h2--section">Embedded content</h2>
|
|
@@ -452,7 +299,7 @@ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
|
|
|
452
299
|
<h3>Linked figure with an image and a caption</h3>
|
|
453
300
|
<figure>
|
|
454
301
|
<a href="#">
|
|
455
|
-
<img src="
|
|
302
|
+
<img src="/docs/demo/images/placeholder-img-800x400.jpg" alt="just a placeholder" loading="lazy">
|
|
456
303
|
</a>
|
|
457
304
|
<figcaption>The image above is 800x400 pixels</figcaption>
|
|
458
305
|
</figure>
|
|
@@ -468,20 +315,17 @@ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
|
|
|
468
315
|
<div class="bf-col-6">
|
|
469
316
|
<div class="bf-m-b-3">
|
|
470
317
|
<h3>HTML5 video with controls</h3>
|
|
471
|
-
<video poster="
|
|
472
|
-
<source src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm"
|
|
473
|
-
|
|
474
|
-
<source src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm"
|
|
475
|
-
type="video/mp4" />
|
|
318
|
+
<video poster="/docs/demo/images/video-poster.png" controls width="450">
|
|
319
|
+
<source src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm" type="video/webm">
|
|
320
|
+
<source src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm" type="video/mp4">
|
|
476
321
|
Sorry, your browser doesn't support embedded videos.
|
|
477
322
|
</video>
|
|
478
323
|
</div>
|
|
479
|
-
|
|
480
324
|
<div class="bf-m-b-3">
|
|
481
325
|
<h3>Audio with controls</h3>
|
|
482
326
|
<audio controls>
|
|
483
|
-
<source src="https://
|
|
484
|
-
|
|
327
|
+
<source src="https://9eb231f8-a305-47de-b45a-3042679fa3f3.mdnplay.dev/shared-assets/audio/t-rex-roar.mp3"
|
|
328
|
+
type="audio/mp3">
|
|
485
329
|
<p>Your browser does not support the HTML5 Audio element.</p>
|
|
486
330
|
</audio>
|
|
487
331
|
</div>
|
|
@@ -496,19 +340,23 @@ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
|
|
|
496
340
|
</div>
|
|
497
341
|
</div>
|
|
498
342
|
<div class="bf-row">
|
|
499
|
-
<div class="bf-col-
|
|
343
|
+
<div class="bf-col-12 bf-m-b-4">
|
|
500
344
|
<h3>Progress</h3>
|
|
501
345
|
<div class="bf-m-b-3">
|
|
502
346
|
<label for="file">File progress:</label>
|
|
503
347
|
<progress id="file" max="100" value="70">70%</progress>
|
|
504
348
|
</div>
|
|
505
|
-
|
|
506
349
|
<h3>Meter</h3>
|
|
507
350
|
<label for="fuel">Fuel level:</label>
|
|
508
351
|
<meter id="fuel" min="0" max="100" low="33" high="66" optimum="80" value="50">
|
|
509
352
|
at 50/100
|
|
510
353
|
</meter>
|
|
511
354
|
</div>
|
|
355
|
+
</div>
|
|
356
|
+
<div class="bf-row">
|
|
357
|
+
<div class="bf-col-12">
|
|
358
|
+
<h2 id="interactive-elements" class="h2--section">Interactive elements</h2>
|
|
359
|
+
</div>
|
|
512
360
|
<div class="bf-col-6">
|
|
513
361
|
<h3>Details with a summary</h3>
|
|
514
362
|
<div class="bf-m-b-2">
|
|
@@ -517,12 +365,35 @@ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
|
|
|
517
365
|
Something small enough to escape casual notice.
|
|
518
366
|
</details>
|
|
519
367
|
</div>
|
|
520
|
-
|
|
521
368
|
<details open>
|
|
522
369
|
<summary>Click to Hide</summary>
|
|
523
370
|
Something small enough to escape casual notice.
|
|
524
371
|
</details>
|
|
525
372
|
</div>
|
|
373
|
+
<div class="bf-col-6">
|
|
374
|
+
<h3>Dialog</h3>
|
|
375
|
+
<button id="openBtn" class="bf-btn">Open Dialog</button>
|
|
376
|
+
<dialog id="myDialog" hidden>
|
|
377
|
+
<p>
|
|
378
|
+
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dolores ducimus optio
|
|
379
|
+
quis expedita, modi libero maxime voluptate temporibus quia tempore molestiae
|
|
380
|
+
necessitatibus id in nostrum a, alias beatae! Molestias, voluptatem?
|
|
381
|
+
</p>
|
|
382
|
+
<button class="bf-btn" id="closeBtn">Close</button>
|
|
383
|
+
</dialog>
|
|
384
|
+
<pre>
|
|
385
|
+
<script>
|
|
386
|
+
// Sets open/close button clicks to show or hide the dialog if available,
|
|
387
|
+
// else toggles the open attribute.
|
|
388
|
+
|
|
389
|
+
const dialog = document.getElementById('myDialog');
|
|
390
|
+
const openBtn = document.getElementById('openBtn');
|
|
391
|
+
const closeBtn = document.getElementById('closeBtn');
|
|
392
|
+
|
|
393
|
+
openBtn.onclick = () => dialog.showModal ? dialog.showModal() : dialog.setAttribute('open', '');
|
|
394
|
+
closeBtn.onclick = () => dialog.close ? dialog.close() : dialog.removeAttribute('open');
|
|
395
|
+
</script></pre>
|
|
396
|
+
</div>
|
|
526
397
|
</div>
|
|
527
398
|
<div class="bf-row">
|
|
528
399
|
<div class="bf-col-12">
|
|
@@ -532,70 +403,47 @@ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
|
|
|
532
403
|
<div class="bf-row">
|
|
533
404
|
<div class="bf-col-6 bf-m-b-3">
|
|
534
405
|
<h3>Inputs</h3>
|
|
535
|
-
|
|
536
406
|
<form>
|
|
537
407
|
<fieldset>
|
|
538
|
-
<legend>
|
|
539
|
-
HTML5 has several new input types for forms (legend).
|
|
540
|
-
</legend>
|
|
408
|
+
<legend>HTML5 has several new input types for forms (legend).</legend>
|
|
541
409
|
<div class="bf-m-b-4">
|
|
542
410
|
<label>Text input as sibling of label</label>
|
|
543
|
-
<input type="text" value="default value that goes on and on without stopping or punctuation"
|
|
544
|
-
|
|
411
|
+
<input type="text" value="default value that goes on and on without stopping or punctuation">
|
|
545
412
|
<label>Text input as descendant of label (not recommended)
|
|
546
|
-
<input type="text"
|
|
547
|
-
|
|
548
|
-
|
|
549
|
-
<label disabled>Text input as sibling of label (disabled)</label>
|
|
550
|
-
<input type="text" value="default value that goes on and on without stopping or punctuation" disabled />
|
|
551
|
-
|
|
413
|
+
<input type="text" value="default value that goes on and on without stopping or punctuation"></label>
|
|
414
|
+
<input type="text" value="default value that goes on and on without stopping or punctuation" disabled>
|
|
552
415
|
<label aria-disabled="true">Text input as sibling of label (aria-disabled)</label>
|
|
553
416
|
<input type="text" value="default value that goes on and on without stopping or punctuation"
|
|
554
|
-
aria-disabled="true"
|
|
555
|
-
|
|
417
|
+
aria-disabled="true">
|
|
556
418
|
<label class="bf-disabled">Text input as sibling of label (.bf-disabled)</label>
|
|
557
419
|
<input type="text" value="default value that goes on and on without stopping or punctuation"
|
|
558
|
-
class="bf-disabled"
|
|
559
|
-
|
|
560
|
-
|
|
561
|
-
recommended)
|
|
562
|
-
<input type="text" value="default value" disabled /></label>
|
|
563
|
-
|
|
420
|
+
class="bf-disabled">
|
|
421
|
+
<label class="bf-disabled">Text input as descendant of label (disabled, not recommended)
|
|
422
|
+
<input type="text" value="default value" disabled></label>
|
|
564
423
|
<label>Text input (focused)</label>
|
|
565
|
-
<input class="bf-focused" type="text" value="default value"
|
|
566
|
-
|
|
424
|
+
<input class="bf-focused" type="text" value="default value">
|
|
567
425
|
<label>Text input (invalid)</label>
|
|
568
|
-
<input class="bf-invalid" type="text" value="invalid value"
|
|
569
|
-
|
|
426
|
+
<input class="bf-invalid" type="text" value="invalid value">
|
|
570
427
|
<label>Email input (required)</label>
|
|
571
|
-
<input type="email" required
|
|
572
|
-
|
|
428
|
+
<input type="email" required>
|
|
573
429
|
<label>Number input</label>
|
|
574
|
-
<input id="in" max="10" min="0" type="number" value="5"
|
|
575
|
-
|
|
576
|
-
<label>
|
|
577
|
-
|
|
578
|
-
<label>URL input</label> <input type="url" />
|
|
579
|
-
|
|
430
|
+
<input id="in" max="10" min="0" type="number" value="5">
|
|
431
|
+
<label>Tel input</label> <input type="tel">
|
|
432
|
+
<label>URL input</label> <input type="url">
|
|
580
433
|
<label>Date input</label>
|
|
581
|
-
<input id="idd" type="date" value="1970-01-01"
|
|
582
|
-
|
|
434
|
+
<input id="idd" type="date" value="1970-01-01">
|
|
583
435
|
<label>Month input</label>
|
|
584
|
-
<input id="idm" type="month" value="1970-01"
|
|
585
|
-
|
|
436
|
+
<input id="idm" type="month" value="1970-01">
|
|
586
437
|
<label>Week input</label>
|
|
587
|
-
<input id="idw" type="week" value="1970-W01"
|
|
588
|
-
|
|
438
|
+
<input id="idw" type="week" value="1970-W01">
|
|
589
439
|
<label>Datetime-local input</label>
|
|
590
|
-
<input id="idtl" type="datetime-local" value="1970-01-01T00:00"
|
|
440
|
+
<input id="idtl" type="datetime-local" value="1970-01-01T00:00">
|
|
591
441
|
<label>Password input</label>
|
|
592
|
-
<input type="password" value="password"
|
|
593
|
-
|
|
442
|
+
<input type="password" value="password">
|
|
594
443
|
<label>Search input</label>
|
|
595
|
-
<input id="search" name="search" type="search"
|
|
596
|
-
|
|
444
|
+
<input id="search" name="search" type="search">
|
|
597
445
|
<label for="myBrowser">Input datalist (choose a browser)</label>
|
|
598
|
-
<input list="browsers" id="myBrowser" name="myBrowser"
|
|
446
|
+
<input list="browsers" id="myBrowser" name="myBrowser">
|
|
599
447
|
<datalist id="browsers">
|
|
600
448
|
<option value="Chrome"></option>
|
|
601
449
|
<option value="Firefox"></option>
|
|
@@ -604,48 +452,38 @@ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
|
|
|
604
452
|
<option value="Safari"></option>
|
|
605
453
|
<option value="Microsoft Edge"></option>
|
|
606
454
|
</datalist>
|
|
607
|
-
|
|
608
455
|
<label>File input</label>
|
|
609
|
-
<input type="file"
|
|
610
|
-
|
|
456
|
+
<input type="file">
|
|
611
457
|
<label>Range input</label>
|
|
612
|
-
<input id="ir" type="range" value="10"
|
|
458
|
+
<input id="ir" type="range" value="10">
|
|
613
459
|
</div>
|
|
614
|
-
|
|
615
460
|
<h3>Radio and checkbox inputs</h3>
|
|
616
|
-
|
|
617
461
|
<h4>Radios</h4>
|
|
618
|
-
|
|
619
462
|
<div class="bf-m-b-3">
|
|
620
463
|
<div>
|
|
621
|
-
<input type="radio" id="huey" name="drone" value="huey" checked
|
|
464
|
+
<input type="radio" id="huey" name="drone" value="huey" checked>
|
|
622
465
|
<label for="huey">Huey</label>
|
|
623
466
|
</div>
|
|
624
|
-
|
|
625
467
|
<div>
|
|
626
|
-
<input type="radio" id="louie" name="drone" value="louie" checked
|
|
468
|
+
<input type="radio" id="louie" name="drone" value="louie" checked>
|
|
627
469
|
<label for="louie">Louie (checked)</label>
|
|
628
470
|
</div>
|
|
629
|
-
|
|
630
471
|
<div>
|
|
631
|
-
<input type="radio" id="jake" name="drone" value="jake" disabled
|
|
472
|
+
<input type="radio" id="jake" name="drone" value="jake" disabled>
|
|
632
473
|
<label class="bf-disabled" for="jake">Jake (disabled)</label>
|
|
633
474
|
</div>
|
|
634
475
|
</div>
|
|
635
|
-
|
|
636
476
|
<h4>Checkboxes</h4>
|
|
637
477
|
<div>
|
|
638
|
-
<input type="checkbox" id="scales" name="scales"
|
|
478
|
+
<input type="checkbox" id="scales" name="scales">
|
|
639
479
|
<label for="scales">Scales</label>
|
|
640
480
|
</div>
|
|
641
|
-
|
|
642
481
|
<div>
|
|
643
|
-
<input type="checkbox" id="horns" name="horns" checked
|
|
482
|
+
<input type="checkbox" id="horns" name="horns" checked>
|
|
644
483
|
<label for="horns">Horns (checked)</label>
|
|
645
484
|
</div>
|
|
646
|
-
|
|
647
485
|
<div>
|
|
648
|
-
<input type="checkbox" id="wings" name="wings" disabled
|
|
486
|
+
<input type="checkbox" id="wings" name="wings" disabled>
|
|
649
487
|
<label class="bf-disabled" for="wings">Wings (disabled)</label>
|
|
650
488
|
</div>
|
|
651
489
|
</fieldset>
|
|
@@ -663,7 +501,6 @@ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
|
|
|
663
501
|
<option>Option 04</option>
|
|
664
502
|
<option>Option 05</option>
|
|
665
503
|
</select>
|
|
666
|
-
|
|
667
504
|
<label for="s-ltr">Select field (RTL)</label>
|
|
668
505
|
<select id="s-ltr" dir="rtl">
|
|
669
506
|
<option>Option 01</option>
|
|
@@ -672,7 +509,6 @@ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
|
|
|
672
509
|
<option>Option 04</option>
|
|
673
510
|
<option>Option 05</option>
|
|
674
511
|
</select>
|
|
675
|
-
|
|
676
512
|
<label class="bf-disabled" for="s2">Select field (disabled)</label>
|
|
677
513
|
<select id="s2" disabled>
|
|
678
514
|
<option>Option 01</option>
|
|
@@ -681,7 +517,6 @@ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
|
|
|
681
517
|
<option>Option 04</option>
|
|
682
518
|
<option>Option 05</option>
|
|
683
519
|
</select>
|
|
684
|
-
|
|
685
520
|
<label for="select_multi">Select [size="2"]</label>
|
|
686
521
|
<select id="select_size" name="select_size" size="2">
|
|
687
522
|
<optgroup label="Group 1">
|
|
@@ -695,7 +530,6 @@ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
|
|
|
695
530
|
<option value="6">Yet another item to be chosen</option>
|
|
696
531
|
</optgroup>
|
|
697
532
|
</select>
|
|
698
|
-
|
|
699
533
|
<label for="select_multi">Select multiple</label>
|
|
700
534
|
<select id="select_multi" multiple="multiple" name="select_multi">
|
|
701
535
|
<optgroup label="Group 1">
|
|
@@ -716,7 +550,6 @@ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
|
|
|
716
550
|
</select>
|
|
717
551
|
</fieldset>
|
|
718
552
|
</form>
|
|
719
|
-
|
|
720
553
|
<h3>Textareas</h3>
|
|
721
554
|
<form>
|
|
722
555
|
<fieldset>
|
|
@@ -727,7 +560,6 @@ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
|
|
|
727
560
|
rows="7"></textarea>
|
|
728
561
|
</fieldset>
|
|
729
562
|
</form>
|
|
730
|
-
|
|
731
563
|
<h3>Textareas (disabled)</h3>
|
|
732
564
|
<form>
|
|
733
565
|
<fieldset disabled>
|
|
@@ -745,17 +577,17 @@ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
|
|
|
745
577
|
<h3>Clickable inputs</h3>
|
|
746
578
|
<fieldset class="bf-m-b-3">
|
|
747
579
|
<div class="input-image">
|
|
748
|
-
<input alt="Image (input)" src="
|
|
580
|
+
<input alt="Image (input)" src="/docs/demo/images/placeholder-img-130x140.jpg" type="image"><br>
|
|
749
581
|
<code>input type="image" (130x40px)</code>
|
|
750
582
|
</div>
|
|
751
583
|
<div>
|
|
752
|
-
<input type="reset" value="Reset (input)"
|
|
584
|
+
<input type="reset" value="Reset (input)">
|
|
753
585
|
</div>
|
|
754
586
|
<div>
|
|
755
|
-
<input type="button" value="Button (input)"
|
|
587
|
+
<input type="button" value="Button (input)">
|
|
756
588
|
</div>
|
|
757
589
|
<div>
|
|
758
|
-
<input type="submit" value="Submit (input)"
|
|
590
|
+
<input type="submit" value="Submit (input)">
|
|
759
591
|
</div>
|
|
760
592
|
<div>
|
|
761
593
|
<a class="bf-btn" href="#" title="button link" role="button">Button (link)</a>
|
|
@@ -764,21 +596,20 @@ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
|
|
|
764
596
|
<a class="bf-btn bf-btn--primary" href="#" title="button link" role="button">Primary button (link)</a>
|
|
765
597
|
</div>
|
|
766
598
|
</fieldset>
|
|
767
|
-
|
|
768
599
|
<fieldset disabled>
|
|
769
600
|
<h3>Clickable inputs (disabled)</h3>
|
|
770
601
|
<div class="input-image">
|
|
771
|
-
<input alt="Image (input)" src="
|
|
602
|
+
<input alt="Image (input)" src="/docs/demo/images/placeholder-img-130x140.jpg" type="image"><br>
|
|
772
603
|
<code>input type="image" (130x40px)</code>
|
|
773
604
|
</div>
|
|
774
605
|
<div>
|
|
775
|
-
<input type="reset" value="Reset (input)"
|
|
606
|
+
<input type="reset" value="Reset (input)">
|
|
776
607
|
</div>
|
|
777
608
|
<div>
|
|
778
|
-
<input type="button" value="Button (input)"
|
|
609
|
+
<input type="button" value="Button (input)">
|
|
779
610
|
</div>
|
|
780
611
|
<div>
|
|
781
|
-
<input type="submit" value="Submit (input)"
|
|
612
|
+
<input type="submit" value="Submit (input)">
|
|
782
613
|
</div>
|
|
783
614
|
<div>
|
|
784
615
|
<a class="bf-btn" href="#" title="button link" role="button">Button (link)</a>
|
|
@@ -806,21 +637,16 @@ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
|
|
|
806
637
|
</button>
|
|
807
638
|
</div>
|
|
808
639
|
</fieldset>
|
|
809
|
-
|
|
810
640
|
<h3>Buttons (.bf-disabled)</h3>
|
|
811
641
|
<fieldset>
|
|
812
642
|
<div>
|
|
813
643
|
<button type="reset" class="bf-disabled">Reset (button)</button>
|
|
814
644
|
</div>
|
|
815
645
|
<div>
|
|
816
|
-
<button type="button" class="bf-disabled">
|
|
817
|
-
Button (button)
|
|
818
|
-
</button>
|
|
646
|
+
<button type="button" class="bf-disabled">Button (button)</button>
|
|
819
647
|
</div>
|
|
820
648
|
<div>
|
|
821
|
-
<button type="submit" class="bf-disabled">
|
|
822
|
-
Submit (button)
|
|
823
|
-
</button>
|
|
649
|
+
<button type="submit" class="bf-disabled">Submit (button)</button>
|
|
824
650
|
</div>
|
|
825
651
|
<div>
|
|
826
652
|
<button class="bf-btn bf-btn--primary bf-disabled" type="submit">
|
|
@@ -880,7 +706,6 @@ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
|
|
|
880
706
|
</tfoot>
|
|
881
707
|
</table>
|
|
882
708
|
</div>
|
|
883
|
-
|
|
884
709
|
<div class="bf-col-6">
|
|
885
710
|
<h3>Styled tabular data</h3>
|
|
886
711
|
<table class="bf-table">
|
|
@@ -1012,7 +837,6 @@ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
|
|
|
1012
837
|
</div>
|
|
1013
838
|
</div>
|
|
1014
839
|
</div>
|
|
1015
|
-
|
|
1016
840
|
<div class="bf-row">
|
|
1017
841
|
<div class="bf-col-4 bf-m-b-3">
|
|
1018
842
|
<h3>Styled tabular data + zebra striping</h3>
|
|
@@ -1058,7 +882,6 @@ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
|
|
|
1058
882
|
</tfoot>
|
|
1059
883
|
</table>
|
|
1060
884
|
</div>
|
|
1061
|
-
|
|
1062
885
|
<div class="bf-col-8">
|
|
1063
886
|
<h3>Styled responsive tabular data + zebra striping</h3>
|
|
1064
887
|
<div class="bf-table-responsive bf-table-responsive--zebra">
|
|
@@ -1148,39 +971,33 @@ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
|
|
|
1148
971
|
<div class="bf-col-12">
|
|
1149
972
|
<h2 id="grid-system" class="h2--section">Grid System</h2>
|
|
1150
973
|
<p>
|
|
1151
|
-
12 columns fluid Grid System with containers, rows and columns.<br
|
|
1152
|
-
At 575, 768 or 991 pixels the columns could be 100% of the row's
|
|
1153
|
-
width
|
|
1154
|
-
|
|
1155
|
-
<code
|
|
1156
|
-
|
|
1157
|
-
have a <code>max-width</code>.
|
|
974
|
+
12 columns fluid Grid System with containers, rows and columns.<br>
|
|
975
|
+
At 575, 768 or 991 pixels the columns could be 100% of the row's width.<br>
|
|
976
|
+
The default container <code>.bf-container</code> has a <code>max-width</code> set to
|
|
977
|
+
1140 pixels by default.<br>
|
|
978
|
+
The custom container <code>.bf-container--fluid</code> doesn't have a
|
|
979
|
+
<code>max-width</code>.
|
|
1158
980
|
</p>
|
|
1159
981
|
<p class="bf-m-b-0">
|
|
1160
982
|
This is a default container with a
|
|
1161
|
-
<code>bf-container--break-md</code> class and a set a columns
|
|
1162
|
-
combinations.
|
|
983
|
+
<code>bf-container--break-md</code> class and a set a columns combinations.
|
|
1163
984
|
</p>
|
|
1164
985
|
</div>
|
|
1165
986
|
</div>
|
|
1166
|
-
|
|
1167
987
|
<div class="grid bf-m-b-4">
|
|
1168
988
|
<div class="bf-row">
|
|
1169
989
|
<div class="bf-col-12">
|
|
1170
990
|
<div class="col-wrapper">12 col</div>
|
|
1171
991
|
</div>
|
|
1172
992
|
</div>
|
|
1173
|
-
|
|
1174
993
|
<div class="bf-row">
|
|
1175
994
|
<div class="bf-col-11">
|
|
1176
995
|
<div class="col-wrapper">11 col</div>
|
|
1177
996
|
</div>
|
|
1178
|
-
|
|
1179
997
|
<div class="bf-col-1">
|
|
1180
998
|
<div class="col-wrapper">1 col</div>
|
|
1181
999
|
</div>
|
|
1182
1000
|
</div>
|
|
1183
|
-
|
|
1184
1001
|
<div class="bf-row">
|
|
1185
1002
|
<div class="bf-col-10">
|
|
1186
1003
|
<div class="col-wrapper">10 col</div>
|
|
@@ -1189,7 +1006,6 @@ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
|
|
|
1189
1006
|
<div class="col-wrapper">2 col</div>
|
|
1190
1007
|
</div>
|
|
1191
1008
|
</div>
|
|
1192
|
-
|
|
1193
1009
|
<div class="bf-row">
|
|
1194
1010
|
<div class="bf-col-9">
|
|
1195
1011
|
<div class="col-wrapper">9 col</div>
|
|
@@ -1198,7 +1014,6 @@ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
|
|
|
1198
1014
|
<div class="col-wrapper">3 col</div>
|
|
1199
1015
|
</div>
|
|
1200
1016
|
</div>
|
|
1201
|
-
|
|
1202
1017
|
<div class="bf-row">
|
|
1203
1018
|
<div class="bf-col-8">
|
|
1204
1019
|
<div class="col-wrapper">8 col</div>
|
|
@@ -1215,7 +1030,6 @@ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
|
|
|
1215
1030
|
<div class="col-wrapper">5 col</div>
|
|
1216
1031
|
</div>
|
|
1217
1032
|
</div>
|
|
1218
|
-
|
|
1219
1033
|
<div class="bf-row">
|
|
1220
1034
|
<div class="bf-col-6">
|
|
1221
1035
|
<div class="col-wrapper">6 col</div>
|
|
@@ -1224,31 +1038,25 @@ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
|
|
|
1224
1038
|
<div class="col-wrapper">6 col</div>
|
|
1225
1039
|
</div>
|
|
1226
1040
|
</div>
|
|
1227
|
-
|
|
1228
1041
|
<div class="bf-row">
|
|
1229
1042
|
<div class="bf-col-5">
|
|
1230
1043
|
<div class="col-wrapper">5 col</div>
|
|
1231
1044
|
</div>
|
|
1232
|
-
|
|
1233
1045
|
<div class="bf-col-7">
|
|
1234
1046
|
<div class="col-wrapper">7 col</div>
|
|
1235
1047
|
</div>
|
|
1236
1048
|
</div>
|
|
1237
|
-
|
|
1238
1049
|
<div class="bf-row">
|
|
1239
1050
|
<div class="bf-col-4">
|
|
1240
1051
|
<div class="col-wrapper">4 col</div>
|
|
1241
1052
|
</div>
|
|
1242
|
-
|
|
1243
1053
|
<div class="bf-col-4">
|
|
1244
1054
|
<div class="col-wrapper">4 col</div>
|
|
1245
1055
|
</div>
|
|
1246
|
-
|
|
1247
1056
|
<div class="bf-col-4">
|
|
1248
1057
|
<div class="col-wrapper">4 col</div>
|
|
1249
1058
|
</div>
|
|
1250
1059
|
</div>
|
|
1251
|
-
|
|
1252
1060
|
<div class="bf-row">
|
|
1253
1061
|
<div class="bf-col-3">
|
|
1254
1062
|
<div class="col-wrapper">3 col</div>
|
|
@@ -1256,33 +1064,26 @@ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
|
|
|
1256
1064
|
<div class="bf-col-3">
|
|
1257
1065
|
<div class="col-wrapper">3 col</div>
|
|
1258
1066
|
</div>
|
|
1259
|
-
|
|
1260
1067
|
<div class="bf-col-3">
|
|
1261
1068
|
<div class="col-wrapper">3 col</div>
|
|
1262
1069
|
</div>
|
|
1263
|
-
|
|
1264
1070
|
<div class="bf-col-3">
|
|
1265
1071
|
<div class="col-wrapper">3 col</div>
|
|
1266
1072
|
</div>
|
|
1267
1073
|
</div>
|
|
1268
|
-
|
|
1269
1074
|
<div class="bf-row">
|
|
1270
1075
|
<div class="bf-col-2">
|
|
1271
1076
|
<div class="col-wrapper">2 col</div>
|
|
1272
1077
|
</div>
|
|
1273
|
-
|
|
1274
1078
|
<div class="bf-col-2">
|
|
1275
1079
|
<div class="col-wrapper">2 col</div>
|
|
1276
1080
|
</div>
|
|
1277
|
-
|
|
1278
1081
|
<div class="bf-col-2">
|
|
1279
1082
|
<div class="col-wrapper">2 col</div>
|
|
1280
1083
|
</div>
|
|
1281
|
-
|
|
1282
1084
|
<div class="bf-col-2">
|
|
1283
1085
|
<div class="col-wrapper">2 col</div>
|
|
1284
1086
|
</div>
|
|
1285
|
-
|
|
1286
1087
|
<div class="bf-col-2">
|
|
1287
1088
|
<div class="col-wrapper">2 col</div>
|
|
1288
1089
|
</div>
|
|
@@ -1290,25 +1091,20 @@ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
|
|
|
1290
1091
|
<div class="col-wrapper">2 col</div>
|
|
1291
1092
|
</div>
|
|
1292
1093
|
</div>
|
|
1293
|
-
|
|
1294
1094
|
<p>No gutters between columns (<code>.bf-no-gutters</code>)</p>
|
|
1295
1095
|
<div class="bf-row bf-no-gutters">
|
|
1296
1096
|
<div class="bf-col-2 bf-no-gutters">
|
|
1297
1097
|
<div class="col-wrapper">2 col</div>
|
|
1298
1098
|
</div>
|
|
1299
|
-
|
|
1300
1099
|
<div class="bf-col-2 bf-no-gutters">
|
|
1301
1100
|
<div class="col-wrapper">2 col</div>
|
|
1302
1101
|
</div>
|
|
1303
|
-
|
|
1304
1102
|
<div class="bf-col-2 bf-no-gutters">
|
|
1305
1103
|
<div class="col-wrapper">2 col</div>
|
|
1306
1104
|
</div>
|
|
1307
|
-
|
|
1308
1105
|
<div class="bf-col-2 bf-no-gutters">
|
|
1309
1106
|
<div class="col-wrapper">2 col</div>
|
|
1310
1107
|
</div>
|
|
1311
|
-
|
|
1312
1108
|
<div class="bf-col-2 bf-no-gutters">
|
|
1313
1109
|
<div class="col-wrapper">2 col</div>
|
|
1314
1110
|
</div>
|
|
@@ -1318,27 +1114,39 @@ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
|
|
|
1318
1114
|
</div>
|
|
1319
1115
|
</div>
|
|
1320
1116
|
</main>
|
|
1321
|
-
|
|
1322
1117
|
<footer>
|
|
1323
1118
|
<div class="bf-row bf-m-b-4">
|
|
1324
1119
|
<div class="bf-col-12 bf-t-center">
|
|
1325
1120
|
<div class="bf-m-b-4 bf-p-t-3">
|
|
1326
|
-
<h2>
|
|
1327
|
-
<
|
|
1328
|
-
|
|
1329
|
-
|
|
1330
|
-
|
|
1331
|
-
|
|
1332
|
-
<a
|
|
1121
|
+
<h2>Bullframe CSS</h2>
|
|
1122
|
+
<p>Bullframe is a solid Sass-based CSS framework for responsive, cross-browser UIs.</p>
|
|
1123
|
+
<a class="bf-btn bf-btn--primary" href="https://github.com/marcop135/bullframe.css" role="button">GitHub</a>
|
|
1124
|
+
<a class="bf-btn" href="https://github.com/marcop135/bullframe.css/blob/master/README.md"
|
|
1125
|
+
role="button">Docs</a>
|
|
1126
|
+
|
|
1127
|
+
<p><small>Built with passion by: <a href="https://marcopontili.com" title="Marco Pontili" target="_blank"
|
|
1128
|
+
rel="noopener noreferrer">Marco Pontili</a></small></p>
|
|
1333
1129
|
</div>
|
|
1334
|
-
|
|
1335
1130
|
<div class="bf-t-center">
|
|
1131
|
+
<hr>
|
|
1336
1132
|
<a class="bf-display-inline-block" href="#top">Back to top</a>
|
|
1337
1133
|
</div>
|
|
1338
1134
|
</div>
|
|
1339
1135
|
</div>
|
|
1340
1136
|
</footer>
|
|
1341
1137
|
</div>
|
|
1138
|
+
<!-- Enable <dialog> modal interaction -->
|
|
1139
|
+
<script>
|
|
1140
|
+
const dialog = document.getElementById('myDialog');
|
|
1141
|
+
const openBtn = document.getElementById('openBtn');
|
|
1142
|
+
const closeBtn = document.getElementById('closeBtn');
|
|
1143
|
+
|
|
1144
|
+
if (dialog && openBtn && closeBtn) {
|
|
1145
|
+
openBtn.onclick = () =>
|
|
1146
|
+
dialog.showModal ? dialog.showModal() : dialog.setAttribute('open', '');
|
|
1147
|
+
closeBtn.onclick = () => (dialog.close ? dialog.close() : dialog.removeAttribute('open'));
|
|
1148
|
+
}
|
|
1149
|
+
</script>
|
|
1342
1150
|
</body>
|
|
1343
1151
|
|
|
1344
1152
|
</html>
|