Short for Style-Base. This is a different type of style library:
- No fancy visuals, just a blank canvas and convenient building blocks.
- Everything is opt-in.
- Very small, very simple.
It consists of:
- A style reset.
- Common-sense classes for primitive properties.
- Flexbox layout shortcuts.
It does not include:
- Visual styles.
- Complex elements.
Read _sb.scss, it's self-explanatory.
I've used various GUI and style frameworks, wrote a few: 1, 2; collaborated on a few: 3, 4. None of them fully survive a switch to a new project with a new design. A fully reusable CSS core cannot be a visual framework.
This is the common denominator, the sediment, that has successfully survived being copied-and-pasted between many of my and Purelab projects with vastly different visual styles.
The idea of reusable elements is nice, but it doesn't work well for CSS. The idea of just grabbing a style library from NPM is nice, but it doesn't work well for CSS. Applications need to write their CSS almost from scratch, and for me, this "library" is close to that threshold.
Either use as a Git submodule, or copy-paste into your app. CSS libraries, even semantically versioned, are way too brittle. There's no such thing as a non-breaking change in CSS. The version must be locked down to the exact commit. The application may also need full control over the code.
Requires SCSS. Names are unprefixed; import via @use for namespacing.
@use './sb/reset';
@use './sb/sb';
@include sb.all;If you have questions or suggestions, open an issue or chat me up. Contacts: https://mitranim.com/#contacts