bullframe.css 4.2.1 → 5.0.0

package/README.md

@@ -1,428 +1,479 @@
-# bullframe.css
+# Bullframe CSS v5.x
 
 <p>
   <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 page">
-  </a>
-  <a href="https://app.netlify.com/sites/bullframecss/deploys">
-    <img src="https://api.netlify.com/api/v1/badges/20dc2e1f-4af2-49a1-ae68-941eb189c61a/deploy-status" alt="Netlify Status">
+    <img src="https://img.shields.io/npm/v/bullframe.css.svg?style=flat-square" alt="NPM version">
   </a>
   <a href="https://github.com/marcop135/bullframe.css/commits">
-    <img src="https://img.shields.io/github/last-commit/marcop135/bullframe.css?style=flat-square" alt="GitHub last commit">
+    <img src="https://img.shields.io/github/last-commit/marcop135/bullframe.css.svg?style=flat-square" alt="Last commit">
   </a>
   <a href="https://github.com/marcop135/bullframe.css/blob/master/LICENSE">
-    <img src="https://img.shields.io/github/license/marcop135/bullframe.css.svg?style=flat-square" alt="MIT license">
+    <img src="https://img.shields.io/github/license/marcop135/bullframe.css.svg?style=flat-square" alt="MIT License">
   </a>
 </p>
 
-<br>
-
-![bullframe.css logo](./docs/assets/images/branding/logo-full.png)
+<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">
+</picture>
 
 [https://github.com/marcop135/bullframe.css](https://github.com/marcop135/bullframe.css)
 
-bullframe.css is a Sass (SCSS) framework that works in a wide range of desktop and mobile browsers. It's a cross-browser and responsive collection of default HTML UI elements ([atoms](https://bradfrost.com/blog/post/atomic-web-design)) for your Sass project.
+---
+
+## What is Bullframe CSS?
 
-You could be easily use it for marketing sites, landing pages, mini sites, micro sites, blog posts, e-commerce product listings, help and documentation, and more.
+Bullframe CSS is a lightweight, modern Sass (SCSS) framework designed for fast, responsive, and accessible front-end development.
 
-**Just add bullframe.css in your webpage, write semantic HTML, and you are ready to go!**
+Perfect for landing pages, marketing sites, micro-sites, blogs, docs, product listings, and more.
 
-## Best features
+**Simply add it, start building, and stay in control.**
 
-- Wide range of desktop and mobile browsers support
-- Responsive-ness and style normalization *out-of-the-box*
-- Cross-browser form elements by default
-- Sass architecture
-- CSS BEM
+---
+
+## Best Features
+
+- Desktop and mobile browser support
+- Responsive layout and style normalization _out of the box_
+- Cross-browser form elements
+- JavaScript framework-agnostic
+- Sass-based architecture with BEM methodology
 - Responsive typography
 - Dark mode and theming support
-- RTL support
-- Gulp-friendly
-- Classless-friendly
+- RTL (right-to-left) support
+- Vite-friendly
+- Works well with classless setups
 
-## What's included
+---
 
-You'll see something like this:
+## What's Included
 
 ```text
 bullframe.css/
-└── dist/
-    ├── css/
-    │   ├── bullframe-classless.css
-    │   ├── bullframe-classless.min.css
-    │   ├── ...
-    │   ├── bullframe-dark.css
-    │   ├── bullframe-dark.min.css
-    │   ├── ...
-    │   ├── bullframe-utilities.css
-    │   ├── bullframe-utilities.min.css
-    │   ├── ...
-    │   ├── bullframe.css
-    │   ├── bullframe.min.css
-    │   ├── ...
-    │   ├── bullframe-classless.css.map
-    │   ├── bullframe.min.css.map
-    │   ├── ...
-└── src/scss/
-    └── forms/
-    └── miscellaneous/
-    └── mixins/
-    └── typography/
-    └── utilities/
-    └── variables/
-    ...
-    ├── bullframe-classless.scss
-    ├── bullframe-system-default.scss
-    ├── bullframe-dark.scss
-    ├── bullframe-utilities.scss
-    ├── bullframe.scss
-    ...
-└── gulpfile.js
-└── index.html
-...
+├── dist/
+│   └── css/
+│       ├── bullframe-classless.css
+│       ├── bullframe-classless.min.css
+│       ├── ...
+│       ├── bullframe-dark.css
+│       ├── bullframe-dark.min.css
+│       ├── ...
+│       ├── bullframe-utilities.css
+│       ├── bullframe-utilities.min.css
+│       ├── ...
+│       ├── bullframe.css
+│       ├── bullframe.min.css
+│       ├── ...
+│       ├── bullframe-classless.css.map
+│       ├── bullframe.min.css.map
+│       ├── ...
+├── src/scss/
+│   ├── forms/
+│   ├── miscellaneous/
+│   ├── mixins/
+│   ├── typography/
+│   ├── utilities/
+│   ├── variables/
+│   ├── bullframe-classless.scss
+│   ├── bullframe-dark.scss
+│   ├── bullframe-utilities.scss
+│   ├── bullframe-system-default.scss
+│   ├── bullframe.scss
+│   └── ...
+├── vite.config.js
+├── index.html
+└── ...
 ```
 
-## Getting started
-
-### Download
+---
 
-[Download the latest release](https://github.com/marcop135/bullframe.css/archive/master.zip)
+## Getting Started
 
 ### CDN
 
-JSDelivr
+Use JSDelivr CDN to include Bullframe CSS quickly:
 
 ```html
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bullframe.css@^4.0.0">
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bullframe.css@5" />
 ```
 
-### npm
+### HTML Starter Template
+
+<details><summary>Open HTML</summary>
+
+    <!DOCTYPE html>
+    <html lang="en">
+      <head>
+        <meta charset="utf-8">
+        <title>Bullframe CSS 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">
+      </head>
+      <body>
+        <div class="bf-container">
+          <!-- Add your site or application content here -->
+          <p>Hello world! This is a Bullframe CSS starter template.</p>
+        </div>
+      </body>
+    </html>
+
+</details>
+
+### HTML Classless Starter Template
+
+> [!NOTE]
+> What does "classless" mean?
+> No utility classes or extra markup needed. Just write semantic HTML and get clean, normalized styles.
+
+<details><summary>Open HTML</summary>
+
+    <!DOCTYPE html>
+    <html lang="en">
+      <head>
+        <meta charset="utf-8">
+        <title>Bullframe CSS 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">
+
+        <!-- Optional: center page content by default -->
+        <style>
+          body {
+            margin-left: auto;
+            margin-right: auto;
+            padding: 1.5rem;
+            max-width: 80rem;
+          }
+        </style>
+      </head>
+      <body>
+        <div class="bf-container">
+          <!-- Add your site or application content here -->
+          <p>Hello world! This is a Bullframe CSS Classless starter template.</p>
+        </div>
+      </body>
+    </html>
+
+</details>
+
+---
 
-Once you have installed [Node.js](https://nodejs.org/en/download/), you can run this command to install bullframe.css into your project:
+### npm
 
-``` bash
-# create a package.json file
-# $ npm init
+Make sure you have [Node.js](https://nodejs.org/en/download/) installed. Then run:
 
+```bash
+# Install Bullframe CSS
 npm install bullframe.css
 ```
 
-[What is Node?](https://en.m.wikipedia.org/wiki/Nodejs)
+---
 
-[What is npm?](https://www.npmjs.com/get-npm)
+### Download
 
-### Gulp.js
+[Download the latest release](https://github.com/marcop135/bullframe.css/archive/master.zip)
 
-After installing bullframe.css from npm, you may use [gulp.js](https://gulpjs.com/docs/en/getting-started/quick-start) to re-compile all files, and customize your Sass project as needed.
+---
 
-``` bash
-# navigate to /node_modules/bullframe.css
+## Customization
 
-# install all dependencies
-npm install
+### Theming
 
-# run gulp and have fun!
-gulp
-```
+Bullframe provides three builds for theming:
 
-[What is gulp.js?](https://en.m.wikipedia.org/wiki/Gulp.js)
+1. `bullframe.css` — light theme
+2. `bullframe-dark.css` — dark theme
+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))
 
-### HTML
+#### Light Theme CDN (Default)
 
 ```html
-<!doctype html>
-<html lang="en">
-<head>
-  <meta charset="utf-8">
-  <title>bullframe.css 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@4/dist/css/bullframe.min.css">
-</head>
-<body>
-  <div class="bf-container">
-    <!-- Add your site or application content here -->
-    <p>Hello world! This is a bullframe.css starter template</p>
-  </div>
-</body>
-</html>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bullframe.css@5/dist/css/bullframe.min.css">
 ```
 
-## Codepen
-
-Take a look at this [CodePen collection](https://codepen.io/collection/nxpjRe) and fork a ready-made templates of your choice.
-
-### Use bullframe.css as a CodePen template
-
-Click on the links below, and start a new pen in CodePen using bullframe.css.
-
-- [Light Theme (default)](https://codepen.io/pen?template=WNrwNNM)
-- [Dark Theme](https://codepen.io/pen?template=ExPmzBV)
-- [System Default (`prefers-color-scheme`)](https://codepen.io/pen?template=NWxjVQO)
-
-## Customization
-
-### No classes (class-less)
-
-What means "classless"?
-No classes, no utilities. Feel free to add yours and create your custom components.
-Read more on [css-tricks.com](https://css-tricks.com/no-class-css-frameworks/).
-
-Just drop the snippet below in the `<head>` of your webpage, and the job is done!
-Write semantic HTML and get nice styles and cross-browser normalization.
+#### Dark Theme CDN
 
 ```html
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bullframe.css@4/dist/css/bullframe-classless.min.css">
-
-<!-- Center the page (optional)  -->
-<style>
-  body {
-    margin-left: auto;
-    margin-right: auto;
-    padding: 1.5rem;
-    max-width: 80rem;
-  }
-</style>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bullframe.css@5/dist/css/bullframe-dark.min.css">
 ```
 
-### Theming
-
-There are three builds available:
-
-1. `bullframe.css`: the light theme
-2. `bullframe-dark.css`: the dark theme
-3. `bullframe-system-default.css`: the theme set by the user as default (which can be light or dark). Read more [on MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme).
-
-#### `bullframe.css`
-
-CDN
+#### System-default Theme CDN
 
 ```html
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bullframe.css@4/dist/css/bullframe.min.css">
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bullframe.css@5/dist/css/bullframe-system-default.min.css">
 ```
 
-#### `bullframe-dark.css`
+### Customise and Rebuild All Styles
 
-CDN
+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:
 
-```html
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bullframe.css@4/dist/css/">
+```bash
+# Build production-ready site/app
+npm run build
+
+# Preview production build locally
+npm run preview
 ```
 
-### Utilities - Reference
+---
+
+### Utilities
 
-A set of utilities for bullframe.css customisation:
+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.
 
 #### Grid system
 
-Breakpoints: 576, 768, 992 and 1200 pixels.
-
-| Utility class | Description |
-| ------------- | ----------- |
-| `.bf-container` | Sets a centered block container with a `max-width` of 1140px, and a custom padding |
-| `.bf-container--fluid` | Sets a fluid centered block container with a custom padding |
-| `.bf-container--break-xs` | Collapses all the columns when the viewport is 575px and below |
-| `.bf-container--break-md` | Collapses all the columns when the viewport is 767px and below |
-| `.bf-container--break-lg` | Collapses all the columns when the viewport is 991px and below |
-| `.bf-row` | Sets a block container with a custom negative margin |
-| `.bf-col-1` | Sets a floated container with a custom padding and a `width` of `8.3333%` |
-| `.bf-col-2` | Sets a floated container with a custom padding and a `width` of `16.666666666666664%` |
-| `.bf-col-3` | Sets a floated container with a custom padding and a `width` of `25%` |
-| `.bf-col-4` | Sets a floated container with a custom padding and a `width` of `33.33333333333333%` |
-| `.bf-col-5` | Sets a floated container with a custom padding and a `width` of `41.66666666666667%` |
-| `.bf-col-6` | Sets a floated container with a custom padding and a `width` of `50%` |
-| `.bf-col-7` | Sets a floated container with a custom padding and a `width` of `58.333333333333336%` |
-| `.bf-col-8` | Sets a floated container with a custom padding and a `width` of `66.66666666666666%` |
-| `.bf-col-9` | Sets a floated container with a custom padding and a `width` of `75%` |
-| `.bf-col-10` | Sets a floated container with a custom padding and a `width` of `83.33333333333334%` |
-| `.bf-col-11` | Sets a floated container with a custom padding and a `width` of `91.66666666666666%` |
-| `.bf-col-12` | Sets a floated container with a custom padding and a `width` of `100%` |
-| `.no-gutters` | Set `margin-left`, `margin-right`, `padding-left` and `padding-right` to `0` — to be applied to row and column containers |
+<details><summary>Open utilities</summary>
+
+| Variable             | Value  |
+| -------------------- | ------ |
+| `$bf-breakpoint-xs`  | 0      |
+| `$bf-breakpoint-sm`  | 576px  |
+| `$bf-breakpoint-md`  | 768px  |
+| `$bf-breakpoint-lg`  | 992px  |
+| `$bf-breakpoint-xl`  | 1200px |
+| `$bf-breakpoint-xxl` | 1400px |
+
+| Utility class             | Description                                                                                                               |
+| ------------------------- | ------------------------------------------------------------------------------------------------------------------------- |
+| `.bf-container`           | Sets a centered block container with a `max-width` of 1140px, and a custom padding                                        |
+| `.bf-container--fluid`    | Sets a fluid centered block container with a custom padding                                                               |
+| `.bf-container--break-xs` | Collapses all the columns when the viewport is 575px and below                                                            |
+| `.bf-container--break-md` | Collapses all the columns when the viewport is 767px and below                                                            |
+| `.bf-container--break-lg` | Collapses all the columns when the viewport is 991px and below                                                            |
+| `.bf-row`                 | Sets a block container with a custom negative margin                                                                      |
+| `.bf-col-1`               | Sets a floated container with a custom padding and a `width` of `8.3333%`                                                 |
+| `.bf-col-2`               | Sets a floated container with a custom padding and a `width` of `16.666666666666664%`                                     |
+| `.bf-col-3`               | Sets a floated container with a custom padding and a `width` of `25%`                                                     |
+| `.bf-col-4`               | Sets a floated container with a custom padding and a `width` of `33.33333333333333%`                                      |
+| `.bf-col-5`               | Sets a floated container with a custom padding and a `width` of `41.66666666666667%`                                      |
+| `.bf-col-6`               | Sets a floated container with a custom padding and a `width` of `50%`                                                     |
+| `.bf-col-7`               | Sets a floated container with a custom padding and a `width` of `58.333333333333336%`                                     |
+| `.bf-col-8`               | Sets a floated container with a custom padding and a `width` of `66.66666666666666%`                                      |
+| `.bf-col-9`               | Sets a floated container with a custom padding and a `width` of `75%`                                                     |
+| `.bf-col-10`              | Sets a floated container with a custom padding and a `width` of `83.33333333333334%`                                      |
+| `.bf-col-11`              | Sets a floated container with a custom padding and a `width` of `91.66666666666666%`                                      |
+| `.bf-col-12`              | Sets a floated container with a custom padding and a `width` of `100%`                                                    |
+| `.no-gutters`             | Set `margin-left`, `margin-right`, `padding-left` and `padding-right` to `0` — to be applied to row and column containers |
+
+</details>
 
 #### Layout
 
-| Utility class       | Description         |
-| -------------       | -------------       |
-| `.bf-clearfix` | Clears the float, [read more](http://nicolasgallagher.com/micro-clearfix-hack/) |
-| `.bf-hide` | Sets the `display` to `none` |
-| `.bf-hidden` | Sets the `display` to `none` and the `visibility` to `hidden` |
-| `.bf-text-hide` | Hides a text (AKA CSS image replacement) using a font `hack` and a combination o properties |
-| `.bf-sr-only` | Shows a text only if screen reader |
-| `.bf-sr-only.focusable` | Shows a text only if screen reader and focused |
-| `.bf-invisible` | Sets the `visibility` to `hidden` |
-| `.bf-visible` | Sets the `visibility` to `visible` |
-| `.bf-display-block` | Sets the `display` to `block` |
-| `.bf-display-block-center` | Sets the `display` to `block`, the left/right margins to `auto` and `text-align` to center |
-| `.bf-display-inline` | Sets the `display` to `inline` |
-| `.bf-display-inline-block` | Sets the `display` to `inline-block` |
-| `.bf-display-flex` | Sets the `display` to `flex` |
-| `.bf-display-inline-flex` | Sets the `display` to `inline-flex` |
-| `.bf-display-flex--justify-start` | Sets `justify-content` to `flex-start` |
-| `.bf-display-flex--justify-end` | Sets `justify-content` to `flex-end` |
-| `.bf-display-flex--justify-center` | Sets `justify-content` to `center` |
-| `.bf-display-flex--wrap` | Sets `flex-wrap` to `wrap` |
-| `.bf-display-flex--nowrap` | Sets `flex-wrap` to `nowrap` |
-| `.bf-float-left` | Sets the `float` to `left` |
-| `.bf-float-right` | Sets the `float` to `right` |
-| `.bf-position-fixed` | Sets the `position` to `fixed` |
-| `.bf-align-center-unknown` | Sets the `position` to `relative` |
-| `.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) |
-| `.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) |
-| `.bf-width-25` | Sets the `width` to `25%` |
-| `.bf-width-33` | Sets the `width` to `33.33333333333333%` |
-| `.bf-width-50` | Sets the `width` to `50%` |
-| `.bf-width-75` | Sets the `width` to `75%` |
-| `.bf-width-100` | Sets the `width` to `100%` |
-| `.bf-width-auto` | Sets the `width` to `auto` |
-| `.bf-z-index-1` | Set `z-index` to 1 |
-| `.bf-z-index-2` | Set `z-index` to 2 |
-| `.bf-z-index-3` | Set `z-index` to 3 |
-| `.bf-z-index-4` | Set `z-index` to 4 |
-| `.bf-z-index-5` | Set `z-index` to 5 |
-| `.bf-z-index-6` | Set `z-index` to 6 |
-| `.bf-z-index-7` | Set `z-index` to 7 |
-| `.bf-z-index-8` | Set `z-index` to 8 |
-| `.bf-z-index-9` | Set `z-index` to 9 |
-| `.bf-z-index-10` | Set `z-index` to 10 |
-| `.bf-z-index-20` | Set `z-index` to 20 |
-| `.bf-z-index-30` | Set `z-index` to 30 |
-| `.bf-z-index-40` | Set `z-index` to 40 |
-| `.bf-z-index-50` | Set `z-index` to 50 |
-| `.bf-z-index-60` | Set `z-index` to 60 |
-| `.bf-z-index-70` | Set `z-index` to 70 |
-| `.bf-z-index-80` | Set `z-index` to 80 |
-| `.bf-z-index-90` | Set `z-index` to 90 |
-| `.bf-z-index-100` | Set `z-index` to 100 |
-| `.bf-z-index-200` | Set `z-index` to 200 |
-| `.bf-z-index-300` | Set `z-index` to 300 |
+<details><summary>Open utilities</summary>
+
+| Utility class                      | Description                                                                                                                                                                                              |
+| ---------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `.bf-clearfix`                     | Clears the float, [read more](http://nicolasgallagher.com/micro-clearfix-hack/)                                                                                                                          |
+| `.bf-hide`                         | Sets the `display` to `none`                                                                                                                                                                             |
+| `.bf-hidden`                       | Sets the `display` to `none` and the `visibility` to `hidden`                                                                                                                                            |
+| `.bf-text-hide`                    | Hides a text (AKA CSS image replacement) using a font `hack` and a combination o properties                                                                                                              |
+| `.bf-sr-only`                      | Shows a text only if screen reader                                                                                                                                                                       |
+| `.bf-sr-only.focusable`            | Shows a text only if screen reader and focused                                                                                                                                                           |
+| `.bf-invisible`                    | Sets the `visibility` to `hidden`                                                                                                                                                                        |
+| `.bf-visible`                      | Sets the `visibility` to `visible`                                                                                                                                                                       |
+| `.bf-display-block`                | Sets the `display` to `block`                                                                                                                                                                            |
+| `.bf-display-block-center`         | Sets the `display` to `block`, the left/right margins to `auto` and `text-align` to center                                                                                                               |
+| `.bf-display-inline`               | Sets the `display` to `inline`                                                                                                                                                                           |
+| `.bf-display-inline-block`         | Sets the `display` to `inline-block`                                                                                                                                                                     |
+| `.bf-display-flex`                 | Sets the `display` to `flex`                                                                                                                                                                             |
+| `.bf-display-inline-flex`          | Sets the `display` to `inline-flex`                                                                                                                                                                      |
+| `.bf-display-flex--justify-start`  | Sets `justify-content` to `flex-start`                                                                                                                                                                   |
+| `.bf-display-flex--justify-end`    | Sets `justify-content` to `flex-end`                                                                                                                                                                     |
+| `.bf-display-flex--justify-center` | Sets `justify-content` to `center`                                                                                                                                                                       |
+| `.bf-display-flex--wrap`           | Sets `flex-wrap` to `wrap`                                                                                                                                                                               |
+| `.bf-display-flex--nowrap`         | Sets `flex-wrap` to `nowrap`                                                                                                                                                                             |
+| `.bf-float-left`                   | Sets the `float` to `left`                                                                                                                                                                               |
+| `.bf-float-right`                  | Sets the `float` to `right`                                                                                                                                                                              |
+| `.bf-position-fixed`               | Sets the `position` to `fixed`                                                                                                                                                                           |
+| `.bf-align-center-unknown`         | Sets the `position` to `relative`                                                                                                                                                                        |
+| `.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)                                                |
+| `.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) |
+| `.bf-width-25`                     | Sets the `width` to `25%`                                                                                                                                                                                |
+| `.bf-width-33`                     | Sets the `width` to `33.33333333333333%`                                                                                                                                                                 |
+| `.bf-width-50`                     | Sets the `width` to `50%`                                                                                                                                                                                |
+| `.bf-width-75`                     | Sets the `width` to `75%`                                                                                                                                                                                |
+| `.bf-width-100`                    | Sets the `width` to `100%`                                                                                                                                                                               |
+| `.bf-width-auto`                   | Sets the `width` to `auto`                                                                                                                                                                               |
+| `.bf-z-index-1`                    | Set `z-index` to 1                                                                                                                                                                                       |
+| `.bf-z-index-2`                    | Set `z-index` to 2                                                                                                                                                                                       |
+| `.bf-z-index-3`                    | Set `z-index` to 3                                                                                                                                                                                       |
+| `.bf-z-index-4`                    | Set `z-index` to 4                                                                                                                                                                                       |
+| `.bf-z-index-5`                    | Set `z-index` to 5                                                                                                                                                                                       |
+| `.bf-z-index-6`                    | Set `z-index` to 6                                                                                                                                                                                       |
+| `.bf-z-index-7`                    | Set `z-index` to 7                                                                                                                                                                                       |
+| `.bf-z-index-8`                    | Set `z-index` to 8                                                                                                                                                                                       |
+| `.bf-z-index-9`                    | Set `z-index` to 9                                                                                                                                                                                       |
+| `.bf-z-index-10`                   | Set `z-index` to 10                                                                                                                                                                                      |
+| `.bf-z-index-20`                   | Set `z-index` to 20                                                                                                                                                                                      |
+| `.bf-z-index-30`                   | Set `z-index` to 30                                                                                                                                                                                      |
+| `.bf-z-index-40`                   | Set `z-index` to 40                                                                                                                                                                                      |
+| `.bf-z-index-50`                   | Set `z-index` to 50                                                                                                                                                                                      |
+| `.bf-z-index-60`                   | Set `z-index` to 60                                                                                                                                                                                      |
+| `.bf-z-index-70`                   | Set `z-index` to 70                                                                                                                                                                                      |
+| `.bf-z-index-80`                   | Set `z-index` to 80                                                                                                                                                                                      |
+| `.bf-z-index-90`                   | Set `z-index` to 90                                                                                                                                                                                      |
+| `.bf-z-index-100`                  | Set `z-index` to 100                                                                                                                                                                                     |
+| `.bf-z-index-200`                  | Set `z-index` to 200                                                                                                                                                                                     |
+| `.bf-z-index-300`                  | Set `z-index` to 300                                                                                                                                                                                     |
+
+</details>
 
 #### Spacing
 
-  | Utility class | Description |
-| ------------- | ----------- |
-| `.bf-m-0` | Sets the `margin` to `0` |
-| `.bf-m-t-0` | Sets the `margin-top` to `0` |
-| `.bf-m-b-0` | Sets the `margin-bottom` to `0` |
-| `.bf-m-l-0` | Sets the `margin-left` to `0` |
-| `.bf-m-r-0` | Sets the `margin-right` to `0` |
-| `.bf-m-b-1` | Sets the `margin-bottom` to a custom value that matches the grid system gutter |
-| `.bf-m-b-2` | Sets the `margin-bottom` to a custom value |
-| `.bf-m-b-3` | Sets the `margin-bottom` to a custom value |
-| `.bf-m-b-4` | Sets the `margin-bottom` to a custom value |
-| `.bf-p-0` | Sets the `padding` to `0` |
-| `.bf-p-t-0` | Sets the `padding-top` to `0` |
-| `.bf-p-b-0` | Sets the `padding-bottom` to `0` |
-| `.bf-p-l-0` | Sets the `padding-left` to `0` |
-| `.bf-p-r-0` | Sets the `padding-right` to `0` |
-| `.bf-p-t-1` | Sets the `padding-top` to a custom value that matches the grid system gutter |
-| `.bf-p-t-2` | Sets the `padding-top` to a custom value |
-| `.bf-p-t-3` | Sets the `padding-top` to a custom value |
-| `.bf-p-t-4` | Sets the `padding-top` to a custom value |
-| `.bf-p-t-1` | Sets the `padding-bottom` to a custom value that matches the grid system gutter |
-| `.bf-p-b-2` | Sets the `padding-bottom` to a custom value |
-| `.bf-p-b-3` | Sets the `padding-bottom` to a custom value |
-| `.bf-p-b-4` | Sets the `padding-bottom` to a custom value |
+<details><summary>Open utilities</summary>
+
+| Utility class | Description                                                                               |
+| ------------- | ----------------------------------------------------------------------------------------- |
+| `.bf-m-0`     | Sets the `margin` to `0`                                                                  |
+| `.bf-m-t-0`   | Sets the `margin-top` to `0`                                                              |
+| `.bf-m-t-1`   | Sets the `margin-top` to a custom medium spacing value (`$bf-spacing-md-rem`)             |
+| `.bf-m-t-2`   | Sets the `margin-top` to a custom large spacing value (`$bf-spacing-lg-rem`)              |
+| `.bf-m-t-3`   | Sets the `margin-top` to a custom extra large spacing value (`$bf-spacing-xl-rem`)        |
+| `.bf-m-t-4`   | Sets the `margin-top` to a custom extra extra large spacing value (`$bf-spacing-xxl-rem`) |
+| `.bf-m-b-0`   | Sets the `margin-bottom` to `0`                                                           |
+| `.bf-m-b-1`   | Sets the `margin-bottom` to a custom value that matches the grid system gutter            |
+| `.bf-m-b-2`   | Sets the `margin-bottom` to a custom value                                                |
+| `.bf-m-b-3`   | Sets the `margin-bottom` to a custom value                                                |
+| `.bf-m-b-4`   | Sets the `margin-bottom` to a custom value                                                |
+| `.bf-m-l-0`   | Sets the `margin-left` to `0`                                                             |
+| `.bf-m-r-0`   | Sets the `margin-right` to `0`                                                            |
+| `.bf-p-0`     | Sets the `padding` to `0`                                                                 |
+| `.bf-p-t-0`   | Sets the `padding-top` to `0`                                                             |
+| `.bf-p-b-0`   | Sets the `padding-bottom` to `0`                                                          |
+| `.bf-p-l-0`   | Sets the `padding-left` to `0`                                                            |
+| `.bf-p-r-0`   | Sets the `padding-right` to `0`                                                           |
+| `.bf-p-t-1`   | Sets the `padding-top` to a custom value that matches the grid system gutter              |
+| `.bf-p-t-2`   | Sets the `padding-top` to a custom value                                                  |
+| `.bf-p-t-3`   | Sets the `padding-top` to a custom value                                                  |
+| `.bf-p-t-4`   | Sets the `padding-top` to a custom value                                                  |
+| `.bf-p-t-1`   | Sets the `padding-bottom` to a custom value that matches the grid system gutter           |
+| `.bf-p-b-2`   | Sets the `padding-bottom` to a custom value                                               |
+| `.bf-p-b-3`   | Sets the `padding-bottom` to a custom value                                               |
+| `.bf-p-b-4`   | Sets the `padding-bottom` to a custom value                                               |
+
+</details>
 
 #### Texts
 
-| Utility class | Description |
-| ------------- | ----------- |
-| `.bf-t-transform-uppercase` | Sets `transform` to a `uppercase` (AKA capitalizes a text) |
-| `.bf-t-transform-none` | Sets `transform` to a `none` |
-| `.bf-t-left` | Sets `text-align` to a `left` |
-| `.bf-t-center` | Sets `text-align` to a `center` |
-| `.bf-t-right` | Sets `text-align` to a `right` |
-| `.bf-t-shadow` | Sets a basic text shadow |
-| `.bf-t-italic` | Sets `font-style` to a `italic` |
-| `.bf-t-style-normal` | Sets `font-style` to a `normal` |
-| `.bf-t-weight-300` | Sets `font-weight` to `300` (AKA light) |
-| `.bf-t-weight-400` | Sets `font-weight` to `400` (AKA normal) |
-| `.bf-t-weight-500` | Sets `font-weight` to `500` (AKA medium) |
-| `.bf-t-weight-600` | Sets `font-weight` to `600` (AKA semi-bold) |
-| `.bf-t-weight-700` | Sets `font-weight` to `700` (AKA bold) |
-| `.bf-t-weight-800` | Sets `font-weight` to `800` (AKA black) |
-| `.bf-text-break` | Sets `word-wrap` to a `break-word`, applied by default to the `body` |
-| `.bf-t-truncate` | Truncates a very long text and replaces the missing text with an ellipsis |
-| `.bf-t-truncate--multiline-2` | Truncates a long doubled line text and replaces the missing text with an ellipsis (no IE) |
-| `.bf-t-truncate--multiline-3` | Truncates a long tripled line text and replaces the missing text with an ellipsis (no IE) |
-| `.bf-no-select` | Blocks user text selection |
-| `.bf-font-sans-serif` | Sets `font-family` to a `sans-serif`, and a combination of cross-browser system UI sans-serif font families  |
-| `.bf-font-serif` | Sets `font-family` to a `serif`, and a combination of cross-browser system UI serif font families |
-| `.bf-font-monospace` | Sets `font-family` to a `monospace`, a combination of widely supported monospaced font families |
-| `.bf-h1` | Matches the font styling of a `h1` |
-| `.bf-h2` | Matches the font styling of a `h2` |
-| `.bf-h3` | Matches the font styling of a `h3` |
-| `.bf-h4` | Matches the font styling of a `h4` |
-| `.bf-h5` | Matches the font styling of a `h5` |
-| `.bf-h6` | Matches the font styling of a `h6` |
-| `.bf-lead` | Sets `font-size` to `125%` |
-| `.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` |
+<details><summary>Open utilities</summary>
+
+| Utility class                 | Description                                                                                                                     |
+| ----------------------------- | ------------------------------------------------------------------------------------------------------------------------------- |
+| `.bf-t-transform-uppercase`   | Sets `transform` to a `uppercase` (AKA capitalizes a text)                                                                      |
+| `.bf-t-transform-none`        | Sets `transform` to a `none`                                                                                                    |
+| `.bf-t-left`                  | Sets `text-align` to a `left`                                                                                                   |
+| `.bf-t-center`                | Sets `text-align` to a `center`                                                                                                 |
+| `.bf-t-right`                 | Sets `text-align` to a `right`                                                                                                  |
+| `.bf-t-shadow`                | Sets a basic text shadow                                                                                                        |
+| `.bf-t-italic`                | Sets `font-style` to a `italic`                                                                                                 |
+| `.bf-t-style-normal`          | Sets `font-style` to a `normal`                                                                                                 |
+| `.bf-t-weight-300`            | Sets `font-weight` to `300` (AKA light)                                                                                         |
+| `.bf-t-weight-400`            | Sets `font-weight` to `400` (AKA normal)                                                                                        |
+| `.bf-t-weight-500`            | Sets `font-weight` to `500` (AKA medium)                                                                                        |
+| `.bf-t-weight-600`            | Sets `font-weight` to `600` (AKA semi-bold)                                                                                     |
+| `.bf-t-weight-700`            | Sets `font-weight` to `700` (AKA bold)                                                                                          |
+| `.bf-t-weight-800`            | Sets `font-weight` to `800` (AKA black)                                                                                         |
+| `.bf-text-break`              | Sets `word-wrap` to a `break-word`, applied by default to the `body`                                                            |
+| `.bf-t-truncate`              | Truncates a very long text and replaces the missing text with an ellipsis                                                       |
+| `.bf-t-truncate--multiline-2` | Truncates a long doubled line text and replaces the missing text with an ellipsis (no IE)                                       |
+| `.bf-t-truncate--multiline-3` | Truncates a long tripled line text and replaces the missing text with an ellipsis (no IE)                                       |
+| `.bf-no-select`               | Blocks user text selection                                                                                                      |
+| `.bf-font-sans-serif`         | Sets `font-family` to a `sans-serif`, and a combination of cross-browser system UI sans-serif font families                     |
+| `.bf-font-serif`              | Sets `font-family` to a `serif`, and a combination of cross-browser system UI serif font families                               |
+| `.bf-font-monospace`          | Sets `font-family` to a `monospace`, a combination of widely supported monospaced font families                                 |
+| `.bf-h1`                      | Matches the font styling of a `h1`                                                                                              |
+| `.bf-h2`                      | Matches the font styling of a `h2`                                                                                              |
+| `.bf-h3`                      | Matches the font styling of a `h3`                                                                                              |
+| `.bf-h4`                      | Matches the font styling of a `h4`                                                                                              |
+| `.bf-h5`                      | Matches the font styling of a `h5`                                                                                              |
+| `.bf-h6`                      | Matches the font styling of a `h6`                                                                                              |
+| `.bf-lead`                    | Sets `font-size` to `125%`                                                                                                      |
+| `.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` |
+
+</details>
 
 #### Lists
 
-| Utility class | Description |
-| ------------- | ----------- |
+<details><summary>Open utilities</summary>
+
+| Utility class       | Description                                                                      |
+| ------------------- | -------------------------------------------------------------------------------- |
 | `.bf-list-unstyled` | Removes margins, paddings and `li` list styles from `ul`, `ol` and `dd` elements |
 
 #### Tables
 
-| Utility class | Description |
-| ------------- | ----------- |
-| `.bf-table` | Sets a border and custom paddings and margins to a table |
-| `.bf-table-responsive` | Adds responsiveness to a table container |
-| `.bf-table--zebra` | Increases a table readability adding horizontal zebra stripes |
+| Utility class                 | Description                                                              |
+| ----------------------------- | ------------------------------------------------------------------------ |
+| `.bf-table`                   | Sets a border and custom paddings and margins to a table                 |
+| `.bf-table-responsive`        | Adds responsiveness to a table container                                 |
+| `.bf-table--zebra`            | Increases a table readability adding horizontal zebra stripes            |
 | `.bf-table-responsive--zebra` | Increases a responsive table readability adding horizontal zebra stripes |
 
+</details>
+
 #### Embeds
 
-| Utility class | Description |
-| ------------- | ----------- |
-| `.bf-embed-responsive` | Adds responsiveness to an `iframe`, `embed`, `object`, `video` or *general purpouse element* (e.g. youtube embed)  |
-| `.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) |
-| `.bf-embed-responsive--item` | A *general purpouse element* element that behaves like a `video` |
+<details><summary>Open utilities</summary>
+
+| Utility class                | Description                                                                                                                             |
+| ---------------------------- | --------------------------------------------------------------------------------------------------------------------------------------- |
+| `.bf-embed-responsive`       | Adds responsiveness to an `iframe`, `embed`, `object`, `video` or _general purpouse element_ (e.g. youtube embed)                       |
+| `.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) |
+| `.bf-embed-responsive--item` | A _general purpouse element_ element that behaves like a `video`                                                                        |
+
+</details>
 
 #### Buttons
 
-| Utility class | Description |
-| ------------- | ----------- |
-| `.bf-btn` | Creates a standard gray-looking button (e.g. `<a class="bf-btn" href="...">...</a>`)|
-| `.bf-btn--primary` | Creates a primary blue-looking button |
+<details><summary>Open utilities</summary>
+
+| Utility class      | Description                                                                          |
+| ------------------ | ------------------------------------------------------------------------------------ |
+| `.bf-btn`          | Creates a standard gray-looking button (e.g. `<a class="bf-btn" href="...">...</a>`) |
+| `.bf-btn--primary` | Creates a primary blue-looking button                                                |
+
+</details>
 
 #### Form states
 
-| Utility class | Description |
-| ------------- | ----------- |
-| `.bf-focused` | Sets a blue-looking focused ring and shadow around an `input`, `textarea` or `select` |
-| `.bf-disabled` | Sets `opacity` to `0.5`, and resets a combinations of properties to the default value if is disabled  |
-| `.bf-invalid` | Sets a red-looking focused ring and shadow around an invalid `input`, `textarea` or `select` |
+<details><summary>Open utilities</summary>
+
+| Utility class  | Description                                                                                          |
+| -------------- | ---------------------------------------------------------------------------------------------------- |
+| `.bf-focused`  | Sets a blue-looking focused ring and shadow around an `input`, `textarea` or `select`                |
+| `.bf-disabled` | Sets `opacity` to `0.5`, and resets a combinations of properties to the default value if is disabled |
+| `.bf-invalid`  | Sets a red-looking focused ring and shadow around an invalid `input`, `textarea` or `select`         |
+
+</details>
 
 #### Reduced motion
 
-| Utility class | Description |
-| ------------- | ----------- |
+<details><summary>Open utilities</summary>
+
+| Utility class        | Description                                                                                                                                                                                                                             |
+| -------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | `.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) |
 
+</details>
+
+---
+
 ## Browser compatibility
 
 ### Desktop browsers
 
-- Latest stable two: Firefox, Chrome, Edge, Safari, Opera
-- IE 11+
+- Latest two stable versions: Firefox, Chrome, Edge, Safari, Opera
 
 ### Mobile browsers
 
-- Latest stable: Firefox, Chrome, Edge, Opera, Mobile Safari
-
-You might take a look at the [.browserslistrc](https://github.com/marcop135/bullframe.css/blob/master/.browserslistrc) file for [Autoprefixer](https://github.com/postcss/autoprefixer)
-
-### Screenshots
+- Latest two stable versions: Firefox, Chrome, Edge, Mobile Safari, Opera
 
-How can I quickly determine if every HTML element works well on all browsers?
+You can check the [.browserslistrc](https://github.com/marcop135/bullframe.css/blob/master/.browserslistrc) file.
 
-Take a look at some [screenshots and screencasts](https://github.com/marcop135/bullframe.css/tree/master/docs/screenshots-screencasts), organized by rendering engines (blink, gecko, trident, webkit).
-
-## Contributors
-
-[@englishextra](https://github.com/englishextra) the project is still live thanks to you!
+---
 
 ## Contributing
 
@@ -432,17 +483,10 @@ Please read the [contribution guidelines](https://github.com/marcop135/bullframe
 
 [Changelog](https://github.com/marcop135/bullframe.css/blob/master/CHANGELOG.md)
 
-## Acknowledgements
-
-bullframe.css incorporates some of the styles found on some amazing CSS boilerplates and frameworks across the web. *Thank you!*
+## Author
 
-- @necolas [/normalize.css](https://github.com/necolas/normalize.css) for the extensive old browsers bug fixing documentation
-- @h5bp [/main.css](https://github.com/h5bp/main.css) for the excellent print styles base and the keyboard utilities
-- @twbs [/bootstrap](https://github.com/twbs/bootstrap) for some neat typography tricks, responsive embeds, reboot styles, base24 SVG icons, button styles, grid system breakpoints and spacing utilities *(a lot!)*
-- @kognise [/water.css](https://github.com/kognise/water.css) for the "classless" concept inspiration and some form tricks
-- @csswizardry @inuitcss [/inuit.css](https://github.com/inuitcss/inuitcss) for some advanced Sass tips and tricks
-- @jensimmons [/cssremedy](https://github.com/jensimmons/cssremedy) for the prefers-reduced-motion snippet
+[Marco Pontili](https://marcopontili.com)
 
 ## License
 
-The MIT License (MIT) - [http://opensource.org/licenses/MIT](http://opensource.org/licenses/MIT) "The MIT License"
+This project is licensed under the [MIT License](LICENSE).