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>

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

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

</details>

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

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

Bullframe.css

Install / Use

README