@naturacosmeticos/natds-react-css-baseline
v0.15.0
Published
CssBaseline component for React web by Natura Design System
Downloads
9
Readme
CSS Baseline
We provide a CssBaseline component to kickstart an elegant and consistent baseline to build upon.
Import
import { CssBaseline } from "@naturacosmeticos/natds-react"
// or
import CssBaseline from "@naturacosmeticos/natds-react-css-baseline"Global reset
You might be familiar with normalize.css, a collection of HTML element and attribute style-normalizations.
import React from "react";
import CssBaseline from "@naturacosmeticos/natds-react-css-baseline"
export const MyApp = () => (
<React.Fragment>
<CssBaseline />
{/* The rest of your application */}
</React.Fragment>
);Scoping on children
However, if you are progressively migrating a website to Natura Design System, using a global reset might not be an option.
It's possible to apply the baseline only to the children by using the ScopedCssBaseline component.
import React from "react";
import MyApp from "./MyApp";
import ScopedCssBaseline from "@naturacosmeticos/natds-react-scoped-css-baseline"
export const MyAppWithScopedStyles = () => (
<ScopedCssBaseline>
{/* The rest of your application */}
<MyApp />
</ScopedCssBaseline>
);Approach
Page
CssBaseline (or ScopedCssBaseline) updates the html and body elements to provide a better page-wide defaults.
More specifically:
- It removes the margin in all browsers;
- It applies the default Natura Design System. It is using
theme.palette.background.defaultfor standard devices; - It applies a neutral background for print devices.
Layout
box-sizingis set globally on the<html>element toborder-box.- Every element — including
*::beforeand*::afterare declared to inherit thebox-sizing: border-boxproperty; - Declared with of elements will never be exceeded due to padding or border.
Typography
- No base font-size is declared on the
<html>, but16pxis assumed (the browser default); - Set the
theme.typography.body2style on the<body>element; - Set the
font-weighttotheme.typography.fontWeightBoldfor the<b>and<strong>elements; - Custom font-smoothing is enabled for better display of the Roboto font.