A highly configurable utility class library written in Sass.
Full documentation at backbreezecss.com
- Written in Sass, configuration in Sass
- Project specific configuration instead of lots of defaults, designed to build project specific style systems
- 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
Utility classes are CSS classes that only apply one CSS property and value. The classname 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 lot of CSS properties in the spec. So that a lot can be achieved by combining classes. Some 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 componets any time
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.
- Developers that enjoy working with utility classes and appreciate the approach.
- Developers that like to work with Sass.
- Developers that what to start migrating existing Sass projects to use utility classes.