Basement CSS is not a framework; rather, a toolkit. It is a collection of composable utility classes for building responsive web components. Basement is unopinionated — there are no colors, margins, .Cards or .Buttons defined here. It is written entirely in Sass, so all settings can be overwritten by simply defining variables in a .scss file.

Basement CSS is intended to be configured to meet the demands of any grid, spacing scale, color palette, and selection of aspect ratios. Class names are designed to avoid collisions so as new spacing units and colors are added, we don't have to make any changes to the existing codebase. For example .pb2 assigns padding-bottom: 2rem to an element, it does not assign padding-bottom: $spacing-2. This makes design systems scalable and reduces developer strain :)

We wrote Basement CSS with ease of understanding and maintenance in mind. The class names reflect CSS properties as closely as possible. .flex assigns display: flex to the element; mt2 assigns margin-top: 2rem. There will always be some learning curve, but we think that these generic utility classes allow any developer with an understanding of CSS to jump on a project and visualize the markup without any other domain-specific knowledge.

While there are no .Card classes here, a codebase will likely still need some sort of reusable Card element. Codebases using Basement still have components <Card /> or partials {{> card }}, but they will simply compose a number of elements and utility classes. Need to make a styling change to that component? Reach into the component and add or remove a class. Modifications happen in one place, not scattered through a number of .css and template files.

We love Basscss' composable/atomic philosophy — and strictly obey it — but needed more flexibility. In practice, not all grids are 12 columns, breakpoints are constantly changing, and not all designers adhere to a rigid scale of margin and padding. We also stripped away any opinions regarding typography and decoration and left that up to the user to define.

The file size of this framework is large! That's impossible to ignore. The minified .css file, depending on the user's configuration can be anywhere from 40kb - 100kb 😬. The idea is that all utility classes are available at all breakpoints, and the user should, as infrequently as possible, reach out to create a custom class. That means a lot of class definitions! We recommend adding purgecss, UnCss, or something similar to your build pipeline. You'll find that most Basement classes go unused, so this will reduce the file size significantly.