@bi-digital/css

CSS for BI's design system.

• CSS tokens
• Font loading
• Modern-normalize.css
• Print styling

This library is a requirement when using the BI Design System, but can also be used elsewhere.

Usage

In .css-files:

@import '@bi-digital/css';

In .jsx/.tsx-files:

import '@bi-digital/css';

CDN:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@bi-digital/css@latest/dist/index.min.css" />

We recommend replacing latest with a specific version to avoid errors when the library is updated.

Specific styles

You can choose to only import some of the styles:

@import '@bi-digital/css/dist/baseline.css';
@import '@bi-digital/css/dist/fonts.css';
@import '@bi-digital/css/dist/print.css';
@import '@bi-digital/css/dist/reset.css';
@import '@bi-digital/css/dist/tokens.css';

Minified

All the CSS-files have minified equivalents. Most bundlers and frameworks handles this automatically, but this can be useful when loading the CSS from a CDN or in other solutions that don't run post-processing on the CSS.

@import '@bi-digital/css/dist/index.min.css';

VSCode-extensions

For users of VSCode, you can use the extension "Css Custom Properties" (Tock.vscode-css-custom-properties) for autocomplete of tokens. You need to add the following settings:

{
  "cssCustomProperties.files": ["@bi-digital/**/tokens.css"],
  "cssCustomProperties.languages": ["css", "scss"]
}