JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 1667
  • Score
    100M100P100Q107524F
  • License MIT

Bootstrap 4 reboot.css for styled-components

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:

// base-styles.js
import { injectGlobal } from 'styled-components';
import reboot from 'styled-reboot';

// Options are 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 baseStyles = () => injectGlobal`
  ${rebootCss}
  /* other styles */
`;

export default baseStyles;

// app.js
import baseStyles from './base-styles';

const App = () => {
  baseStyles()
  return (
    <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