Bedrocss is a foundational CSS library that's modern, lightweight, and easy to customize. It's somewhere between a reset, a normalizer, and a framework.
- 1.6kb (795b zipped)
- Minimal specificity
- Incrementally Adoptable
- Slightly opinionated
npm install bedrocss
Every element will have
box-sizing: border-box; by default, inheriting the
system-ui font, and have no margin or padding. Images get a max width of 100%.
Easy to Customize
The library is made up of a few components (see below) that you can easily opt out of. It defines CSS rules with tag and attribute selectors to maintain the lowest CSS specificity. This makes it easy be overwrite without having to write more specific rules, use
!important, or anything complex.
Headings have a fluid font size that adjusts to screen sizes. Helper classes (
h1, h2, h3, h4, h5, h6) let you use the right semantic tag while styling like a different heading. Every element has a more comforable
!important with the
prefers-reduces-motion media query to disable animations, transitions, and animated scrolling for users that have declared they do not want it. This is especially relevant for users with vestibular disorders. You can read more about this in this article by Eric Bailey.
Opting out of features
By default, when you import the library, you get everything. However, it's made up of a collection of files which you can pick out as you like. For example, to explicitly import all components, you could do:
import 'bedrocss/src/base.css'; import 'bedrocss/src/typography.css'; import 'bedrocss/src/interactive.css'; import 'bedrocss/src/media.css';