Have ideas to improve npm?Join in the discussion! »

    bedrocss

    0.0.13 • Public • Published

    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

    Keywords

    Install

    npm i bedrocss

    DownloadsWeekly Downloads

    177

    Version

    0.0.13

    License

    MIT

    Unpacked Size

    45.5 kB

    Total Files

    13

    Last publish

    Collaborators

    • avatar