A foundational CSS library that's modern, lightweight, and easy to live with. It's somewhere between a reset and a framework because resets don't do quite enough, and frameworks do a bit too much. bedrocss applies sane defaults to plain HTML elements, so there isn't anything to learn, and it's super easy to modify.
Demo GitHub NPM
npm install bedrocss
Every element will have
box-sizing: border-box; by default, inherit the
system-ui font, and have no margin or padding. Some tags (input, video, progres, and more) stretch the full width of their parents, and images are kept withing their parent elements.
The library is made up of a few parts (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
Uses rem units for any sizing to respect user's font-size preferences. Targets
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. Supports a basic dark mode out of the box based on user's system settings.
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';
Made with ❤ by Austin Gil