bullframe.css 5.1.0 → 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.
Files changed (117) hide show
  1. package/CHANGELOG.md +39 -2
  2. package/LICENSE +1 -1
  3. package/README.md +34 -458
  4. package/dist/css/bullframe-classless-dark.css +1270 -909
  5. package/dist/css/bullframe-classless-dark.css.map +1 -1
  6. package/dist/css/bullframe-classless-dark.min.css +1 -3
  7. package/dist/css/bullframe-classless-dark.min.css.map +1 -1
  8. package/dist/css/bullframe-classless-system-default.css +1339 -899
  9. package/dist/css/bullframe-classless-system-default.css.map +1 -1
  10. package/dist/css/bullframe-classless-system-default.min.css +1 -3
  11. package/dist/css/bullframe-classless-system-default.min.css.map +1 -1
  12. package/dist/css/bullframe-classless.css +1098 -713
  13. package/dist/css/bullframe-classless.css.map +1 -1
  14. package/dist/css/bullframe-classless.min.css +1 -3
  15. package/dist/css/bullframe-classless.min.css.map +1 -1
  16. package/dist/css/bullframe-dark.css +2105 -1541
  17. package/dist/css/bullframe-dark.css.map +1 -1
  18. package/dist/css/bullframe-dark.min.css +1 -3
  19. package/dist/css/bullframe-dark.min.css.map +1 -1
  20. package/dist/css/bullframe-system-default.css +2107 -1529
  21. package/dist/css/bullframe-system-default.css.map +1 -1
  22. package/dist/css/bullframe-system-default.min.css +1 -3
  23. package/dist/css/bullframe-system-default.min.css.map +1 -1
  24. package/dist/css/bullframe-utilities.css +766 -490
  25. package/dist/css/bullframe-utilities.css.map +1 -1
  26. package/dist/css/bullframe-utilities.min.css +1 -2
  27. package/dist/css/bullframe-utilities.min.css.map +1 -1
  28. package/dist/css/bullframe.css +1900 -1310
  29. package/dist/css/bullframe.css.map +1 -1
  30. package/dist/css/bullframe.min.css +1 -3
  31. package/dist/css/bullframe.min.css.map +1 -1
  32. package/package.json +70 -28
  33. package/.browserslistrc +0 -3
  34. package/.editorconfig +0 -15
  35. package/.htmlhintrc +0 -12
  36. package/.prettierignore +0 -1
  37. package/.stylelintignore +0 -3
  38. package/.stylelintrc.json +0 -26
  39. package/dist/apple-touch-icon.png +0 -0
  40. package/dist/css/bullframe-classless-dark-prefers.css +0 -1280
  41. package/dist/css/bullframe-classless-dark-prefers.css.map +0 -1
  42. package/dist/css/bullframe-classless-dark-prefers.min.css +0 -3
  43. package/dist/css/bullframe-classless-dark-prefers.min.css.map +0 -1
  44. package/dist/css/bullframe-dark-prefers.css +0 -2296
  45. package/dist/css/bullframe-dark-prefers.css.map +0 -1
  46. package/dist/css/bullframe-dark-prefers.min.css +0 -3
  47. package/dist/css/bullframe-dark-prefers.min.css.map +0 -1
  48. package/dist/docs/demo/index.html +0 -1154
  49. package/dist/favicon-16x16.png +0 -0
  50. package/dist/favicon-32x32.png +0 -0
  51. package/dist/favicon.ico +0 -0
  52. package/dist/index.css +0 -1
  53. package/dist/index.js.map +0 -1
  54. package/dist/placeholder-img-800x400.jpg +0 -0
  55. package/dist/video-poster.png +0 -0
  56. package/prettier.config.js +0 -26
  57. package/src/scss/bullframe-classless-dark-prefers.scss +0 -2
  58. package/src/scss/bullframe-classless-dark.scss +0 -2
  59. package/src/scss/bullframe-classless-system-default.scss +0 -2
  60. package/src/scss/bullframe-classless.scss +0 -49
  61. package/src/scss/bullframe-dark-prefers.scss +0 -2
  62. package/src/scss/bullframe-dark.scss +0 -2
  63. package/src/scss/bullframe-system-default.scss +0 -2
  64. package/src/scss/bullframe-utilities.scss +0 -21
  65. package/src/scss/bullframe.scss +0 -49
  66. package/src/scss/custom/_author-styles.scss +0 -5
  67. package/src/scss/forms/_forms-normalization.scss +0 -300
  68. package/src/scss/forms/_forms-styling-radio-checkbox.scss +0 -81
  69. package/src/scss/forms/_forms-styling-range.scss +0 -106
  70. package/src/scss/forms/_forms-styling-select.scss +0 -58
  71. package/src/scss/forms/_forms-styling.scss +0 -118
  72. package/src/scss/miscellaneous/_misc-accessibility.scss +0 -36
  73. package/src/scss/miscellaneous/_misc-anchors.scss +0 -37
  74. package/src/scss/miscellaneous/_misc-embedded-content.scss +0 -117
  75. package/src/scss/miscellaneous/_misc-focus.scss +0 -80
  76. package/src/scss/miscellaneous/_misc-interactive.scss +0 -48
  77. package/src/scss/miscellaneous/_misc-layout.scss +0 -30
  78. package/src/scss/miscellaneous/_misc-lists.scss +0 -53
  79. package/src/scss/miscellaneous/_misc-scrolling.scss +0 -5
  80. package/src/scss/miscellaneous/_misc-shame.scss +0 -37
  81. package/src/scss/miscellaneous/_misc-tables.scss +0 -53
  82. package/src/scss/mixins/_mixin-dark-prefers.scss +0 -413
  83. package/src/scss/mixins/_mixin-dark.scss +0 -415
  84. package/src/scss/mixins/_mixin-grid-flex.scss +0 -80
  85. package/src/scss/mixins/_mixin-layout.scss +0 -42
  86. package/src/scss/mixins/_mixin-texts.scss +0 -37
  87. package/src/scss/typography/_typography-blockquotes.scss +0 -28
  88. package/src/scss/typography/_typography-headings.scss +0 -45
  89. package/src/scss/typography/_typography-html-body.scss +0 -75
  90. package/src/scss/typography/_typography-misc.scss +0 -90
  91. package/src/scss/typography/_typography-monospaced-elements.scss +0 -59
  92. package/src/scss/utilities/_utility-buttons.scss +0 -73
  93. package/src/scss/utilities/_utility-debugging.scss +0 -31
  94. package/src/scss/utilities/_utility-embeds.scss +0 -34
  95. package/src/scss/utilities/_utility-filters.scss +0 -21
  96. package/src/scss/utilities/_utility-form-states.scss +0 -89
  97. package/src/scss/utilities/_utility-global-dark-classless.scss +0 -3
  98. package/src/scss/utilities/_utility-global-dark-prefers-classless.scss +0 -3
  99. package/src/scss/utilities/_utility-global-dark-prefers.scss +0 -3
  100. package/src/scss/utilities/_utility-global-dark-scrollbars.scss +0 -34
  101. package/src/scss/utilities/_utility-global-dark.scss +0 -4
  102. package/src/scss/utilities/_utility-global-system-default-classless.scss +0 -3
  103. package/src/scss/utilities/_utility-global-system-default.scss +0 -3
  104. package/src/scss/utilities/_utility-grid-system.scss +0 -140
  105. package/src/scss/utilities/_utility-layout.scss +0 -187
  106. package/src/scss/utilities/_utility-lists.scss +0 -17
  107. package/src/scss/utilities/_utility-print.scss +0 -101
  108. package/src/scss/utilities/_utility-reduced-motion.scss +0 -29
  109. package/src/scss/utilities/_utility-spacing.scss +0 -148
  110. package/src/scss/utilities/_utility-tables.scss +0 -34
  111. package/src/scss/utilities/_utility-texts.scss +0 -225
  112. package/src/scss/utilities/_utility-z-index.scss +0 -83
  113. package/src/scss/variables/_variables-breakpoints.scss +0 -6
  114. package/src/scss/variables/_variables-colors.scss +0 -34
  115. package/src/scss/variables/_variables-spacing.scss +0 -24
  116. package/src/scss/variables/_variables-texts.scss +0 -8
  117. package/vite.config.js +0 -148
package/CHANGELOG.md CHANGED
@@ -1,4 +1,38 @@
1
- # Changes to Bullframe CSS
1
+ # Changelog
2
+
3
+ All notable changes to this project are documented in this file.
4
+
5
+ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
6
+ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
7
+
8
+ ## [Unreleased]
9
+
10
+ ## [6.0.0] - 2026-07-31 - BREAKING CHANGES
11
+
12
+ ### Changed
13
+
14
+ - Replaced Sass with native CSS and PostCSS (`--bf-*` tokens). See [Migration](docs/migration.md).
15
+ - Unified class-based, classless, dark, and system-default builds on one token set.
16
+ - Darkened link and button blues for WCAG AA contrast.
17
+ - Replaced the [docs site](https://bullframecss.marcopontili.com/) with VitePress; kitchen sink at `/kitchen-sink/`.
18
+ - Documented browser support against Browserslist `defaults`.
19
+
20
+ ### Added
21
+
22
+ - Brand identity for docs and README: mascot and logo mark, favicon variants, hero illustrations, and OG/social imagery.
23
+ - Opt-in font-smoothing, reduced-motion utilities, stronger focus / ARIA defaults.
24
+ - Progressive `@supports` gates for range, `:has()` label layout, and dialog enter.
25
+
26
+ ### Removed
27
+
28
+ - Sass sources and the Sass build path.
29
+ - Standalone `*-dark-prefers` and helper dist entries (`variables*`, `utility-global-dark*`); dark/system behavior lives in the seven builds.
30
+ - `bullframe-modern.css` and the `bullframe.css/modern` export.
31
+ - Legacy IE / Edge hacks.
32
+
33
+ ### Fixed
34
+
35
+ - Dialog min-width on narrow viewports, reduced-motion fades, backdrop color, gated transition APIs.
2
36
 
3
37
  ## 5.1.0 - (July 08, 2025)
4
38
 
@@ -20,7 +54,7 @@
20
54
  - Refreshed HTML demo page with new examples
21
55
  - Streamlined `README.md` copy and layout
22
56
  - Updated all npm dependencies
23
- - Updated stylelint, htmlhint, and prettier configs
57
+ - Updated stylelint, html-validate, and prettier configs
24
58
  - Ensured HTML demo page passed W3C validation
25
59
 
26
60
  ## 4.2.2 (May 28, 2025)
@@ -454,3 +488,6 @@
454
488
  - First public release
455
489
  - Initial commit on 19 November 2012
456
490
  - Framework aimed to kickstart cross-browser responsive HTML/CSS development
491
+
492
+ [Unreleased]: https://github.com/marcop135/bullframe.css/compare/v6.0.0...HEAD
493
+ [6.0.0]: https://github.com/marcop135/bullframe.css/compare/v5.1.0...v6.0.0
package/LICENSE CHANGED
@@ -1,6 +1,6 @@
1
1
  MIT License
2
2
 
3
- Copyright (c) 2025 Marco Pontili
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
package/README.md CHANGED
@@ -1,490 +1,66 @@
1
- # Bullframe CSS v5.x
1
+ <div align="center">
2
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?
26
-
27
- Bullframe CSS is a lightweight Sass (SCSS) framework for building fast, responsive, and accessible UIs — semantic, themeable, and classless-friendly, with solid cross-browser support.
3
+ ![Bullframe CSS](https://raw.githubusercontent.com/marcop135/bullframe.css/main/src/docs/github-readme/bf-readme-hero-light-16x9.png#gh-light-mode-only)
4
+ ![Bullframe CSS](https://raw.githubusercontent.com/marcop135/bullframe.css/main/src/docs/github-readme/bf-readme-hero-dark-16x9.png#gh-dark-mode-only)
28
5
 
29
- Perfect for landing pages, marketing sites, micro-sites, blogs, docs, product listings, and more.
6
+ # Bullframe CSS
30
7
 
31
- **Simply add it, start building, and stay in control.**
8
+ Semantic by default. Any stack.<br>
9
+ <em>Classless when you want it. System dark built in.</em>
32
10
 
33
- ---
34
-
35
- ## Best Features
11
+ </div>
36
12
 
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
46
-
47
- ---
48
-
49
- ## What's Included
50
-
51
- ```text
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.
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>
94
20
 
95
21
  ---
96
22
 
97
- ## Getting Started
98
-
99
- ### CDN
100
-
101
- ```html
102
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bullframe.css@5">
103
- ```
104
-
105
- ### HTML Starter Template
106
-
107
- <details><summary>Open HTML</summary>
108
-
109
- <!DOCTYPE html>
110
- <html lang="en">
111
- <head>
112
- <meta charset="utf-8">
113
- <title>Bullframe CSS v5.x HTML Starter Template</title>
114
- <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
115
-
116
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bullframe.css@5/dist/css/bullframe.min.css">
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>
23
+ ## Why use it
125
24
 
126
- </details>
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
127
30
 
128
- ### HTML Classless Starter Template
31
+ ## When to use
129
32
 
130
- > [!NOTE]
131
- > What does "classless" mean?
132
- > No utility classes or extra markup needed. Just write semantic HTML and get clean, normalized styles.
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.
133
34
 
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>
162
-
163
- </details>
164
-
165
- ---
166
-
167
- ### npm
168
-
169
- Make sure you have [Node.js](https://nodejs.org/en/download/) installed. Then run:
35
+ ## Getting started
170
36
 
171
37
  ```bash
172
38
  npm install bullframe.css
173
39
  ```
174
40
 
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">
41
+ ```js
42
+ import 'bullframe.css';
197
43
  ```
198
44
 
199
- #### Dark Theme CDN
200
-
201
45
  ```html
202
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bullframe.css@5/dist/css/bullframe-dark.min.css">
46
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bullframe.css">
203
47
  ```
204
48
 
205
- #### System-default Theme CDN
49
+ ## Docs
206
50
 
207
- ```html
208
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bullframe.css@5/dist/css/bullframe-system-default.min.css">
209
- ```
210
-
211
- ### Customise and Rebuild All Styles
51
+ [bullframecss.marcopontili.com](https://bullframecss.marcopontili.com/)
212
52
 
213
- After installing Bullframe CSS via npm, you can use [Vite.js](https://vite.dev) to rebuild the framework as you prefer, adding your custom Sass variables and styles:
53
+ ## Examples
214
54
 
215
- ```bash
216
- # Build production-ready site/app
217
- npm run build
55
+ [Example templates](https://bullframecss.marcopontili.com/examples)
218
56
 
219
- # Preview production build locally
220
- npm run preview
221
- ```
57
+ ## Kitchen sink
222
58
 
223
- ---
224
-
225
- ### Utilities
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 |
263
-
264
- </details>
265
-
266
- #### Layout
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>
326
-
327
- #### Spacing
328
-
329
- <details><summary>Open utilities</summary>
330
-
331
- | Utility class | Description |
332
- | ------------- | ----------------------------------------------------------------------------------------- |
333
- | `.bf-m-0` | Sets the `margin` to `0` |
334
- | `.bf-m-t-0` | Sets the `margin-top` to `0` |
335
- | `.bf-m-t-1` | Sets the `margin-top` to a custom medium spacing value (`$bf-spacing-md-rem`) |
336
- | `.bf-m-t-2` | Sets the `margin-top` to a custom large spacing value (`$bf-spacing-lg-rem`) |
337
- | `.bf-m-t-3` | Sets the `margin-top` to a custom extra large spacing value (`$bf-spacing-xl-rem`) |
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
- ---
59
+ [Every styled element in one page](https://bullframecss.marcopontili.com/kitchen-sink/)
480
60
 
481
61
  ## Contributing
482
62
 
483
- Please read the [contribution guidelines](https://github.com/marcop135/bullframe.css/blob/master/.github/CONTRIBUTING.md).
484
-
485
- ## Changelog
486
-
487
- [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).
488
64
 
489
65
  ## Author
490
66
 
@@ -492,4 +68,4 @@ Please read the [contribution guidelines](https://github.com/marcop135/bullframe
492
68
 
493
69
  ## License
494
70
 
495
- This project is licensed under the [MIT License](LICENSE).
71
+ [MIT](./LICENSE)