bedrocss

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.

• 1.97kb (931b zipped): Gets you going on the right foundation without any overhead.
• Minimal specificity: Super easy for you to customize without having to fight.
• Incrementally Adoptable: If you don't like certain parts, you can leave them out.
• Slightly opinionated: For a solid foundation on which to grow your custom styles.

Demo GitHub NPM

Installation

npm install bedrocss

import 'bedrocss'

Features

Common Defaults

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.

Easy to Customize

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.

Typography

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 line-height.

Accessibility Features

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.

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';

Made with ❤ by Austin Gil