Package Exports

styled-reboot

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (styled-reboot) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

styled-reboot

Bootstrap 4 reboot.css for styled-components

reboot.css from Bootstrap v4 for styled-components.

Also see styled-reset from Zac Anger && also see styled-normalize from LestaD.

Installation:

npm i styled-reboot (use the -S flag if you're on npm 4 or earlier).

Usage with styled-components v4:

// global-style.js
import { createGlobalStyle } from 'styled-components';
import reboot from 'styled-reboot';

// Options are, of course, optional, these are the default options
const options = {
  black: '#000',
  fontFamilyBase:
    '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"',
  fontFamilyMonospace:
    'SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
  fontSizeBase: '1rem',
  fontWeightBase: 400,
  lineHeightBase: 1.5,
  bodyColor: '#212529',
  bodyBg: '#fff',
  headingsMarginBottom: '0.5rem',
  paragraphMarginBottom: '1rem',
  labelMarginBottom: '0.5rem',
  dtFontWeight: 700,
  linkColor: '#007bff',
  linkDecoration: 'none',
  linkHoverColor: '#0056b3',
  linkHoverDecoration: 'underline',
  tableCellPadding: '0.75rem',
  textMuted: '#6c757d'
};

const rebootCss = reboot(/* options */);

const GlobalStyle = createGlobalStyle`
  ${rebootCss}
  /* other styles */
`

export default GlobalStyle;

// app.js
import GlobalStyle from './global-style';

const App = () => (
  <>
    <GlobalStyle />
    <div>Hi!</div>
  </>
}

export default App;

You can also use named imports:

// ES Modules
import { reboot } from 'styled-reboot';

// CommonJS
const { reboot } = require('styled-reboot');

Credits

All credit goes to Bootstrap for reboot.css. Bootstrap is released under the MIT License.

License:

MIT