bullframe.css

v5.1.0

Published

5 months ago

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.

Downloads

189

Bullframe CSS v5.x

https://github.com/marcop135/bullframe.css

What is Bullframe CSS?

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.

Simply add it, start building, and stay in control.

Best Features

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 (right-to-left) support
Vite-friendly
Works well with classless setups

What's Included

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-dark.scss
│   ├── bullframe-utilities.scss
│   ├── bullframe-system-default.scss
│   ├── bullframe.scss
│   └── ...
├── vite.config.js
├── index.html
└── ...

Live Demo & Examples

👉 One-page demo: 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: live examples of utilities, components, and prototypes — great for quick testing, remixing, and sharing ideas.

Getting Started

CDN

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bullframe.css@5">

HTML Starter Template

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <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">
  </head>
  <body>
    <div class="bf-container">
      <!-- Add your site or application content here -->
      <p>Hello World! This is a Bullframe CSS v5.x HTML starter template.</p>
    </div>
  </body>
</html>

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.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <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">

    <!-- 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 v5.x HTML classless starter template.</p>
    </div>
  </body>
</html>

npm

Make sure you have Node.js installed. Then run:

npm install bullframe.css

Download

Download the latest release

Customization

Theming

Bullframe provides three builds for theming:

bullframe.css — light theme
bullframe-dark.css — dark theme
bullframe-system-default.css — theme based on user system preference (prefers-color-scheme)

Light Theme CDN (Default)

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bullframe.css@5/dist/css/bullframe.min.css">

Dark Theme CDN

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bullframe.css@5/dist/css/bullframe-dark.min.css">

System-default Theme CDN

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bullframe.css@5/dist/css/bullframe-system-default.min.css">

Customise and Rebuild All Styles

After installing Bullframe CSS via npm, you can use Vite.js to rebuild the framework as you prefer, adding your custom Sass variables and styles:

# Build production-ready site/app
npm run build

# Preview production build locally
npm run preview

Utilities

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

| 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 | ------------------------- | .bf-container | .bf-container--fluid | .bf-container--break-xs | .bf-container--break-md | .bf-container--break-lg | .bf-row | .bf-col-1 | .bf-col-2 | .bf-col-3 | .bf-col-4 | .bf-col-5 | .bf-col-6 | .bf-col-7 | .bf-col-8 | .bf-col-9 | .bf-col-10 | .bf-col-11 | .bf-col-12 | .no-gutters | Description | | ------------------------------------------------------------------------------------------------------------------------- | | Sets a centered block container with a max-width of 1140px, and a custom padding | | Sets a fluid centered block container with a custom padding | | Collapses all the columns when the viewport is 575px and below | | Collapses all the columns when the viewport is 767px and below | | Collapses all the columns when the viewport is 991px and below | | Sets a block container with a custom negative margin | | Sets a floated container with a custom padding and a width of 8.3333% | | Sets a floated container with a custom padding and a width of 16.666666666666664% | | Sets a floated container with a custom padding and a width of 25% | | Sets a floated container with a custom padding and a width of 33.33333333333333% | | Sets a floated container with a custom padding and a width of 41.66666666666667% | | Sets a floated container with a custom padding and a width of 50% | | Sets a floated container with a custom padding and a width of 58.333333333333336% | | Sets a floated container with a custom padding and a width of 66.66666666666666% | | Sets a floated container with a custom padding and a width of 75% | | Sets a floated container with a custom padding and a width of 83.33333333333334% | | Sets a floated container with a custom padding and a width of 91.66666666666666% | | Sets a floated container with a custom padding and a width of 100% | | Set margin-left, margin-right, padding-left and padding-right to 0 — to be applied to row and column containers |

Layout

| Utility class | Description | | ---------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | .bf-clearfix | Clears the float, read more | | .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 | | .bf-align-center-flex | Centers all elements with known height and width to a flexbox container, IE10+, read more | | .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 |

Spacing

| 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 |

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 |

Lists

| 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 | | .bf-table-responsive--zebra | Increases a responsive table readability adding horizontal zebra stripes |

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 |

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 |

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 |

Reduced motion

| 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 |

Browser compatibility

Desktop browsers

Latest two stable versions: Firefox, Chrome, Edge, Safari, Opera

Mobile browsers

Latest two stable versions: Firefox, Chrome, Edge, Mobile Safari, Opera

You can check the .browserslistrc file.

Contributing

Please read the contribution guidelines.

Changelog

Author

Marco Pontili

License

This project is licensed under the MIT License.