@uib/css NPM | npm.io

@uib/css

The official css component library for use in web applications designed in accordance with the Dräger "Usability is Blue" design manual.

Install

Requires Node version 12.16 or above.

npm install @uib/css

Use

The components are available as precompiled css file in the themes bright and highvis. In addition, a night mode is available as separate theme file, for use in combination with either the bright or highvis theme.

There are different approaches for using the css styles in your project:

@import in SCSS

Import the desired theme file(s) into your styles.scss:

@import 'node_modules/@uib/css/themes/draeger-theme-highvis.css';

OR \ in HTML

Copy the desired theme file(s) from node_modules/@uib/css/themes into your assets folder and use in your index.html:

<!DOCTYPE html>
<html>
  <head>
    <!-- Bright theme stylesheet -->
    <link "href="/dist/assets/draeger-theme-bright.css" rel="stylesheet">
    <!-- Highvis theme stylesheet -->
    <!--<link "href="/dist/assets/draeger-theme-highvis.css" rel="stylesheet">-->
    <!-- Night theme stylesheet -->
    <!--<link "href="/dist/assets/draeger-theme-night.css" rel="stylesheet">-->
  </head>

  <!-- etc. -->

</html>