bullframe.css 5.0.1 → 6.0.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 +276 -234
- package/LICENSE +2 -2
- package/README.md +34 -455
- package/dist/css/bullframe-classless-dark.css +1218 -932
- 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 +1316 -936
- 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 +1038 -715
- 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 +1943 -1459
- 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 +2005 -1489
- 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 +769 -491
- 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 +1911 -1383
- 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 +71 -29
- 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/css/bullframe-classless-dark-prefers.css +0 -1340
- 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 -2356
- 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/css/style.css +0 -131
- package/dist/docs/demo/icons/android-chrome-192x192.png +0 -0
- package/dist/docs/demo/icons/android-chrome-384x384.png +0 -0
- package/dist/docs/demo/icons/apple-touch-icon.png +0 -0
- package/dist/docs/demo/icons/favicon-16x16.png +0 -0
- package/dist/docs/demo/icons/favicon-32x32.png +0 -0
- package/dist/docs/demo/icons/favicon.ico +0 -0
- package/dist/docs/demo/icons/mstile-150x150.png +0 -0
- package/dist/docs/demo/icons/safari-pinned-tab.svg +0 -28
- package/dist/docs/demo/images/logo.png +0 -0
- package/dist/docs/demo/images/placeholder-img-130x140.jpg +0 -0
- package/dist/docs/demo/images/placeholder-img-16x16.jpg +0 -0
- package/dist/docs/demo/images/placeholder-img-800x400.jpg +0 -0
- package/dist/docs/demo/images/video-poster.png +0 -0
- package/dist/docs/demo/index.html +0 -1152
- package/dist/docs/github-readme/bf-logo-full-dark.png +0 -0
- package/dist/docs/github-readme/bf-logo-full-light.png +0 -0
- package/prettier.config.js +0 -26
- package/src/docs/demo/css/style.css +0 -131
- 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 +0 -28
- 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 +0 -1152
- 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 +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 -316
- package/src/scss/forms/_forms-styling-radio-checkbox.scss +0 -82
- package/src/scss/forms/_forms-styling-range.scss +0 -113
- package/src/scss/forms/_forms-styling-select.scss +0 -65
- package/src/scss/forms/_forms-styling.scss +0 -131
- 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 -79
- 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 -414
- package/src/scss/mixins/_mixin-dark.scss +0 -396
- 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 -116
package/LICENSE
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
MIT License
|
|
2
2
|
|
|
3
|
-
Copyright (c)
|
|
3
|
+
Copyright (c) 2013-2026 Marco Pontili
|
|
4
4
|
|
|
5
5
|
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
6
|
of this software and associated documentation files (the "Software"), to deal
|
|
@@ -18,4 +18,4 @@ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
|
18
18
|
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
19
|
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
20
|
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
-
SOFTWARE.
|
|
21
|
+
SOFTWARE.
|
package/README.md
CHANGED
|
@@ -1,487 +1,66 @@
|
|
|
1
|
-
|
|
1
|
+
<div align="center">
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
|
|
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="dist/docs/github-readme/bf-logo-full-dark.png">
|
|
17
|
-
<source media="(prefers-color-scheme: light)" srcset="dist/docs/github-readme/bf-logo-full-light.png">
|
|
18
|
-
<img alt="Bullframe CSS logo" src="dist/docs/github-readme/bg-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?
|
|
26
|
-
|
|
27
|
-
Bullframe CSS is a lightweight, modern Sass (SCSS) framework designed for fast, responsive, and accessible front-end development.
|
|
3
|
+
|
|
4
|
+
|
|
28
5
|
|
|
29
|
-
|
|
6
|
+
# Bullframe CSS
|
|
30
7
|
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
---
|
|
34
|
-
|
|
35
|
-
## Best Features
|
|
36
|
-
|
|
37
|
-
- Desktop and mobile browser support
|
|
38
|
-
- Responsive layout and style normalization _out of the box_
|
|
39
|
-
- Cross-browser form elements
|
|
40
|
-
- JavaScript framework-agnostic
|
|
41
|
-
- Sass-based architecture with BEM methodology
|
|
42
|
-
- Responsive typography
|
|
43
|
-
- Dark mode and theming support
|
|
44
|
-
- RTL (right-to-left) support
|
|
45
|
-
- Vite-friendly
|
|
46
|
-
- Works well with classless setups
|
|
47
|
-
|
|
48
|
-
---
|
|
8
|
+
Semantic by default. Any stack.<br>
|
|
9
|
+
<em>Classless when you want it. System dark built in.</em>
|
|
49
10
|
|
|
50
|
-
|
|
11
|
+
</div>
|
|
51
12
|
|
|
52
|
-
|
|
53
|
-
bullframe.css/
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
│ ├── bullframe-dark.css
|
|
60
|
-
│ ├── bullframe-dark.min.css
|
|
61
|
-
│ ├── ...
|
|
62
|
-
│ ├── bullframe-utilities.css
|
|
63
|
-
│ ├── bullframe-utilities.min.css
|
|
64
|
-
│ ├── ...
|
|
65
|
-
│ ├── bullframe.css
|
|
66
|
-
│ ├── bullframe.min.css
|
|
67
|
-
│ ├── ...
|
|
68
|
-
│ ├── bullframe-classless.css.map
|
|
69
|
-
│ ├── bullframe.min.css.map
|
|
70
|
-
│ ├── ...
|
|
71
|
-
├── src/scss/
|
|
72
|
-
│ ├── forms/
|
|
73
|
-
│ ├── miscellaneous/
|
|
74
|
-
│ ├── mixins/
|
|
75
|
-
│ ├── typography/
|
|
76
|
-
│ ├── utilities/
|
|
77
|
-
│ ├── variables/
|
|
78
|
-
│ ├── bullframe-classless.scss
|
|
79
|
-
│ ├── bullframe-dark.scss
|
|
80
|
-
│ ├── bullframe-utilities.scss
|
|
81
|
-
│ ├── bullframe-system-default.scss
|
|
82
|
-
│ ├── bullframe.scss
|
|
83
|
-
│ └── ...
|
|
84
|
-
├── vite.config.js
|
|
85
|
-
├── index.html
|
|
86
|
-
└── ...
|
|
87
|
-
```
|
|
13
|
+
<p align="center">
|
|
14
|
+
<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>
|
|
15
|
+
<a href="https://bullframecss.marcopontili.com/"><img src="https://img.shields.io/badge/docs-online-0056b3?style=flat-square" alt="Docs"></a>
|
|
16
|
+
<img src="https://img.shields.io/badge/dependencies-0-brightgreen?style=flat-square" alt="Zero dependencies">
|
|
17
|
+
<img src="https://img.shields.io/badge/any%20stack-555555?style=flat-square" alt="Any stack">
|
|
18
|
+
<a href="LICENSE"><img src="https://img.shields.io/github/license/marcop135/bullframe.css.svg?style=flat-square" alt="MIT License"></a>
|
|
19
|
+
</p>
|
|
88
20
|
|
|
89
21
|
---
|
|
90
22
|
|
|
91
|
-
##
|
|
92
|
-
|
|
93
|
-
### CDN
|
|
94
|
-
|
|
95
|
-
Use JSDelivr CDN to include Bullframe CSS quickly:
|
|
96
|
-
|
|
97
|
-
```html
|
|
98
|
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bullframe.css@5">
|
|
99
|
-
```
|
|
100
|
-
|
|
101
|
-
### HTML Starter Template
|
|
102
|
-
|
|
103
|
-
<details><summary>Open HTML</summary>
|
|
104
|
-
|
|
105
|
-
<!DOCTYPE html>
|
|
106
|
-
<html lang="en">
|
|
107
|
-
<head>
|
|
108
|
-
<meta charset="utf-8">
|
|
109
|
-
<title>Bullframe CSS HTML Starter Template</title>
|
|
110
|
-
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
|
111
|
-
|
|
112
|
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bullframe.css@5/dist/css/bullframe.min.css">
|
|
113
|
-
</head>
|
|
114
|
-
<body>
|
|
115
|
-
<div class="bf-container">
|
|
116
|
-
<!-- Add your site or application content here -->
|
|
117
|
-
<p>Hello world! This is a Bullframe CSS starter template.</p>
|
|
118
|
-
</div>
|
|
119
|
-
</body>
|
|
120
|
-
</html>
|
|
121
|
-
|
|
122
|
-
</details>
|
|
123
|
-
|
|
124
|
-
### HTML Classless Starter Template
|
|
23
|
+
## Why use it
|
|
125
24
|
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
25
|
+
- **Semantic HTML first:** headings, forms, tables, and links are styled without a pile of classes
|
|
26
|
+
- **Classless when you want it:** swap in `bullframe-classless.css` and keep markup as plain HTML
|
|
27
|
+
- **Dark without a script:** always-dark builds, or system-default builds that follow `prefers-color-scheme`
|
|
28
|
+
- **Accessible defaults:** focus-visible rings, reduced-motion respect, WCAG AA contrast on links and primary buttons
|
|
29
|
+
- **Native CSS, any stack:** PostCSS builds, no Sass, no runtime JavaScript, solid cross-browser support
|
|
129
30
|
|
|
130
|
-
|
|
31
|
+
## When to use
|
|
131
32
|
|
|
132
|
-
|
|
133
|
-
<html lang="en">
|
|
134
|
-
<head>
|
|
135
|
-
<meta charset="utf-8">
|
|
136
|
-
<title>Bullframe CSS Classless Starter Template</title>
|
|
137
|
-
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
|
33
|
+
Pages and forms, not complex app UIs: docs, blogs, landings, help centers, listings, micro-sites. One stylesheet for reset, type, forms, and layout. Class-based or classless. No Tailwind-style utility pipeline.
|
|
138
34
|
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
<!-- Optional: center page content by default -->
|
|
142
|
-
<style>
|
|
143
|
-
body {
|
|
144
|
-
margin-left: auto;
|
|
145
|
-
margin-right: auto;
|
|
146
|
-
padding: 1.5rem;
|
|
147
|
-
max-width: 80rem;
|
|
148
|
-
}
|
|
149
|
-
</style>
|
|
150
|
-
</head>
|
|
151
|
-
<body>
|
|
152
|
-
<div class="bf-container">
|
|
153
|
-
<!-- Add your site or application content here -->
|
|
154
|
-
<p>Hello world! This is a Bullframe CSS Classless starter template.</p>
|
|
155
|
-
</div>
|
|
156
|
-
</body>
|
|
157
|
-
</html>
|
|
158
|
-
|
|
159
|
-
</details>
|
|
160
|
-
|
|
161
|
-
---
|
|
162
|
-
|
|
163
|
-
### npm
|
|
164
|
-
|
|
165
|
-
Make sure you have [Node.js](https://nodejs.org/en/download/) installed. Then run:
|
|
35
|
+
## Getting started
|
|
166
36
|
|
|
167
37
|
```bash
|
|
168
|
-
# Install Bullframe CSS
|
|
169
38
|
npm install bullframe.css
|
|
170
39
|
```
|
|
171
40
|
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
### Download
|
|
175
|
-
|
|
176
|
-
[Download the latest release](https://github.com/marcop135/bullframe.css/archive/master.zip)
|
|
177
|
-
|
|
178
|
-
---
|
|
179
|
-
|
|
180
|
-
## Customization
|
|
181
|
-
|
|
182
|
-
### Theming
|
|
183
|
-
|
|
184
|
-
Bullframe provides three builds for theming:
|
|
185
|
-
|
|
186
|
-
1. `bullframe.css` — light theme
|
|
187
|
-
2. `bullframe-dark.css` — dark theme
|
|
188
|
-
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))
|
|
189
|
-
|
|
190
|
-
#### Light Theme CDN (Default)
|
|
191
|
-
|
|
192
|
-
```html
|
|
193
|
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bullframe.css@5/dist/css/bullframe.min.css">
|
|
194
|
-
```
|
|
195
|
-
|
|
196
|
-
#### Dark Theme CDN
|
|
197
|
-
|
|
198
|
-
```html
|
|
199
|
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bullframe.css@5/dist/css/bullframe-dark.min.css">
|
|
41
|
+
```js
|
|
42
|
+
import 'bullframe.css';
|
|
200
43
|
```
|
|
201
44
|
|
|
202
|
-
#### System-default Theme CDN
|
|
203
|
-
|
|
204
45
|
```html
|
|
205
|
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bullframe.css
|
|
206
|
-
```
|
|
207
|
-
|
|
208
|
-
### Customise and Rebuild All Styles
|
|
209
|
-
|
|
210
|
-
After installing Bullframe CSS, you can use [Vite.js](https://vite.dev) commands to rebuild the framework as you prefer, adding your custom Sass variables and styles:
|
|
211
|
-
|
|
212
|
-
```bash
|
|
213
|
-
# Build production-ready site/app
|
|
214
|
-
npm run build
|
|
215
|
-
|
|
216
|
-
# Preview production build locally
|
|
217
|
-
npm run preview
|
|
46
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bullframe.css">
|
|
218
47
|
```
|
|
219
48
|
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
### Utilities
|
|
223
|
-
|
|
224
|
-
Bullframe CSS offers a comprehensive set of utility classes for fine-grained control over your layout, spacing, typography, and more. Explore each category below for detailed reference.
|
|
225
|
-
|
|
226
|
-
#### Grid system
|
|
227
|
-
|
|
228
|
-
<details><summary>Open utilities</summary>
|
|
229
|
-
|
|
230
|
-
| Variable | Value |
|
|
231
|
-
| -------------------- | ------ |
|
|
232
|
-
| `$bf-breakpoint-xs` | 0 |
|
|
233
|
-
| `$bf-breakpoint-sm` | 576px |
|
|
234
|
-
| `$bf-breakpoint-md` | 768px |
|
|
235
|
-
| `$bf-breakpoint-lg` | 992px |
|
|
236
|
-
| `$bf-breakpoint-xl` | 1200px |
|
|
237
|
-
| `$bf-breakpoint-xxl` | 1400px |
|
|
238
|
-
|
|
239
|
-
| Utility class | Description |
|
|
240
|
-
| ------------------------- | ------------------------------------------------------------------------------------------------------------------------- |
|
|
241
|
-
| `.bf-container` | Sets a centered block container with a `max-width` of 1140px, and a custom padding |
|
|
242
|
-
| `.bf-container--fluid` | Sets a fluid centered block container with a custom padding |
|
|
243
|
-
| `.bf-container--break-xs` | Collapses all the columns when the viewport is 575px and below |
|
|
244
|
-
| `.bf-container--break-md` | Collapses all the columns when the viewport is 767px and below |
|
|
245
|
-
| `.bf-container--break-lg` | Collapses all the columns when the viewport is 991px and below |
|
|
246
|
-
| `.bf-row` | Sets a block container with a custom negative margin |
|
|
247
|
-
| `.bf-col-1` | Sets a floated container with a custom padding and a `width` of `8.3333%` |
|
|
248
|
-
| `.bf-col-2` | Sets a floated container with a custom padding and a `width` of `16.666666666666664%` |
|
|
249
|
-
| `.bf-col-3` | Sets a floated container with a custom padding and a `width` of `25%` |
|
|
250
|
-
| `.bf-col-4` | Sets a floated container with a custom padding and a `width` of `33.33333333333333%` |
|
|
251
|
-
| `.bf-col-5` | Sets a floated container with a custom padding and a `width` of `41.66666666666667%` |
|
|
252
|
-
| `.bf-col-6` | Sets a floated container with a custom padding and a `width` of `50%` |
|
|
253
|
-
| `.bf-col-7` | Sets a floated container with a custom padding and a `width` of `58.333333333333336%` |
|
|
254
|
-
| `.bf-col-8` | Sets a floated container with a custom padding and a `width` of `66.66666666666666%` |
|
|
255
|
-
| `.bf-col-9` | Sets a floated container with a custom padding and a `width` of `75%` |
|
|
256
|
-
| `.bf-col-10` | Sets a floated container with a custom padding and a `width` of `83.33333333333334%` |
|
|
257
|
-
| `.bf-col-11` | Sets a floated container with a custom padding and a `width` of `91.66666666666666%` |
|
|
258
|
-
| `.bf-col-12` | Sets a floated container with a custom padding and a `width` of `100%` |
|
|
259
|
-
| `.no-gutters` | Set `margin-left`, `margin-right`, `padding-left` and `padding-right` to `0` — to be applied to row and column containers |
|
|
260
|
-
|
|
261
|
-
</details>
|
|
262
|
-
|
|
263
|
-
#### Layout
|
|
264
|
-
|
|
265
|
-
<details><summary>Open utilities</summary>
|
|
266
|
-
|
|
267
|
-
| Utility class | Description |
|
|
268
|
-
| ---------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
269
|
-
| `.bf-clearfix` | Clears the float, [read more](http://nicolasgallagher.com/micro-clearfix-hack/) |
|
|
270
|
-
| `.bf-hide` | Sets the `display` to `none` |
|
|
271
|
-
| `.bf-hidden` | Sets the `display` to `none` and the `visibility` to `hidden` |
|
|
272
|
-
| `.bf-text-hide` | Hides a text (AKA CSS image replacement) using a font `hack` and a combination o properties |
|
|
273
|
-
| `.bf-sr-only` | Shows a text only if screen reader |
|
|
274
|
-
| `.bf-sr-only.focusable` | Shows a text only if screen reader and focused |
|
|
275
|
-
| `.bf-invisible` | Sets the `visibility` to `hidden` |
|
|
276
|
-
| `.bf-visible` | Sets the `visibility` to `visible` |
|
|
277
|
-
| `.bf-display-block` | Sets the `display` to `block` |
|
|
278
|
-
| `.bf-display-block-center` | Sets the `display` to `block`, the left/right margins to `auto` and `text-align` to center |
|
|
279
|
-
| `.bf-display-inline` | Sets the `display` to `inline` |
|
|
280
|
-
| `.bf-display-inline-block` | Sets the `display` to `inline-block` |
|
|
281
|
-
| `.bf-display-flex` | Sets the `display` to `flex` |
|
|
282
|
-
| `.bf-display-inline-flex` | Sets the `display` to `inline-flex` |
|
|
283
|
-
| `.bf-display-flex--justify-start` | Sets `justify-content` to `flex-start` |
|
|
284
|
-
| `.bf-display-flex--justify-end` | Sets `justify-content` to `flex-end` |
|
|
285
|
-
| `.bf-display-flex--justify-center` | Sets `justify-content` to `center` |
|
|
286
|
-
| `.bf-display-flex--wrap` | Sets `flex-wrap` to `wrap` |
|
|
287
|
-
| `.bf-display-flex--nowrap` | Sets `flex-wrap` to `nowrap` |
|
|
288
|
-
| `.bf-float-left` | Sets the `float` to `left` |
|
|
289
|
-
| `.bf-float-right` | Sets the `float` to `right` |
|
|
290
|
-
| `.bf-position-fixed` | Sets the `position` to `fixed` |
|
|
291
|
-
| `.bf-align-center-unknown` | Sets the `position` to `relative` |
|
|
292
|
-
| `.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) |
|
|
293
|
-
| `.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) |
|
|
294
|
-
| `.bf-width-25` | Sets the `width` to `25%` |
|
|
295
|
-
| `.bf-width-33` | Sets the `width` to `33.33333333333333%` |
|
|
296
|
-
| `.bf-width-50` | Sets the `width` to `50%` |
|
|
297
|
-
| `.bf-width-75` | Sets the `width` to `75%` |
|
|
298
|
-
| `.bf-width-100` | Sets the `width` to `100%` |
|
|
299
|
-
| `.bf-width-auto` | Sets the `width` to `auto` |
|
|
300
|
-
| `.bf-z-index-1` | Set `z-index` to 1 |
|
|
301
|
-
| `.bf-z-index-2` | Set `z-index` to 2 |
|
|
302
|
-
| `.bf-z-index-3` | Set `z-index` to 3 |
|
|
303
|
-
| `.bf-z-index-4` | Set `z-index` to 4 |
|
|
304
|
-
| `.bf-z-index-5` | Set `z-index` to 5 |
|
|
305
|
-
| `.bf-z-index-6` | Set `z-index` to 6 |
|
|
306
|
-
| `.bf-z-index-7` | Set `z-index` to 7 |
|
|
307
|
-
| `.bf-z-index-8` | Set `z-index` to 8 |
|
|
308
|
-
| `.bf-z-index-9` | Set `z-index` to 9 |
|
|
309
|
-
| `.bf-z-index-10` | Set `z-index` to 10 |
|
|
310
|
-
| `.bf-z-index-20` | Set `z-index` to 20 |
|
|
311
|
-
| `.bf-z-index-30` | Set `z-index` to 30 |
|
|
312
|
-
| `.bf-z-index-40` | Set `z-index` to 40 |
|
|
313
|
-
| `.bf-z-index-50` | Set `z-index` to 50 |
|
|
314
|
-
| `.bf-z-index-60` | Set `z-index` to 60 |
|
|
315
|
-
| `.bf-z-index-70` | Set `z-index` to 70 |
|
|
316
|
-
| `.bf-z-index-80` | Set `z-index` to 80 |
|
|
317
|
-
| `.bf-z-index-90` | Set `z-index` to 90 |
|
|
318
|
-
| `.bf-z-index-100` | Set `z-index` to 100 |
|
|
319
|
-
| `.bf-z-index-200` | Set `z-index` to 200 |
|
|
320
|
-
| `.bf-z-index-300` | Set `z-index` to 300 |
|
|
321
|
-
|
|
322
|
-
</details>
|
|
323
|
-
|
|
324
|
-
#### Spacing
|
|
325
|
-
|
|
326
|
-
<details><summary>Open utilities</summary>
|
|
327
|
-
|
|
328
|
-
| Utility class | Description |
|
|
329
|
-
| ------------- | ----------------------------------------------------------------------------------------- |
|
|
330
|
-
| `.bf-m-0` | Sets the `margin` to `0` |
|
|
331
|
-
| `.bf-m-t-0` | Sets the `margin-top` to `0` |
|
|
332
|
-
| `.bf-m-t-1` | Sets the `margin-top` to a custom medium spacing value (`$bf-spacing-md-rem`) |
|
|
333
|
-
| `.bf-m-t-2` | Sets the `margin-top` to a custom large spacing value (`$bf-spacing-lg-rem`) |
|
|
334
|
-
| `.bf-m-t-3` | Sets the `margin-top` to a custom extra large spacing value (`$bf-spacing-xl-rem`) |
|
|
335
|
-
| `.bf-m-t-4` | Sets the `margin-top` to a custom extra extra large spacing value (`$bf-spacing-xxl-rem`) |
|
|
336
|
-
| `.bf-m-b-0` | Sets the `margin-bottom` to `0` |
|
|
337
|
-
| `.bf-m-b-1` | Sets the `margin-bottom` to a custom value that matches the grid system gutter |
|
|
338
|
-
| `.bf-m-b-2` | Sets the `margin-bottom` to a custom value |
|
|
339
|
-
| `.bf-m-b-3` | Sets the `margin-bottom` to a custom value |
|
|
340
|
-
| `.bf-m-b-4` | Sets the `margin-bottom` to a custom value |
|
|
341
|
-
| `.bf-m-l-0` | Sets the `margin-left` to `0` |
|
|
342
|
-
| `.bf-m-r-0` | Sets the `margin-right` to `0` |
|
|
343
|
-
| `.bf-p-0` | Sets the `padding` to `0` |
|
|
344
|
-
| `.bf-p-t-0` | Sets the `padding-top` to `0` |
|
|
345
|
-
| `.bf-p-b-0` | Sets the `padding-bottom` to `0` |
|
|
346
|
-
| `.bf-p-l-0` | Sets the `padding-left` to `0` |
|
|
347
|
-
| `.bf-p-r-0` | Sets the `padding-right` to `0` |
|
|
348
|
-
| `.bf-p-t-1` | Sets the `padding-top` to a custom value that matches the grid system gutter |
|
|
349
|
-
| `.bf-p-t-2` | Sets the `padding-top` to a custom value |
|
|
350
|
-
| `.bf-p-t-3` | Sets the `padding-top` to a custom value |
|
|
351
|
-
| `.bf-p-t-4` | Sets the `padding-top` to a custom value |
|
|
352
|
-
| `.bf-p-t-1` | Sets the `padding-bottom` to a custom value that matches the grid system gutter |
|
|
353
|
-
| `.bf-p-b-2` | Sets the `padding-bottom` to a custom value |
|
|
354
|
-
| `.bf-p-b-3` | Sets the `padding-bottom` to a custom value |
|
|
355
|
-
| `.bf-p-b-4` | Sets the `padding-bottom` to a custom value |
|
|
356
|
-
|
|
357
|
-
</details>
|
|
358
|
-
|
|
359
|
-
#### Texts
|
|
360
|
-
|
|
361
|
-
<details><summary>Open utilities</summary>
|
|
362
|
-
|
|
363
|
-
| Utility class | Description |
|
|
364
|
-
| ----------------------------- | ------------------------------------------------------------------------------------------------------------------------------- |
|
|
365
|
-
| `.bf-t-transform-uppercase` | Sets `transform` to a `uppercase` (AKA capitalizes a text) |
|
|
366
|
-
| `.bf-t-transform-none` | Sets `transform` to a `none` |
|
|
367
|
-
| `.bf-t-left` | Sets `text-align` to a `left` |
|
|
368
|
-
| `.bf-t-center` | Sets `text-align` to a `center` |
|
|
369
|
-
| `.bf-t-right` | Sets `text-align` to a `right` |
|
|
370
|
-
| `.bf-t-shadow` | Sets a basic text shadow |
|
|
371
|
-
| `.bf-t-italic` | Sets `font-style` to a `italic` |
|
|
372
|
-
| `.bf-t-style-normal` | Sets `font-style` to a `normal` |
|
|
373
|
-
| `.bf-t-weight-300` | Sets `font-weight` to `300` (AKA light) |
|
|
374
|
-
| `.bf-t-weight-400` | Sets `font-weight` to `400` (AKA normal) |
|
|
375
|
-
| `.bf-t-weight-500` | Sets `font-weight` to `500` (AKA medium) |
|
|
376
|
-
| `.bf-t-weight-600` | Sets `font-weight` to `600` (AKA semi-bold) |
|
|
377
|
-
| `.bf-t-weight-700` | Sets `font-weight` to `700` (AKA bold) |
|
|
378
|
-
| `.bf-t-weight-800` | Sets `font-weight` to `800` (AKA black) |
|
|
379
|
-
| `.bf-text-break` | Sets `word-wrap` to a `break-word`, applied by default to the `body` |
|
|
380
|
-
| `.bf-t-truncate` | Truncates a very long text and replaces the missing text with an ellipsis |
|
|
381
|
-
| `.bf-t-truncate--multiline-2` | Truncates a long doubled line text and replaces the missing text with an ellipsis (no IE) |
|
|
382
|
-
| `.bf-t-truncate--multiline-3` | Truncates a long tripled line text and replaces the missing text with an ellipsis (no IE) |
|
|
383
|
-
| `.bf-no-select` | Blocks user text selection |
|
|
384
|
-
| `.bf-font-sans-serif` | Sets `font-family` to a `sans-serif`, and a combination of cross-browser system UI sans-serif font families |
|
|
385
|
-
| `.bf-font-serif` | Sets `font-family` to a `serif`, and a combination of cross-browser system UI serif font families |
|
|
386
|
-
| `.bf-font-monospace` | Sets `font-family` to a `monospace`, a combination of widely supported monospaced font families |
|
|
387
|
-
| `.bf-h1` | Matches the font styling of a `h1` |
|
|
388
|
-
| `.bf-h2` | Matches the font styling of a `h2` |
|
|
389
|
-
| `.bf-h3` | Matches the font styling of a `h3` |
|
|
390
|
-
| `.bf-h4` | Matches the font styling of a `h4` |
|
|
391
|
-
| `.bf-h5` | Matches the font styling of a `h5` |
|
|
392
|
-
| `.bf-h6` | Matches the font styling of a `h6` |
|
|
393
|
-
| `.bf-lead` | Sets `font-size` to `125%` |
|
|
394
|
-
| `.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` |
|
|
395
|
-
|
|
396
|
-
</details>
|
|
397
|
-
|
|
398
|
-
#### Lists
|
|
399
|
-
|
|
400
|
-
<details><summary>Open utilities</summary>
|
|
401
|
-
|
|
402
|
-
| Utility class | Description |
|
|
403
|
-
| ------------------- | -------------------------------------------------------------------------------- |
|
|
404
|
-
| `.bf-list-unstyled` | Removes margins, paddings and `li` list styles from `ul`, `ol` and `dd` elements |
|
|
49
|
+
## Docs
|
|
405
50
|
|
|
406
|
-
|
|
51
|
+
[bullframecss.marcopontili.com](https://bullframecss.marcopontili.com/)
|
|
407
52
|
|
|
408
|
-
|
|
409
|
-
| ----------------------------- | ------------------------------------------------------------------------ |
|
|
410
|
-
| `.bf-table` | Sets a border and custom paddings and margins to a table |
|
|
411
|
-
| `.bf-table-responsive` | Adds responsiveness to a table container |
|
|
412
|
-
| `.bf-table--zebra` | Increases a table readability adding horizontal zebra stripes |
|
|
413
|
-
| `.bf-table-responsive--zebra` | Increases a responsive table readability adding horizontal zebra stripes |
|
|
53
|
+
## Examples
|
|
414
54
|
|
|
415
|
-
|
|
55
|
+
[Example templates](https://bullframecss.marcopontili.com/examples)
|
|
416
56
|
|
|
417
|
-
|
|
57
|
+
## Kitchen sink
|
|
418
58
|
|
|
419
|
-
|
|
420
|
-
|
|
421
|
-
| Utility class | Description |
|
|
422
|
-
| ---------------------------- | --------------------------------------------------------------------------------------------------------------------------------------- |
|
|
423
|
-
| `.bf-embed-responsive` | Adds responsiveness to an `iframe`, `embed`, `object`, `video` or _general purpouse element_ (e.g. youtube embed) |
|
|
424
|
-
| `.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) |
|
|
425
|
-
| `.bf-embed-responsive--item` | A _general purpouse element_ element that behaves like a `video` |
|
|
426
|
-
|
|
427
|
-
</details>
|
|
428
|
-
|
|
429
|
-
#### Buttons
|
|
430
|
-
|
|
431
|
-
<details><summary>Open utilities</summary>
|
|
432
|
-
|
|
433
|
-
| Utility class | Description |
|
|
434
|
-
| ------------------ | ------------------------------------------------------------------------------------ |
|
|
435
|
-
| `.bf-btn` | Creates a standard gray-looking button (e.g. `<a class="bf-btn" href="...">...</a>`) |
|
|
436
|
-
| `.bf-btn--primary` | Creates a primary blue-looking button |
|
|
437
|
-
|
|
438
|
-
</details>
|
|
439
|
-
|
|
440
|
-
#### Form states
|
|
441
|
-
|
|
442
|
-
<details><summary>Open utilities</summary>
|
|
443
|
-
|
|
444
|
-
| Utility class | Description |
|
|
445
|
-
| -------------- | ---------------------------------------------------------------------------------------------------- |
|
|
446
|
-
| `.bf-focused` | Sets a blue-looking focused ring and shadow around an `input`, `textarea` or `select` |
|
|
447
|
-
| `.bf-disabled` | Sets `opacity` to `0.5`, and resets a combinations of properties to the default value if is disabled |
|
|
448
|
-
| `.bf-invalid` | Sets a red-looking focused ring and shadow around an invalid `input`, `textarea` or `select` |
|
|
449
|
-
|
|
450
|
-
</details>
|
|
451
|
-
|
|
452
|
-
#### Reduced motion
|
|
453
|
-
|
|
454
|
-
<details><summary>Open utilities</summary>
|
|
455
|
-
|
|
456
|
-
| Utility class | Description |
|
|
457
|
-
| -------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
458
|
-
| `.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) |
|
|
459
|
-
|
|
460
|
-
</details>
|
|
461
|
-
|
|
462
|
-
---
|
|
463
|
-
|
|
464
|
-
## Browser compatibility
|
|
465
|
-
|
|
466
|
-
### Desktop browsers
|
|
467
|
-
|
|
468
|
-
- Latest two stable versions: Firefox, Chrome, Edge, Safari, Opera
|
|
469
|
-
|
|
470
|
-
### Mobile browsers
|
|
471
|
-
|
|
472
|
-
- Latest two stable versions: Firefox, Chrome, Edge, Mobile Safari, Opera
|
|
473
|
-
|
|
474
|
-
You can check the [.browserslistrc](https://github.com/marcop135/bullframe.css/blob/master/.browserslistrc) file.
|
|
475
|
-
|
|
476
|
-
---
|
|
59
|
+
[Every styled element in one page](https://bullframecss.marcopontili.com/kitchen-sink/)
|
|
477
60
|
|
|
478
61
|
## Contributing
|
|
479
62
|
|
|
480
|
-
|
|
481
|
-
|
|
482
|
-
## Changelog
|
|
483
|
-
|
|
484
|
-
[Changelog](https://github.com/marcop135/bullframe.css/blob/master/CHANGELOG.md)
|
|
63
|
+
See [CONTRIBUTING.md](./.github/CONTRIBUTING.md). Bug reports and feature requests go through [issues](https://github.com/marcop135/bullframe.css/issues).
|
|
485
64
|
|
|
486
65
|
## Author
|
|
487
66
|
|
|
@@ -489,4 +68,4 @@ Please read the [contribution guidelines](https://github.com/marcop135/bullframe
|
|
|
489
68
|
|
|
490
69
|
## License
|
|
491
70
|
|
|
492
|
-
|
|
71
|
+
[MIT](./LICENSE)
|