CSS Reset

A CSS Reset that compliments well with the Bedrock Layout Primitives

Another CSS Reset

I know there are several CSS Resets out there and one might ask why another one. This reset has been curated from a few resouces and has become my default reset for any project I do now. Though this reset is not required for Bedrock Layout Primitives, it does complement it nicely and I would highly recomend it.

How to install

To get the full benefit, you use the focus-visible polyfill. It's most easily used by installing from npm:

npm install focus-visible

If you plan on using the GlobalStyle component or the mixin, then you will need to install styled-components:

npm install styled-components

Then install the reset:

npm install @bedrock-layout/css-reset

Basic usage

CSS Mixin

The reset mixin is best used at the beginning of your global style

import { reset } from "@bedrock-layout/css-reset";
const GlobalStyles = createGlobalStyle`
  ${reset}
`;

GlobalStyle

The GlobalStyle component is used when you don't have your own global styles to use

import { GlobalStyles } from "@bedrock-layout/css-reset";
const App = () => {
  return (
    <div>
      <GlobalStyles />
      {/* The rest of the component */}
    </div>
  );
};

CSS Stylesheet

You can also just bring in the CSS Stylesheet directly from the lib folder:

import "@bedrock-layout/css-reset/lib/reset.css";