Features
- Written in Sass, configuration in Sass.
- Designed to build project specific style systems, project specific configuration instead of lots of defaults.
- Can be dropped in to existing Sass projects.
- Responsive and mobile first.
- Short class names derived from the CSS property they apply to make guessing class names easy.
What are utility classes?
Utility classes are CSS classes that only apply one CSS property and value. The class name reflects what property and value are applied.
.ta-center {text-align: center;}
Styling is achieved by combining multiple classes in HTML rather then writing, and possibly repeating, CSS.
<div class="ta-center fs-30 lh-1.2 fw-bold"><!-- --></div>
Backbreeze provides classes for a large number of CSS properties. This allows to resolve most styling situations by just combining classes, eliminating the need to write new CSS. Some other benefits of this approach are:
- Fast development
- Small CSS files (when processed correctly)
- No need to worry about naming things
- Flexibility to make exceptions / variations of components any time
Why Sass?
Sass is a widely used industry standard for authoring stylesheets. In contrast to combining different PostCSS plugins it has a full language spec that provides a solid authoring experience and makes it easy to port code between projects. PostCSS is great to process the generated CSS and its use is encouraged when using Backbreeze in production.
Inspired by Tailwind
Backbreeze is inspired by the Tailwind CSS framework. It aims to be an alternative that you can drop into existing projects that use Sass.
Who is this library for?
- Developers that enjoy working with utility classes and appreciate the approach.
- Developers that like to work with Sass.
- Developers that want to migrate existing Sass projects to use utility classes.