---
url: https://bullframecss.marcopontili.com/getting-started.md
---
# Getting started
Install Bullframe, pick a markup mode and a theme, link one CSS file. Default build is ~8 KB gzipped. No runtime JS.
## Markup modes
Two ways to write HTML. Same components and a11y defaults.
### Class-based
Use `.bf-*` for layout, buttons, and forms.
```html
Hello
```
### Classless
Element selectors only. No classes required for base styling.
```html
Hello
Just semantic HTML.
```
## Themes
Each markup mode has three theme files:
| Theme | Suffix | Behavior |
| ------ | ----------------- | ---------------------- |
| Light | (none) | Always light |
| Dark | `-dark` | Always dark |
| System | `-system-default` | `prefers-color-scheme` |
Examples: `bullframe-dark.css`, `bullframe-classless-system-default.css`.
## Utilities companion
`bullframe-utilities.css` is not a markup mode. Add it when you already have a reset and only need `.bf-*` helpers.
```html
Hello
```
## CDN
Quick drop-in (latest published package entry):
```html
```
**Recommended for production:** pin an exact version, point at a published `.min.css` file, and add Subresource Integrity plus `crossorigin`. Package-root / unversioned CDN URLs are not SRI-safe.
```html
```
Swap the filename for another build (`bullframe-classless.min.css`, `bullframe-dark.min.css`, …). Hashes for all seven builds: [sri.json](/sri.json).
## npm
Subpath exports for every variant:
```bash
npm install bullframe.css
```
```css
@import 'bullframe.css';
@import 'bullframe.css/dark';
@import 'bullframe.css/system';
@import 'bullframe.css/classless';
@import 'bullframe.css/classless/dark';
@import 'bullframe.css/classless/system';
@import 'bullframe.css/utilities';
```
```javascript
import 'bullframe.css';
import 'bullframe.css/dark';
import 'bullframe.css/system';
import 'bullframe.css/classless';
import 'bullframe.css/classless/dark';
import 'bullframe.css/classless/system';
import 'bullframe.css/utilities';
```
## Download
Self-host from the [v6.0.0 archive](https://github.com/marcop135/bullframe.css/archive/refs/tags/v6.0.0.zip). Source maps ship beside the minified CSS in `dist/css/`.
## Starter HTML
### Class-based
```html
Bullframe CSS Starter