@bi-digital/css

CSS for BI's design system.

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

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'; /* Tokens, fonts, normalize and print-styles */
@import '@bi-digital/css/dist/components.css'; /* Component styles must be imported specifically */

In .jsx/.tsx-files:

import '@bi-digital/css';
import '@bi-digital/css/dist/components.css'; /* Component styles must be imported specifically */

CDN (jsDelivr):

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@bi-digital/css@latest/dist/index.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@bi-digital/css@latest/dist/components.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';

@import '@bi-digital/css/dist/components.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"]
}