bullframe.css 5.0.0 → 5.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Marco Pontili
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -13,9 +13,9 @@
 </p>
 
 <picture>
-  <source media="(prefers-color-scheme: dark)" srcset="./dist/docs/github-readme/bf-logo-full-dark.png">
-  <source media="(prefers-color-scheme: light)" srcset="./dist/docs/github-readme/bf-logo-full-light.png">
-  <img alt="Bullframe CSS logo" src="./dist/docs/github-readme/bg-logo-full-light.png">
+  <source media="(prefers-color-scheme: dark)" srcset="src/docs/github-readme/bf-logo-full-dark.png">
+  <source media="(prefers-color-scheme: light)" srcset="src/docs/github-readme/bf-logo-full-light.png">
+  <img alt="Bullframe CSS logo" src="https://raw.githubusercontent.com/marcop135/bullframe.css/master/src/docs/github-readme/bf-logo-full-light.png">
 </picture>
 
 [https://github.com/marcop135/bullframe.css](https://github.com/marcop135/bullframe.css)
@@ -24,7 +24,7 @@
 
 ## What is Bullframe CSS?
 
-Bullframe CSS is a lightweight, modern Sass (SCSS) framework designed for fast, responsive, and accessible front-end development.
+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.
 
 Perfect for landing pages, marketing sites, micro-sites, blogs, docs, product listings, and more.
 
@@ -34,7 +34,6 @@ Perfect for landing pages, marketing sites, micro-sites, blogs, docs, product li
 
 ## Best Features
 
-- Desktop and mobile browser support
 - Responsive layout and style normalization _out of the box_
 - Cross-browser form elements
 - JavaScript framework-agnostic
@@ -88,14 +87,19 @@ bullframe.css/
 
 ---
 
+## Live Demo & Examples
+
+- 👉 **[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
+- 🧪 **[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.
+
+---
+
 ## Getting Started
 
 ### CDN
 
-Use JSDelivr CDN to include Bullframe CSS quickly:
-
 ```html
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bullframe.css@5" />
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bullframe.css@5">
 ```
 
 ### HTML Starter Template
@@ -106,7 +110,7 @@ Use JSDelivr CDN to include Bullframe CSS quickly:
     <html lang="en">
       <head>
         <meta charset="utf-8">
-        <title>Bullframe CSS HTML Starter Template</title>
+        <title>Bullframe CSS v5.x HTML Starter Template</title>
         <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 
         <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:
       <body>
         <div class="bf-container">
           <!-- Add your site or application content here -->
-          <p>Hello world! This is a Bullframe CSS starter template.</p>
+          <p>Hello World! This is a Bullframe CSS v5.x HTML starter template.</p>
         </div>
       </body>
     </html>
@@ -133,7 +137,7 @@ Use JSDelivr CDN to include Bullframe CSS quickly:
     <html lang="en">
       <head>
         <meta charset="utf-8">
-        <title>Bullframe CSS Classless Starter Template</title>
+        <title>Bullframe CSS 5.x Classless Starter Template</title>
         <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 
         <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:
       <body>
         <div class="bf-container">
           <!-- Add your site or application content here -->
-          <p>Hello world! This is a Bullframe CSS Classless starter template.</p>
+          <p>Hello World! This is a Bullframe CSS v5.x HTML classless starter template.</p>
         </div>
       </body>
     </html>
@@ -165,7 +169,6 @@ Use JSDelivr CDN to include Bullframe CSS quickly:
 Make sure you have [Node.js](https://nodejs.org/en/download/) installed. Then run:
 
 ```bash
-# Install Bullframe CSS
 npm install bullframe.css
 ```
 
@@ -207,7 +210,7 @@ Bullframe provides three builds for theming:
 
 ### Customise and Rebuild All Styles
 
-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:
+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:
 
 ```bash
 # Build production-ready site/app
@@ -221,7 +224,7 @@ npm run preview
 
 ### Utilities
 
-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.
+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.
 
 #### Grid system