bullframe.css 5.1.0 → 6.1.0
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/CHANGELOG.md +63 -2
- package/LICENSE +1 -1
- package/README.md +81 -445
- package/dist/css/bullframe-classless-dark.css +1260 -892
- package/dist/css/bullframe-classless-dark.css.map +1 -1
- package/dist/css/bullframe-classless-dark.min.css +1 -3
- package/dist/css/bullframe-classless-dark.min.css.map +1 -1
- package/dist/css/bullframe-classless-system-default.css +1307 -908
- package/dist/css/bullframe-classless-system-default.css.map +1 -1
- package/dist/css/bullframe-classless-system-default.min.css +1 -3
- package/dist/css/bullframe-classless-system-default.min.css.map +1 -1
- package/dist/css/bullframe-classless.css +1083 -713
- package/dist/css/bullframe-classless.css.map +1 -1
- package/dist/css/bullframe-classless.min.css +1 -3
- package/dist/css/bullframe-classless.min.css.map +1 -1
- package/dist/css/bullframe-dark.css +2166 -1541
- package/dist/css/bullframe-dark.css.map +1 -1
- package/dist/css/bullframe-dark.min.css +1 -3
- package/dist/css/bullframe-dark.min.css.map +1 -1
- package/dist/css/bullframe-system-default.css +2083 -1438
- package/dist/css/bullframe-system-default.css.map +1 -1
- package/dist/css/bullframe-system-default.min.css +1 -3
- package/dist/css/bullframe-system-default.min.css.map +1 -1
- package/dist/css/bullframe-utilities.css +846 -503
- package/dist/css/bullframe-utilities.css.map +1 -1
- package/dist/css/bullframe-utilities.min.css +1 -2
- package/dist/css/bullframe-utilities.min.css.map +1 -1
- package/dist/css/bullframe.css +1963 -1328
- package/dist/css/bullframe.css.map +1 -1
- package/dist/css/bullframe.min.css +1 -3
- package/dist/css/bullframe.min.css.map +1 -1
- package/package.json +74 -28
- package/.browserslistrc +0 -3
- package/.editorconfig +0 -15
- package/.htmlhintrc +0 -12
- package/.prettierignore +0 -1
- package/.stylelintignore +0 -3
- package/.stylelintrc.json +0 -26
- package/dist/apple-touch-icon.png +0 -0
- package/dist/css/bullframe-classless-dark-prefers.css +0 -1280
- package/dist/css/bullframe-classless-dark-prefers.css.map +0 -1
- package/dist/css/bullframe-classless-dark-prefers.min.css +0 -3
- package/dist/css/bullframe-classless-dark-prefers.min.css.map +0 -1
- package/dist/css/bullframe-dark-prefers.css +0 -2296
- package/dist/css/bullframe-dark-prefers.css.map +0 -1
- package/dist/css/bullframe-dark-prefers.min.css +0 -3
- package/dist/css/bullframe-dark-prefers.min.css.map +0 -1
- package/dist/docs/demo/index.html +0 -1154
- package/dist/favicon-16x16.png +0 -0
- package/dist/favicon-32x32.png +0 -0
- package/dist/favicon.ico +0 -0
- package/dist/index.css +0 -1
- package/dist/index.js.map +0 -1
- package/dist/placeholder-img-800x400.jpg +0 -0
- package/dist/video-poster.png +0 -0
- package/prettier.config.js +0 -26
- package/src/scss/bullframe-classless-dark-prefers.scss +0 -2
- package/src/scss/bullframe-classless-dark.scss +0 -2
- package/src/scss/bullframe-classless-system-default.scss +0 -2
- package/src/scss/bullframe-classless.scss +0 -49
- package/src/scss/bullframe-dark-prefers.scss +0 -2
- package/src/scss/bullframe-dark.scss +0 -2
- package/src/scss/bullframe-system-default.scss +0 -2
- package/src/scss/bullframe-utilities.scss +0 -21
- package/src/scss/bullframe.scss +0 -49
- package/src/scss/custom/_author-styles.scss +0 -5
- package/src/scss/forms/_forms-normalization.scss +0 -300
- package/src/scss/forms/_forms-styling-radio-checkbox.scss +0 -81
- package/src/scss/forms/_forms-styling-range.scss +0 -106
- package/src/scss/forms/_forms-styling-select.scss +0 -58
- package/src/scss/forms/_forms-styling.scss +0 -118
- package/src/scss/miscellaneous/_misc-accessibility.scss +0 -36
- package/src/scss/miscellaneous/_misc-anchors.scss +0 -37
- package/src/scss/miscellaneous/_misc-embedded-content.scss +0 -117
- package/src/scss/miscellaneous/_misc-focus.scss +0 -80
- package/src/scss/miscellaneous/_misc-interactive.scss +0 -48
- package/src/scss/miscellaneous/_misc-layout.scss +0 -30
- package/src/scss/miscellaneous/_misc-lists.scss +0 -53
- package/src/scss/miscellaneous/_misc-scrolling.scss +0 -5
- package/src/scss/miscellaneous/_misc-shame.scss +0 -37
- package/src/scss/miscellaneous/_misc-tables.scss +0 -53
- package/src/scss/mixins/_mixin-dark-prefers.scss +0 -413
- package/src/scss/mixins/_mixin-dark.scss +0 -415
- package/src/scss/mixins/_mixin-grid-flex.scss +0 -80
- package/src/scss/mixins/_mixin-layout.scss +0 -42
- package/src/scss/mixins/_mixin-texts.scss +0 -37
- package/src/scss/typography/_typography-blockquotes.scss +0 -28
- package/src/scss/typography/_typography-headings.scss +0 -45
- package/src/scss/typography/_typography-html-body.scss +0 -75
- package/src/scss/typography/_typography-misc.scss +0 -90
- package/src/scss/typography/_typography-monospaced-elements.scss +0 -59
- package/src/scss/utilities/_utility-buttons.scss +0 -73
- package/src/scss/utilities/_utility-debugging.scss +0 -31
- package/src/scss/utilities/_utility-embeds.scss +0 -34
- package/src/scss/utilities/_utility-filters.scss +0 -21
- package/src/scss/utilities/_utility-form-states.scss +0 -89
- package/src/scss/utilities/_utility-global-dark-classless.scss +0 -3
- package/src/scss/utilities/_utility-global-dark-prefers-classless.scss +0 -3
- package/src/scss/utilities/_utility-global-dark-prefers.scss +0 -3
- package/src/scss/utilities/_utility-global-dark-scrollbars.scss +0 -34
- package/src/scss/utilities/_utility-global-dark.scss +0 -4
- package/src/scss/utilities/_utility-global-system-default-classless.scss +0 -3
- package/src/scss/utilities/_utility-global-system-default.scss +0 -3
- package/src/scss/utilities/_utility-grid-system.scss +0 -140
- package/src/scss/utilities/_utility-layout.scss +0 -187
- package/src/scss/utilities/_utility-lists.scss +0 -17
- package/src/scss/utilities/_utility-print.scss +0 -101
- package/src/scss/utilities/_utility-reduced-motion.scss +0 -29
- package/src/scss/utilities/_utility-spacing.scss +0 -148
- package/src/scss/utilities/_utility-tables.scss +0 -34
- package/src/scss/utilities/_utility-texts.scss +0 -225
- package/src/scss/utilities/_utility-z-index.scss +0 -83
- package/src/scss/variables/_variables-breakpoints.scss +0 -6
- package/src/scss/variables/_variables-colors.scss +0 -34
- package/src/scss/variables/_variables-spacing.scss +0 -24
- package/src/scss/variables/_variables-texts.scss +0 -8
- package/vite.config.js +0 -148
package/README.md
CHANGED
|
@@ -1,495 +1,131 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
<p>
|
|
4
|
-
<a href="https://www.npmjs.com/package/bullframe.css">
|
|
5
|
-
<img src="https://img.shields.io/npm/v/bullframe.css.svg?style=flat-square" alt="NPM version">
|
|
6
|
-
</a>
|
|
7
|
-
<a href="https://github.com/marcop135/bullframe.css/commits">
|
|
8
|
-
<img src="https://img.shields.io/github/last-commit/marcop135/bullframe.css.svg?style=flat-square" alt="Last commit">
|
|
9
|
-
</a>
|
|
10
|
-
<a href="https://github.com/marcop135/bullframe.css/blob/master/LICENSE">
|
|
11
|
-
<img src="https://img.shields.io/github/license/marcop135/bullframe.css.svg?style=flat-square" alt="MIT License">
|
|
12
|
-
</a>
|
|
13
|
-
</p>
|
|
14
|
-
|
|
15
|
-
<picture>
|
|
16
|
-
<source media="(prefers-color-scheme: dark)" srcset="src/docs/github-readme/bf-logo-full-dark.png">
|
|
17
|
-
<source media="(prefers-color-scheme: light)" srcset="src/docs/github-readme/bf-logo-full-light.png">
|
|
18
|
-
<img alt="Bullframe CSS logo" src="https://raw.githubusercontent.com/marcop135/bullframe.css/master/src/docs/github-readme/bf-logo-full-light.png">
|
|
19
|
-
</picture>
|
|
20
|
-
|
|
21
|
-
[https://github.com/marcop135/bullframe.css](https://github.com/marcop135/bullframe.css)
|
|
22
|
-
|
|
23
|
-
---
|
|
24
|
-
|
|
25
|
-
## What is Bullframe CSS?
|
|
1
|
+
<div align="center">
|
|
26
2
|
|
|
27
|
-
Bullframe CSS
|
|
3
|
+
|
|
4
|
+
|
|
28
5
|
|
|
29
|
-
|
|
6
|
+
# Bullframe CSS
|
|
30
7
|
|
|
31
|
-
|
|
8
|
+
Semantic by default. Any stack.
|
|
32
9
|
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
## Best Features
|
|
36
|
-
|
|
37
|
-
- Responsive layout and style normalization _out of the box_
|
|
38
|
-
- Cross-browser form elements
|
|
39
|
-
- JavaScript framework-agnostic
|
|
40
|
-
- Sass-based architecture with BEM methodology
|
|
41
|
-
- Responsive typography
|
|
42
|
-
- Dark mode and theming support
|
|
43
|
-
- RTL (right-to-left) support
|
|
44
|
-
- Vite-friendly
|
|
45
|
-
- Works well with classless setups
|
|
10
|
+
</div>
|
|
46
11
|
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
bullframe.css/
|
|
53
|
-
├── dist/
|
|
54
|
-
│ └── css/
|
|
55
|
-
│ ├── bullframe-classless.css
|
|
56
|
-
│ ├── bullframe-classless.min.css
|
|
57
|
-
│ ├── ...
|
|
58
|
-
│ ├── bullframe-dark.css
|
|
59
|
-
│ ├── bullframe-dark.min.css
|
|
60
|
-
│ ├── ...
|
|
61
|
-
│ ├── bullframe-utilities.css
|
|
62
|
-
│ ├── bullframe-utilities.min.css
|
|
63
|
-
│ ├── ...
|
|
64
|
-
│ ├── bullframe.css
|
|
65
|
-
│ ├── bullframe.min.css
|
|
66
|
-
│ ├── ...
|
|
67
|
-
│ ├── bullframe-classless.css.map
|
|
68
|
-
│ ├── bullframe.min.css.map
|
|
69
|
-
│ ├── ...
|
|
70
|
-
├── src/scss/
|
|
71
|
-
│ ├── forms/
|
|
72
|
-
│ ├── miscellaneous/
|
|
73
|
-
│ ├── mixins/
|
|
74
|
-
│ ├── typography/
|
|
75
|
-
│ ├── utilities/
|
|
76
|
-
│ ├── variables/
|
|
77
|
-
│ ├── bullframe-classless.scss
|
|
78
|
-
│ ├── bullframe-dark.scss
|
|
79
|
-
│ ├── bullframe-utilities.scss
|
|
80
|
-
│ ├── bullframe-system-default.scss
|
|
81
|
-
│ ├── bullframe.scss
|
|
82
|
-
│ └── ...
|
|
83
|
-
├── vite.config.js
|
|
84
|
-
├── index.html
|
|
85
|
-
└── ...
|
|
86
|
-
```
|
|
87
|
-
|
|
88
|
-
---
|
|
89
|
-
|
|
90
|
-
## Live Demo & Examples
|
|
91
|
-
|
|
92
|
-
- 👉 **[One-page demo](https://bullframecss.marcopontili.com)**: a complete showcase of styled HTML elements, form controls, lists, tables, media, and the responsive grid system — ideal for quick cross-browser testing and exploration
|
|
93
|
-
- 🧪 **[CodePen collection](https://codepen.io/collection/nxpjRe?grid_type=LIST)**: live examples of utilities, components, and prototypes — great for quick testing, remixing, and sharing ideas.
|
|
12
|
+
<p align="center">
|
|
13
|
+
<a href="https://www.npmjs.com/package/bullframe.css"><img src="https://img.shields.io/npm/v/bullframe.css.svg?style=flat-square" alt="npm version"></a>
|
|
14
|
+
<a href="https://github.com/marcop135/bullframe.css/actions/workflows/ci.yml"><img src="https://img.shields.io/github/actions/workflow/status/marcop135/bullframe.css/ci.yml?branch=main&style=flat-square" alt="CI status"></a>
|
|
15
|
+
<a href="LICENSE"><img src="https://img.shields.io/github/license/marcop135/bullframe.css.svg?style=flat-square" alt="MIT License"></a>
|
|
16
|
+
</p>
|
|
94
17
|
|
|
95
18
|
---
|
|
96
19
|
|
|
97
|
-
|
|
20
|
+
One-stylesheet CSS framework for plain HTML: no build step, no JavaScript. Typography, forms, tables, buttons, and layout out of the box.
|
|
98
21
|
|
|
99
|
-
|
|
22
|
+
Light or dark. Built for pages and forms: landings, docs, help centers, and marketing microsites.
|
|
100
23
|
|
|
24
|
+
<!-- sri:cdn:start -->
|
|
101
25
|
```html
|
|
102
|
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bullframe.css
|
|
26
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bullframe.css">
|
|
103
27
|
```
|
|
28
|
+
<!-- sri:cdn:end -->
|
|
104
29
|
|
|
105
|
-
|
|
30
|
+
[Check the docs →](https://bullframecss.marcopontili.com/)
|
|
106
31
|
|
|
107
|
-
|
|
32
|
+
## Features
|
|
108
33
|
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
34
|
+
- Plain HTML looks finished before you write a class
|
|
35
|
+
- Classless when you want clean markup; classes when you need layout control
|
|
36
|
+
- Light and dark out of the box, no theme script
|
|
37
|
+
- One stylesheet, about 8 kB gzipped: type, forms, tables, buttons, layout
|
|
38
|
+
- Restyle the whole page by changing a few colour tokens
|
|
39
|
+
- Accessibility built in: clear focus, reduced motion respect, WCAG AA defaults
|
|
40
|
+
- Works with any stack: drop it on a landing, docs site, or help center
|
|
41
|
+
- npm or CDN; nothing to compile to use it
|
|
115
42
|
|
|
116
|
-
|
|
117
|
-
</head>
|
|
118
|
-
<body>
|
|
119
|
-
<div class="bf-container">
|
|
120
|
-
<!-- Add your site or application content here -->
|
|
121
|
-
<p>Hello World! This is a Bullframe CSS v5.x HTML starter template.</p>
|
|
122
|
-
</div>
|
|
123
|
-
</body>
|
|
124
|
-
</html>
|
|
43
|
+
## Examples
|
|
125
44
|
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
### HTML Classless Starter Template
|
|
129
|
-
|
|
130
|
-
> [!NOTE]
|
|
131
|
-
> What does "classless" mean?
|
|
132
|
-
> No utility classes or extra markup needed. Just write semantic HTML and get clean, normalized styles.
|
|
133
|
-
|
|
134
|
-
<details><summary>Open HTML</summary>
|
|
135
|
-
|
|
136
|
-
<!DOCTYPE html>
|
|
137
|
-
<html lang="en">
|
|
138
|
-
<head>
|
|
139
|
-
<meta charset="utf-8">
|
|
140
|
-
<title>Bullframe CSS 5.x Classless Starter Template</title>
|
|
141
|
-
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
|
142
|
-
|
|
143
|
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bullframe.css@5/dist/css/bullframe-classless.min.css">
|
|
144
|
-
|
|
145
|
-
<!-- Optional: center page content by default -->
|
|
146
|
-
<style>
|
|
147
|
-
body {
|
|
148
|
-
margin-left: auto;
|
|
149
|
-
margin-right: auto;
|
|
150
|
-
padding: 1.5rem;
|
|
151
|
-
max-width: 80rem;
|
|
152
|
-
}
|
|
153
|
-
</style>
|
|
154
|
-
</head>
|
|
155
|
-
<body>
|
|
156
|
-
<div class="bf-container">
|
|
157
|
-
<!-- Add your site or application content here -->
|
|
158
|
-
<p>Hello World! This is a Bullframe CSS v5.x HTML classless starter template.</p>
|
|
159
|
-
</div>
|
|
160
|
-
</body>
|
|
161
|
-
</html>
|
|
45
|
+
Ready to copy: landings, blogs, forms, docs. Plain HTML, one stylesheet.
|
|
162
46
|
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
47
|
+
<table>
|
|
48
|
+
<tr>
|
|
49
|
+
<td><a href="https://bullframecss.marcopontili.com/examples/typography/"><img src="src/docs/examples/screenshots/typography.png" alt="Typography" style="border: 1px solid #999; border-radius: 10px;" /></a></td>
|
|
50
|
+
<td><a href="https://bullframecss.marcopontili.com/examples/album/"><img src="src/docs/examples/screenshots/album.png" alt="Album" style="border: 1px solid #999; border-radius: 10px;" /></a></td>
|
|
51
|
+
</tr>
|
|
52
|
+
<tr>
|
|
53
|
+
<td><a href="https://bullframecss.marcopontili.com/examples/pricing/"><img src="src/docs/examples/screenshots/pricing.png" alt="Pricing" style="border: 1px solid #999; border-radius: 10px;" /></a></td>
|
|
54
|
+
<td><a href="https://bullframecss.marcopontili.com/examples/branded/"><img src="src/docs/examples/screenshots/branded.png" alt="Branded" style="border: 1px solid #999; border-radius: 10px;" /></a></td>
|
|
55
|
+
</tr>
|
|
56
|
+
<tr>
|
|
57
|
+
<td><a href="https://bullframecss.marcopontili.com/examples/blog/"><img src="src/docs/examples/screenshots/blog.png" alt="Blog" style="border: 1px solid #999; border-radius: 10px;" /></a></td>
|
|
58
|
+
<td><a href="https://bullframecss.marcopontili.com/examples/cover/"><img src="src/docs/examples/screenshots/cover.png" alt="Cover" style="border: 1px solid #999; border-radius: 10px;" /></a></td>
|
|
59
|
+
</tr>
|
|
60
|
+
</table>
|
|
166
61
|
|
|
167
|
-
|
|
62
|
+
[Browse all examples →](https://bullframecss.marcopontili.com/examples)
|
|
168
63
|
|
|
169
|
-
|
|
64
|
+
## Install
|
|
170
65
|
|
|
171
66
|
```bash
|
|
172
67
|
npm install bullframe.css
|
|
173
68
|
```
|
|
174
69
|
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
### Download
|
|
178
|
-
|
|
179
|
-
[Download the latest release](https://github.com/marcop135/bullframe.css/archive/master.zip)
|
|
180
|
-
|
|
181
|
-
---
|
|
182
|
-
|
|
183
|
-
## Customization
|
|
184
|
-
|
|
185
|
-
### Theming
|
|
186
|
-
|
|
187
|
-
Bullframe provides three builds for theming:
|
|
188
|
-
|
|
189
|
-
1. `bullframe.css` — light theme
|
|
190
|
-
2. `bullframe-dark.css` — dark theme
|
|
191
|
-
3. `bullframe-system-default.css` — theme based on user system preference ([`prefers-color-scheme`](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme))
|
|
192
|
-
|
|
193
|
-
#### Light Theme CDN (Default)
|
|
194
|
-
|
|
195
|
-
```html
|
|
196
|
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bullframe.css@5/dist/css/bullframe.min.css">
|
|
70
|
+
```js
|
|
71
|
+
import 'bullframe.css';
|
|
197
72
|
```
|
|
198
73
|
|
|
199
|
-
|
|
74
|
+
Default import: class-based, light. Other builds: `bullframe.css/classless`, `bullframe.css/dark`, and so on. See [Builds](#builds) below.
|
|
200
75
|
|
|
201
|
-
|
|
202
|
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bullframe.css@5/dist/css/bullframe-dark.min.css">
|
|
203
|
-
```
|
|
204
|
-
|
|
205
|
-
#### System-default Theme CDN
|
|
76
|
+
### CDN
|
|
206
77
|
|
|
207
78
|
```html
|
|
208
|
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bullframe.css
|
|
79
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bullframe.css">
|
|
209
80
|
```
|
|
210
81
|
|
|
211
|
-
|
|
82
|
+
Always the latest release. Swap the path for another build (e.g. `bullframe.css/dist/css/bullframe-classless.min.css`).
|
|
212
83
|
|
|
213
|
-
|
|
84
|
+
## Builds
|
|
214
85
|
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
npm run build
|
|
86
|
+
<details>
|
|
87
|
+
<summary>See all 7 variants</summary>
|
|
218
88
|
|
|
219
|
-
|
|
220
|
-
npm run preview
|
|
221
|
-
```
|
|
89
|
+
Seven files in `dist/css/`, each with a minified twin and a source map. Pick one; do not combine them, except utilities on top of another build.
|
|
222
90
|
|
|
223
|
-
|
|
91
|
+
| Build | npm subpath | Use when |
|
|
92
|
+
| ---------------------------------------- | -------------------------------- | ------------------------------------ |
|
|
93
|
+
| `bullframe.css` | `bullframe.css` | Class-based, light |
|
|
94
|
+
| `bullframe-dark.css` | `bullframe.css/dark` | Class-based, always dark |
|
|
95
|
+
| `bullframe-system-default.css` | `bullframe.css/system` | Class-based, `prefers-color-scheme` |
|
|
96
|
+
| `bullframe-classless.css` | `bullframe.css/classless` | Classless, light |
|
|
97
|
+
| `bullframe-classless-dark.css` | `bullframe.css/classless/dark` | Classless, always dark |
|
|
98
|
+
| `bullframe-classless-system-default.css` | `bullframe.css/classless/system` | Classless, `prefers-color-scheme` |
|
|
99
|
+
| `bullframe-utilities.css` | `bullframe.css/utilities` | `.bf-*` helpers only, no base styles |
|
|
224
100
|
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
Bullframe CSS offers a set of utility classes for fine-grained control over your layout, spacing, typography, and more. Explore each category below for detailed reference.
|
|
228
|
-
|
|
229
|
-
#### Grid system
|
|
230
|
-
|
|
231
|
-
<details><summary>Open utilities</summary>
|
|
232
|
-
|
|
233
|
-
| Variable | Value |
|
|
234
|
-
| -------------------- | ------ |
|
|
235
|
-
| `$bf-breakpoint-xs` | 0 |
|
|
236
|
-
| `$bf-breakpoint-sm` | 576px |
|
|
237
|
-
| `$bf-breakpoint-md` | 768px |
|
|
238
|
-
| `$bf-breakpoint-lg` | 992px |
|
|
239
|
-
| `$bf-breakpoint-xl` | 1200px |
|
|
240
|
-
| `$bf-breakpoint-xxl` | 1400px |
|
|
241
|
-
|
|
242
|
-
| Utility class | Description |
|
|
243
|
-
| ------------------------- | ------------------------------------------------------------------------------------------------------------------------- |
|
|
244
|
-
| `.bf-container` | Sets a centered block container with a `max-width` of 1140px, and a custom padding |
|
|
245
|
-
| `.bf-container--fluid` | Sets a fluid centered block container with a custom padding |
|
|
246
|
-
| `.bf-container--break-xs` | Collapses all the columns when the viewport is 575px and below |
|
|
247
|
-
| `.bf-container--break-md` | Collapses all the columns when the viewport is 767px and below |
|
|
248
|
-
| `.bf-container--break-lg` | Collapses all the columns when the viewport is 991px and below |
|
|
249
|
-
| `.bf-row` | Sets a block container with a custom negative margin |
|
|
250
|
-
| `.bf-col-1` | Sets a floated container with a custom padding and a `width` of `8.3333%` |
|
|
251
|
-
| `.bf-col-2` | Sets a floated container with a custom padding and a `width` of `16.666666666666664%` |
|
|
252
|
-
| `.bf-col-3` | Sets a floated container with a custom padding and a `width` of `25%` |
|
|
253
|
-
| `.bf-col-4` | Sets a floated container with a custom padding and a `width` of `33.33333333333333%` |
|
|
254
|
-
| `.bf-col-5` | Sets a floated container with a custom padding and a `width` of `41.66666666666667%` |
|
|
255
|
-
| `.bf-col-6` | Sets a floated container with a custom padding and a `width` of `50%` |
|
|
256
|
-
| `.bf-col-7` | Sets a floated container with a custom padding and a `width` of `58.333333333333336%` |
|
|
257
|
-
| `.bf-col-8` | Sets a floated container with a custom padding and a `width` of `66.66666666666666%` |
|
|
258
|
-
| `.bf-col-9` | Sets a floated container with a custom padding and a `width` of `75%` |
|
|
259
|
-
| `.bf-col-10` | Sets a floated container with a custom padding and a `width` of `83.33333333333334%` |
|
|
260
|
-
| `.bf-col-11` | Sets a floated container with a custom padding and a `width` of `91.66666666666666%` |
|
|
261
|
-
| `.bf-col-12` | Sets a floated container with a custom padding and a `width` of `100%` |
|
|
262
|
-
| `.no-gutters` | Set `margin-left`, `margin-right`, `padding-left` and `padding-right` to `0` — to be applied to row and column containers |
|
|
101
|
+
**Classless** styles HTML tags only (no `.bf-*` classes). **Class-based** adds `.bf-*` grid, spacing, and helpers on top.
|
|
263
102
|
|
|
264
103
|
</details>
|
|
265
104
|
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
<details><summary>Open utilities</summary>
|
|
269
|
-
|
|
270
|
-
| Utility class | Description |
|
|
271
|
-
| ---------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
272
|
-
| `.bf-clearfix` | Clears the float, [read more](http://nicolasgallagher.com/micro-clearfix-hack/) |
|
|
273
|
-
| `.bf-hide` | Sets the `display` to `none` |
|
|
274
|
-
| `.bf-hidden` | Sets the `display` to `none` and the `visibility` to `hidden` |
|
|
275
|
-
| `.bf-text-hide` | Hides a text (AKA CSS image replacement) using a font `hack` and a combination o properties |
|
|
276
|
-
| `.bf-sr-only` | Shows a text only if screen reader |
|
|
277
|
-
| `.bf-sr-only.focusable` | Shows a text only if screen reader and focused |
|
|
278
|
-
| `.bf-invisible` | Sets the `visibility` to `hidden` |
|
|
279
|
-
| `.bf-visible` | Sets the `visibility` to `visible` |
|
|
280
|
-
| `.bf-display-block` | Sets the `display` to `block` |
|
|
281
|
-
| `.bf-display-block-center` | Sets the `display` to `block`, the left/right margins to `auto` and `text-align` to center |
|
|
282
|
-
| `.bf-display-inline` | Sets the `display` to `inline` |
|
|
283
|
-
| `.bf-display-inline-block` | Sets the `display` to `inline-block` |
|
|
284
|
-
| `.bf-display-flex` | Sets the `display` to `flex` |
|
|
285
|
-
| `.bf-display-inline-flex` | Sets the `display` to `inline-flex` |
|
|
286
|
-
| `.bf-display-flex--justify-start` | Sets `justify-content` to `flex-start` |
|
|
287
|
-
| `.bf-display-flex--justify-end` | Sets `justify-content` to `flex-end` |
|
|
288
|
-
| `.bf-display-flex--justify-center` | Sets `justify-content` to `center` |
|
|
289
|
-
| `.bf-display-flex--wrap` | Sets `flex-wrap` to `wrap` |
|
|
290
|
-
| `.bf-display-flex--nowrap` | Sets `flex-wrap` to `nowrap` |
|
|
291
|
-
| `.bf-float-left` | Sets the `float` to `left` |
|
|
292
|
-
| `.bf-float-right` | Sets the `float` to `right` |
|
|
293
|
-
| `.bf-position-fixed` | Sets the `position` to `fixed` |
|
|
294
|
-
| `.bf-align-center-unknown` | Sets the `position` to `relative` |
|
|
295
|
-
| `.bf-align-center-unknown--item` | Centers an element with unknown height and width to a relative positioned parent, IE10+, [read more](https://css-tricks.com/centering-css-complete-guide) |
|
|
296
|
-
| `.bf-align-center-flex` | Centers all elements with known height and width to a flexbox container, IE10+, [read more](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container) |
|
|
297
|
-
| `.bf-width-25` | Sets the `width` to `25%` |
|
|
298
|
-
| `.bf-width-33` | Sets the `width` to `33.33333333333333%` |
|
|
299
|
-
| `.bf-width-50` | Sets the `width` to `50%` |
|
|
300
|
-
| `.bf-width-75` | Sets the `width` to `75%` |
|
|
301
|
-
| `.bf-width-100` | Sets the `width` to `100%` |
|
|
302
|
-
| `.bf-width-auto` | Sets the `width` to `auto` |
|
|
303
|
-
| `.bf-z-index-1` | Set `z-index` to 1 |
|
|
304
|
-
| `.bf-z-index-2` | Set `z-index` to 2 |
|
|
305
|
-
| `.bf-z-index-3` | Set `z-index` to 3 |
|
|
306
|
-
| `.bf-z-index-4` | Set `z-index` to 4 |
|
|
307
|
-
| `.bf-z-index-5` | Set `z-index` to 5 |
|
|
308
|
-
| `.bf-z-index-6` | Set `z-index` to 6 |
|
|
309
|
-
| `.bf-z-index-7` | Set `z-index` to 7 |
|
|
310
|
-
| `.bf-z-index-8` | Set `z-index` to 8 |
|
|
311
|
-
| `.bf-z-index-9` | Set `z-index` to 9 |
|
|
312
|
-
| `.bf-z-index-10` | Set `z-index` to 10 |
|
|
313
|
-
| `.bf-z-index-20` | Set `z-index` to 20 |
|
|
314
|
-
| `.bf-z-index-30` | Set `z-index` to 30 |
|
|
315
|
-
| `.bf-z-index-40` | Set `z-index` to 40 |
|
|
316
|
-
| `.bf-z-index-50` | Set `z-index` to 50 |
|
|
317
|
-
| `.bf-z-index-60` | Set `z-index` to 60 |
|
|
318
|
-
| `.bf-z-index-70` | Set `z-index` to 70 |
|
|
319
|
-
| `.bf-z-index-80` | Set `z-index` to 80 |
|
|
320
|
-
| `.bf-z-index-90` | Set `z-index` to 90 |
|
|
321
|
-
| `.bf-z-index-100` | Set `z-index` to 100 |
|
|
322
|
-
| `.bf-z-index-200` | Set `z-index` to 200 |
|
|
323
|
-
| `.bf-z-index-300` | Set `z-index` to 300 |
|
|
324
|
-
|
|
325
|
-
</details>
|
|
105
|
+
## Documentation
|
|
326
106
|
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
|
|
|
332
|
-
|
|
|
333
|
-
|
|
|
334
|
-
|
|
|
335
|
-
|
|
|
336
|
-
|
|
|
337
|
-
|
|
|
338
|
-
| `.bf-m-t-4` | Sets the `margin-top` to a custom extra extra large spacing value (`$bf-spacing-xxl-rem`) |
|
|
339
|
-
| `.bf-m-b-0` | Sets the `margin-bottom` to `0` |
|
|
340
|
-
| `.bf-m-b-1` | Sets the `margin-bottom` to a custom value that matches the grid system gutter |
|
|
341
|
-
| `.bf-m-b-2` | Sets the `margin-bottom` to a custom value |
|
|
342
|
-
| `.bf-m-b-3` | Sets the `margin-bottom` to a custom value |
|
|
343
|
-
| `.bf-m-b-4` | Sets the `margin-bottom` to a custom value |
|
|
344
|
-
| `.bf-m-l-0` | Sets the `margin-left` to `0` |
|
|
345
|
-
| `.bf-m-r-0` | Sets the `margin-right` to `0` |
|
|
346
|
-
| `.bf-p-0` | Sets the `padding` to `0` |
|
|
347
|
-
| `.bf-p-t-0` | Sets the `padding-top` to `0` |
|
|
348
|
-
| `.bf-p-b-0` | Sets the `padding-bottom` to `0` |
|
|
349
|
-
| `.bf-p-l-0` | Sets the `padding-left` to `0` |
|
|
350
|
-
| `.bf-p-r-0` | Sets the `padding-right` to `0` |
|
|
351
|
-
| `.bf-p-t-1` | Sets the `padding-top` to a custom value that matches the grid system gutter |
|
|
352
|
-
| `.bf-p-t-2` | Sets the `padding-top` to a custom value |
|
|
353
|
-
| `.bf-p-t-3` | Sets the `padding-top` to a custom value |
|
|
354
|
-
| `.bf-p-t-4` | Sets the `padding-top` to a custom value |
|
|
355
|
-
| `.bf-p-t-1` | Sets the `padding-bottom` to a custom value that matches the grid system gutter |
|
|
356
|
-
| `.bf-p-b-2` | Sets the `padding-bottom` to a custom value |
|
|
357
|
-
| `.bf-p-b-3` | Sets the `padding-bottom` to a custom value |
|
|
358
|
-
| `.bf-p-b-4` | Sets the `padding-bottom` to a custom value |
|
|
359
|
-
|
|
360
|
-
</details>
|
|
361
|
-
|
|
362
|
-
#### Texts
|
|
363
|
-
|
|
364
|
-
<details><summary>Open utilities</summary>
|
|
365
|
-
|
|
366
|
-
| Utility class | Description |
|
|
367
|
-
| ----------------------------- | ------------------------------------------------------------------------------------------------------------------------------- |
|
|
368
|
-
| `.bf-t-transform-uppercase` | Sets `transform` to a `uppercase` (AKA capitalizes a text) |
|
|
369
|
-
| `.bf-t-transform-none` | Sets `transform` to a `none` |
|
|
370
|
-
| `.bf-t-left` | Sets `text-align` to a `left` |
|
|
371
|
-
| `.bf-t-center` | Sets `text-align` to a `center` |
|
|
372
|
-
| `.bf-t-right` | Sets `text-align` to a `right` |
|
|
373
|
-
| `.bf-t-shadow` | Sets a basic text shadow |
|
|
374
|
-
| `.bf-t-italic` | Sets `font-style` to a `italic` |
|
|
375
|
-
| `.bf-t-style-normal` | Sets `font-style` to a `normal` |
|
|
376
|
-
| `.bf-t-weight-300` | Sets `font-weight` to `300` (AKA light) |
|
|
377
|
-
| `.bf-t-weight-400` | Sets `font-weight` to `400` (AKA normal) |
|
|
378
|
-
| `.bf-t-weight-500` | Sets `font-weight` to `500` (AKA medium) |
|
|
379
|
-
| `.bf-t-weight-600` | Sets `font-weight` to `600` (AKA semi-bold) |
|
|
380
|
-
| `.bf-t-weight-700` | Sets `font-weight` to `700` (AKA bold) |
|
|
381
|
-
| `.bf-t-weight-800` | Sets `font-weight` to `800` (AKA black) |
|
|
382
|
-
| `.bf-text-break` | Sets `word-wrap` to a `break-word`, applied by default to the `body` |
|
|
383
|
-
| `.bf-t-truncate` | Truncates a very long text and replaces the missing text with an ellipsis |
|
|
384
|
-
| `.bf-t-truncate--multiline-2` | Truncates a long doubled line text and replaces the missing text with an ellipsis (no IE) |
|
|
385
|
-
| `.bf-t-truncate--multiline-3` | Truncates a long tripled line text and replaces the missing text with an ellipsis (no IE) |
|
|
386
|
-
| `.bf-no-select` | Blocks user text selection |
|
|
387
|
-
| `.bf-font-sans-serif` | Sets `font-family` to a `sans-serif`, and a combination of cross-browser system UI sans-serif font families |
|
|
388
|
-
| `.bf-font-serif` | Sets `font-family` to a `serif`, and a combination of cross-browser system UI serif font families |
|
|
389
|
-
| `.bf-font-monospace` | Sets `font-family` to a `monospace`, a combination of widely supported monospaced font families |
|
|
390
|
-
| `.bf-h1` | Matches the font styling of a `h1` |
|
|
391
|
-
| `.bf-h2` | Matches the font styling of a `h2` |
|
|
392
|
-
| `.bf-h3` | Matches the font styling of a `h3` |
|
|
393
|
-
| `.bf-h4` | Matches the font styling of a `h4` |
|
|
394
|
-
| `.bf-h5` | Matches the font styling of a `h5` |
|
|
395
|
-
| `.bf-h6` | Matches the font styling of a `h6` |
|
|
396
|
-
| `.bf-lead` | Sets `font-size` to `125%` |
|
|
397
|
-
| `.bf-responsive-typography` | Scales `font-size` from a minimum of `1.6rem` (AKA 16px) to a maximum of `1.9rem` using `calc` and some `CSS custom properties` |
|
|
398
|
-
|
|
399
|
-
</details>
|
|
400
|
-
|
|
401
|
-
#### Lists
|
|
402
|
-
|
|
403
|
-
<details><summary>Open utilities</summary>
|
|
404
|
-
|
|
405
|
-
| Utility class | Description |
|
|
406
|
-
| ------------------- | -------------------------------------------------------------------------------- |
|
|
407
|
-
| `.bf-list-unstyled` | Removes margins, paddings and `li` list styles from `ul`, `ol` and `dd` elements |
|
|
408
|
-
|
|
409
|
-
#### Tables
|
|
410
|
-
|
|
411
|
-
| Utility class | Description |
|
|
412
|
-
| ----------------------------- | ------------------------------------------------------------------------ |
|
|
413
|
-
| `.bf-table` | Sets a border and custom paddings and margins to a table |
|
|
414
|
-
| `.bf-table-responsive` | Adds responsiveness to a table container |
|
|
415
|
-
| `.bf-table--zebra` | Increases a table readability adding horizontal zebra stripes |
|
|
416
|
-
| `.bf-table-responsive--zebra` | Increases a responsive table readability adding horizontal zebra stripes |
|
|
417
|
-
|
|
418
|
-
</details>
|
|
419
|
-
|
|
420
|
-
#### Embeds
|
|
421
|
-
|
|
422
|
-
<details><summary>Open utilities</summary>
|
|
423
|
-
|
|
424
|
-
| Utility class | Description |
|
|
425
|
-
| ---------------------------- | --------------------------------------------------------------------------------------------------------------------------------------- |
|
|
426
|
-
| `.bf-embed-responsive` | Adds responsiveness to an `iframe`, `embed`, `object`, `video` or _general purpouse element_ (e.g. youtube embed) |
|
|
427
|
-
| `.bf-embed-responsive--4-3` | Sets a 4:3 ratio responsiveness to an `iframe`, `embed`, `object`, `video` or _general purpouse element_ container (e.g. youtube embed) |
|
|
428
|
-
| `.bf-embed-responsive--item` | A _general purpouse element_ element that behaves like a `video` |
|
|
429
|
-
|
|
430
|
-
</details>
|
|
431
|
-
|
|
432
|
-
#### Buttons
|
|
433
|
-
|
|
434
|
-
<details><summary>Open utilities</summary>
|
|
435
|
-
|
|
436
|
-
| Utility class | Description |
|
|
437
|
-
| ------------------ | ------------------------------------------------------------------------------------ |
|
|
438
|
-
| `.bf-btn` | Creates a standard gray-looking button (e.g. `<a class="bf-btn" href="...">...</a>`) |
|
|
439
|
-
| `.bf-btn--primary` | Creates a primary blue-looking button |
|
|
440
|
-
|
|
441
|
-
</details>
|
|
442
|
-
|
|
443
|
-
#### Form states
|
|
444
|
-
|
|
445
|
-
<details><summary>Open utilities</summary>
|
|
446
|
-
|
|
447
|
-
| Utility class | Description |
|
|
448
|
-
| -------------- | ---------------------------------------------------------------------------------------------------- |
|
|
449
|
-
| `.bf-focused` | Sets a blue-looking focused ring and shadow around an `input`, `textarea` or `select` |
|
|
450
|
-
| `.bf-disabled` | Sets `opacity` to `0.5`, and resets a combinations of properties to the default value if is disabled |
|
|
451
|
-
| `.bf-invalid` | Sets a red-looking focused ring and shadow around an invalid `input`, `textarea` or `select` |
|
|
452
|
-
|
|
453
|
-
</details>
|
|
454
|
-
|
|
455
|
-
#### Reduced motion
|
|
456
|
-
|
|
457
|
-
<details><summary>Open utilities</summary>
|
|
458
|
-
|
|
459
|
-
| Utility class | Description |
|
|
460
|
-
| -------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
461
|
-
| `.bf-reduced-motion` | Adds a combinations of properties and values to an element (e.g. the `body`) removing all motion-based animations if preferred by the user, [read more](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion) |
|
|
462
|
-
|
|
463
|
-
</details>
|
|
464
|
-
|
|
465
|
-
---
|
|
466
|
-
|
|
467
|
-
## Browser compatibility
|
|
468
|
-
|
|
469
|
-
### Desktop browsers
|
|
470
|
-
|
|
471
|
-
- Latest two stable versions: Firefox, Chrome, Edge, Safari, Opera
|
|
472
|
-
|
|
473
|
-
### Mobile browsers
|
|
474
|
-
|
|
475
|
-
- Latest two stable versions: Firefox, Chrome, Edge, Mobile Safari, Opera
|
|
476
|
-
|
|
477
|
-
You can check the [.browserslistrc](https://github.com/marcop135/bullframe.css/blob/master/.browserslistrc) file.
|
|
478
|
-
|
|
479
|
-
---
|
|
107
|
+
| Topic | |
|
|
108
|
+
| ----- | --- |
|
|
109
|
+
| [Docs](https://bullframecss.marcopontili.com/) | Home |
|
|
110
|
+
| [Getting started](https://bullframecss.marcopontili.com/getting-started) | Install and pick a build |
|
|
111
|
+
| [Examples](https://bullframecss.marcopontili.com/examples) | Page templates |
|
|
112
|
+
| [Kitchen sink](https://bullframecss.marcopontili.com/kitchen-sink/) | Every element in one place |
|
|
113
|
+
| [Variables](https://bullframecss.marcopontili.com/variables) | `--bf-*` tokens |
|
|
114
|
+
| [Components](https://bullframecss.marcopontili.com/components/) | Cards, modals, navigation, buttons |
|
|
115
|
+
| [Theming](https://bullframecss.marcopontili.com/theming) | Colours and dark mode |
|
|
116
|
+
| [API reference](https://bullframecss.marcopontili.com/api-reference) | Full token and class list |
|
|
117
|
+
| [Changelog](./CHANGELOG.md) | Release notes |
|
|
480
118
|
|
|
481
119
|
## Contributing
|
|
482
120
|
|
|
483
|
-
|
|
121
|
+
See [CONTRIBUTING.md](./.github/CONTRIBUTING.md).
|
|
484
122
|
|
|
485
|
-
|
|
123
|
+
Bugs → [issues](https://github.com/marcop135/bullframe.css/issues).
|
|
486
124
|
|
|
487
|
-
|
|
125
|
+
## License
|
|
126
|
+
|
|
127
|
+
[MIT](./LICENSE)
|
|
488
128
|
|
|
489
129
|
## Author
|
|
490
130
|
|
|
491
131
|
[Marco Pontili](https://marcopontili.com)
|
|
492
|
-
|
|
493
|
-
## License
|
|
494
|
-
|
|
495
|
-
This project is licensed under the [MIT License](LICENSE).
|