Skip to content

The Basics

The dnb-ui-lib is hosted on the global NPM registry. It includes all the necessary parts to build an independent layer on top of a frontend framework of your choice.

It is recommended to have an application setup with a compiling/build process in place.

HTML Elements and styling

There are three things going on once an HTML element is displayed and up-and-running.

  • syntax as HTML
  • styling by CSS
  • internal states by JavaScript

From here we can redefine the properties of the HTML elements in order to customize them. We can also bind event listeners to work together with your application.

Pixel Perfect

One of the most important reasons why Eufemia exists, is to make it more easy to get a pixel perfect result on developing WEB Applications.

Therefore, You come a long way on using the dnb-ui-lib correctly:

Make sure You test Your Layout and Styles for various conditions during and after development:

  • Up two 3x times in font-size (change the Web Browser default font size)
  • Zoom the Web Browser up to 3x times
  • Make Your layout responsive, either with CSS Grid or Media Queries and,
  • Check the different screen sizes
  • Test Your App on different devices and operating systems
  • Pixel perfection is good for many, for the rest, make everything accessible for everyone

States

All the UI Components (and some HTML Elements) have individual interaction states. The look and feel is defined in the default theming file (theme-ui).

  • hover
  • active (TouchStart)
  • focus
  • disabled

CSS Styles

Read about how the styles are setup and how to import the CSS.

Compiler

With Node.js as our JavaScript runtime in place, we may use ES6 (ECMAScript 2015) to write our application. There are many frameworks and libraries to build user interfaces. If we take React JSX as an starting point, we basically do this:

// Define the imports
import { Button } from 'dnb-ui-lib'
// And consume the Component in Your markup render method
render(<Button text="Primary Button" />)

You also may import the styles on a higher lever in Your application:

// e.g. in the App root
import 'dnb-ui-lib/style'

You can also import a single style of one component at a time:

// Imports only the Button CSS and Main DNB Theme
import 'dnb-ui-lib/components/button/style'
import 'dnb-ui-lib/components/button/style/themes/ui'

And finally bind an event listener:

<Button text="Button" on_click={myClickHandler} />

UMD

In case you don't have a compiling/build process, You can use the UMD packed version of the dnb-ui-lib. Take a look into this repo and the UMD example usage. But this will not optimize your code for the best user experience.

<html>
<head>
...
<link
rel="stylesheet"
href="https://unpkg.com/dnb-ui-lib@latest/style/dnb-ui-core.min.css"
/>
<link
rel="stylesheet"
href="https://unpkg.com/dnb-ui-lib@latest/style/dnb-ui-components.min.css"
/>
<link
rel="stylesheet"
href="https://unpkg.com/dnb-ui-lib@latest/style/themes/dnb-theme-ui.min.css"
/>
</head>
<body>
...
<script src="https://unpkg.com/dnb-ui-lib@latest/umd/dnb-ui-icons.min.js"></script>
<script src="https://unpkg.com/dnb-ui-lib@latest/umd/dnb-ui-lib.min.js"></script>
</body>
</html>