bullframe.css 5.0.1 → 5.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.
Files changed (86) hide show
  1. package/.stylelintignore +1 -1
  2. package/CHANGELOG.md +238 -233
  3. package/LICENSE +1 -1
  4. package/README.md +17 -14
  5. package/dist/css/bullframe-classless-dark-prefers.css +145 -205
  6. package/dist/css/bullframe-classless-dark-prefers.css.map +1 -1
  7. package/dist/css/bullframe-classless-dark-prefers.min.css +1 -1
  8. package/dist/css/bullframe-classless-dark-prefers.min.css.map +1 -1
  9. package/dist/css/bullframe-classless-dark.css +316 -391
  10. package/dist/css/bullframe-classless-dark.css.map +1 -1
  11. package/dist/css/bullframe-classless-dark.min.css +1 -1
  12. package/dist/css/bullframe-classless-dark.min.css.map +1 -1
  13. package/dist/css/bullframe-classless-system-default.css +145 -205
  14. package/dist/css/bullframe-classless-system-default.css.map +1 -1
  15. package/dist/css/bullframe-classless-system-default.min.css +1 -1
  16. package/dist/css/bullframe-classless-system-default.min.css.map +1 -1
  17. package/dist/css/bullframe-classless.css +133 -195
  18. package/dist/css/bullframe-classless.css.map +1 -1
  19. package/dist/css/bullframe-classless.min.css +1 -1
  20. package/dist/css/bullframe-classless.min.css.map +1 -1
  21. package/dist/css/bullframe-dark-prefers.css +145 -205
  22. package/dist/css/bullframe-dark-prefers.css.map +1 -1
  23. package/dist/css/bullframe-dark-prefers.min.css +1 -1
  24. package/dist/css/bullframe-dark-prefers.min.css.map +1 -1
  25. package/dist/css/bullframe-dark.css +386 -466
  26. package/dist/css/bullframe-dark.css.map +1 -1
  27. package/dist/css/bullframe-dark.min.css +1 -1
  28. package/dist/css/bullframe-dark.min.css.map +1 -1
  29. package/dist/css/bullframe-system-default.css +142 -204
  30. package/dist/css/bullframe-system-default.css.map +1 -1
  31. package/dist/css/bullframe-system-default.min.css +1 -1
  32. package/dist/css/bullframe-system-default.min.css.map +1 -1
  33. package/dist/css/bullframe-utilities.css +4 -2
  34. package/dist/css/bullframe-utilities.css.map +1 -1
  35. package/dist/css/bullframe-utilities.min.css +1 -1
  36. package/dist/css/bullframe-utilities.min.css.map +1 -1
  37. package/dist/css/bullframe.css +133 -195
  38. package/dist/css/bullframe.css.map +1 -1
  39. package/dist/css/bullframe.min.css +1 -1
  40. package/dist/css/bullframe.min.css.map +1 -1
  41. package/dist/docs/demo/index.html +15 -13
  42. package/dist/index.css +1 -0
  43. package/dist/index.js.map +1 -0
  44. package/package.json +4 -4
  45. package/src/scss/forms/_forms-normalization.scss +84 -100
  46. package/src/scss/forms/_forms-styling-radio-checkbox.scss +11 -12
  47. package/src/scss/forms/_forms-styling-range.scss +19 -26
  48. package/src/scss/forms/_forms-styling-select.scss +9 -16
  49. package/src/scss/forms/_forms-styling.scss +81 -94
  50. package/src/scss/miscellaneous/_misc-focus.scss +29 -28
  51. package/src/scss/mixins/_mixin-dark-prefers.scss +14 -15
  52. package/src/scss/mixins/_mixin-dark.scss +330 -311
  53. package/vite.config.js +65 -33
  54. package/dist/docs/demo/css/style.css +0 -131
  55. package/dist/docs/demo/icons/android-chrome-192x192.png +0 -0
  56. package/dist/docs/demo/icons/android-chrome-384x384.png +0 -0
  57. package/dist/docs/demo/icons/mstile-150x150.png +0 -0
  58. package/dist/docs/demo/icons/safari-pinned-tab.svg +0 -28
  59. package/dist/docs/demo/images/logo.png +0 -0
  60. package/dist/docs/demo/images/placeholder-img-130x140.jpg +0 -0
  61. package/dist/docs/demo/images/placeholder-img-16x16.jpg +0 -0
  62. package/dist/docs/github-readme/bf-logo-full-dark.png +0 -0
  63. package/dist/docs/github-readme/bf-logo-full-light.png +0 -0
  64. package/src/docs/demo/css/style.css +0 -131
  65. package/src/docs/demo/icons/android-chrome-192x192.png +0 -0
  66. package/src/docs/demo/icons/android-chrome-384x384.png +0 -0
  67. package/src/docs/demo/icons/apple-touch-icon.png +0 -0
  68. package/src/docs/demo/icons/favicon-16x16.png +0 -0
  69. package/src/docs/demo/icons/favicon-32x32.png +0 -0
  70. package/src/docs/demo/icons/favicon.ico +0 -0
  71. package/src/docs/demo/icons/mstile-150x150.png +0 -0
  72. package/src/docs/demo/icons/safari-pinned-tab.svg +0 -28
  73. package/src/docs/demo/images/logo.png +0 -0
  74. package/src/docs/demo/images/placeholder-img-130x140.jpg +0 -0
  75. package/src/docs/demo/images/placeholder-img-16x16.jpg +0 -0
  76. package/src/docs/demo/images/placeholder-img-800x400.jpg +0 -0
  77. package/src/docs/demo/images/video-poster.png +0 -0
  78. package/src/docs/demo/index.html +0 -1152
  79. package/src/docs/github-readme/bf-logo-full-dark.png +0 -0
  80. package/src/docs/github-readme/bf-logo-full-light.png +0 -0
  81. /package/dist/{docs/demo/icons/apple-touch-icon.png → apple-touch-icon.png} +0 -0
  82. /package/dist/{docs/demo/icons/favicon-16x16.png → favicon-16x16.png} +0 -0
  83. /package/dist/{docs/demo/icons/favicon-32x32.png → favicon-32x32.png} +0 -0
  84. /package/dist/{docs/demo/icons/favicon.ico → favicon.ico} +0 -0
  85. /package/dist/{docs/demo/images/placeholder-img-800x400.jpg → placeholder-img-800x400.jpg} +0 -0
  86. /package/dist/{docs/demo/images/video-poster.png → video-poster.png} +0 -0
package/LICENSE CHANGED
@@ -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
@@ -13,9 +13,9 @@
13
13
  </p>
14
14
 
15
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">
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
19
  </picture>
20
20
 
21
21
  [https://github.com/marcop135/bullframe.css](https://github.com/marcop135/bullframe.css)
@@ -24,7 +24,7 @@
24
24
 
25
25
  ## What is Bullframe CSS?
26
26
 
27
- Bullframe CSS is a lightweight, modern Sass (SCSS) framework designed for fast, responsive, and accessible front-end development.
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.
28
28
 
29
29
  Perfect for landing pages, marketing sites, micro-sites, blogs, docs, product listings, and more.
30
30
 
@@ -34,7 +34,6 @@ Perfect for landing pages, marketing sites, micro-sites, blogs, docs, product li
34
34
 
35
35
  ## Best Features
36
36
 
37
- - Desktop and mobile browser support
38
37
  - Responsive layout and style normalization _out of the box_
39
38
  - Cross-browser form elements
40
39
  - JavaScript framework-agnostic
@@ -88,12 +87,17 @@ bullframe.css/
88
87
 
89
88
  ---
90
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.
94
+
95
+ ---
96
+
91
97
  ## Getting Started
92
98
 
93
99
  ### CDN
94
100
 
95
- Use JSDelivr CDN to include Bullframe CSS quickly:
96
-
97
101
  ```html
98
102
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bullframe.css@5">
99
103
  ```
@@ -106,7 +110,7 @@ Use JSDelivr CDN to include Bullframe CSS quickly:
106
110
  <html lang="en">
107
111
  <head>
108
112
  <meta charset="utf-8">
109
- <title>Bullframe CSS HTML Starter Template</title>
113
+ <title>Bullframe CSS v5.x HTML Starter Template</title>
110
114
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
111
115
 
112
116
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bullframe.css@5/dist/css/bullframe.min.css">
@@ -114,7 +118,7 @@ Use JSDelivr CDN to include Bullframe CSS quickly:
114
118
  <body>
115
119
  <div class="bf-container">
116
120
  <!-- Add your site or application content here -->
117
- <p>Hello world! This is a Bullframe CSS starter template.</p>
121
+ <p>Hello World! This is a Bullframe CSS v5.x HTML starter template.</p>
118
122
  </div>
119
123
  </body>
120
124
  </html>
@@ -133,7 +137,7 @@ Use JSDelivr CDN to include Bullframe CSS quickly:
133
137
  <html lang="en">
134
138
  <head>
135
139
  <meta charset="utf-8">
136
- <title>Bullframe CSS Classless Starter Template</title>
140
+ <title>Bullframe CSS 5.x Classless Starter Template</title>
137
141
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
138
142
 
139
143
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bullframe.css@5/dist/css/bullframe-classless.min.css">
@@ -151,7 +155,7 @@ Use JSDelivr CDN to include Bullframe CSS quickly:
151
155
  <body>
152
156
  <div class="bf-container">
153
157
  <!-- Add your site or application content here -->
154
- <p>Hello world! This is a Bullframe CSS Classless starter template.</p>
158
+ <p>Hello World! This is a Bullframe CSS v5.x HTML classless starter template.</p>
155
159
  </div>
156
160
  </body>
157
161
  </html>
@@ -165,7 +169,6 @@ Use JSDelivr CDN to include Bullframe CSS quickly:
165
169
  Make sure you have [Node.js](https://nodejs.org/en/download/) installed. Then run:
166
170
 
167
171
  ```bash
168
- # Install Bullframe CSS
169
172
  npm install bullframe.css
170
173
  ```
171
174
 
@@ -207,7 +210,7 @@ Bullframe provides three builds for theming:
207
210
 
208
211
  ### Customise and Rebuild All Styles
209
212
 
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:
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:
211
214
 
212
215
  ```bash
213
216
  # Build production-ready site/app
@@ -221,7 +224,7 @@ npm run preview
221
224
 
222
225
  ### Utilities
223
226
 
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.
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.
225
228
 
226
229
  #### Grid system
227
230