bullframe.css is an open-source project on GitHub and npm, providing cross-browser and responsive default HTML UI elements in Sass (SCSS). It's versatile for several types of web pages.
Best features
- Wide range of desktop and mobile browsers support
- Responsive-ness and style normalization out-of-the-box
- Cross-browser form elements by default
- Sass architecture
- CSS BEM
- Responsive typography
- Dark mode and theming support
- RTL support
- Gulp-friendly
- Classless-friendly
How it works
Write semantic HTML, drop the build you need, and you are ready to go everywhere!
5 builds available: light (default), dark mode, system-default classless (no-class) , and custom utilities only.
You could be easily use it for marketing sites, landing pages, mini sites, micro sites, blog posts, e-commerce product listings, help and documentation, and more.
Test page
Take a quick look at a wide range of HTML elements, divided into several sections and rendered into unusual combinations following this link .
Usage
Clone the project via CLI
$ git clone https://github.com/marcop135/bullframe.css.git
Install it via npm
$ npm install bullframe.css
Use a CDN
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bullframe.css">
And this is a 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: use latest compiled and minified version -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bullframe.css">
</head>
<body>
<div class="bf-container">
<!-- Add your site or application content here -->
<p>Hello world! This is a bullframe.css starter template</p>
</div>
</body>
</html>Try it on CodePen
Take a look at this CodePen collection and fork a ready-made template of your choice.
Utilities reference
You can check this list of utilites to create and customise bullframe.css using HTML classes.
Conclusion
This little but powerful project has helped me countless times over the years to quickly improve typography, add bug fixes, and for general tips and tricks. It’s a simple starting point for many scalable web projects.