Bullframe CSS v5.x

July 8, 2025 · View on GitHub

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

Open HTML

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

Open HTML

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

Open utilities

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

Layout

Open utilities

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

Open utilities

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

Open utilities

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

Open utilities

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

Open utilities

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

Open utilities

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

Open utilities

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

Open utilities

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.

Bullframe CSS v5.x

What is Bullframe CSS?

Best Features

What's Included

Live Demo & Examples

Getting Started

CDN

HTML Starter Template

HTML Classless Starter Template

npm

Download

Customization

Theming

Light Theme CDN (Default)

Dark Theme CDN

System-default Theme CDN

Customise and Rebuild All Styles

Utilities

Grid system

Layout

Spacing

Texts

Lists

Tables

Embeds

Buttons

Form states

Reduced motion

Browser compatibility

Desktop browsers

Mobile browsers

Contributing

Changelog

Author

License