bullframe.css is an open-source Sass (SCSS) project available on GitHub and npm. It provides cross-browser, responsive default UI styles for semantic HTML. Perfect for a variety of web projects.
It can be easily used for marketing sites, landing pages, microsites, blogs, product listings, help pages, documentation, and more.
Best features
- Broad support for desktop and mobile browsers (even IE)
- Responsive layout and style reset included
- Default styling for consistent form elements across browsers
- Modular Sass-based architecture
- BEM naming convention
- Responsive typography system
- Built-in dark mode and theming
- Right-to-left (RTL) support
- Supports classless HTML too
How it works
Write semantic HTML, include the build you prefer, and you're ready to go.
Choose from 5 builds: light (default), dark, auto (system-default), classless (no-class) , or utility-only.
Use it for landing pages, micro sites, blogs, product listings, help docs, and more.
Usage
Clone or fork the repo
$ git clone https://github.com/marcop135/bullframe.css.git
Install bullframe.css via npm
$ npm install bullframe.css
Or use a CDN
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bullframe.css@4">
HTML5 starter template:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- bullframe.css 4.X -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bullframe.css@4">
</head>
<body>
<div class="bf-container">
<p>Add your site or application content here.</p>
</div>
</body>
</html>Try it live on CodePen
Please enable JavaScript and cookies, or disable your ad blocker to view the live CodePen embed below.
Check out the CodePen collection to fork and customise a ready-made template.
Conclusion
This small but powerful framework has helped me countless times over the years —from typography fixes to quick layout helpers. It’s a clean, minimal starting point for scalable frontends.