Bedrock Layout Primitives Home
Edit page
Components
AppBoundaryCSS-ResetAnother CSS ResetHow to installBasic usageResourcesCenterColumnsCoverFrameGridInlineClusterPadBoxReelSpacing ConstantsSplitStackSwitcheruseContainerQueryuseForwardedRefuseMatchContainerSizesuseMatchMediauseMediaQueryuseStatefulRef
HomeInspirationLayout PrimitivesRegarding IE11Why Styled Components?

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

Resources

  • A Modern CSS Reset
  • Axioms
  • focus-visible explainer