Skip to content
Home

The Basics

The @dnb/eufemia 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 easier to get a pixel perfect result when developing WEB Applications.

You will have come a long way to achieve this by using @dnb/eufemia 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
  • 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/eufemia'


// And consume the Component in your markup render method
render(<Button text="Primary Button" />)

You also may import the styles on a higher level in your application:

// e.g. in the App root
import '@dnb/eufemia/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/eufemia/components/button/style'
import '@dnb/eufemia/components/button/style/themes/ui'
<Button text="Button" on_click={myClickHandler} />

Importing components and elements

By default, you can import components and elements from the root:

import { Button } from '@dnb/eufemia'

As the @dnb/eufemia uses ESM as its default module format, we get a good tree shaking with most of the bundler tools commonly used.

But you can be more specific if you want to:

import { Button } from '@dnb/eufemia/components'

And even go further:

import Button from '@dnb/eufemia/components/Button'


// or


import Button from '@dnb/eufemia/components/button/Button'

Importing extensions

Extensions you would have to import explicitly from /extensions

import { ... } from '@dnb/eufemia/extensions'

Importing icons

The same applies to icons, you would have to import them explicitly from /icons

import { bell_medium as Bell } from '@dnb/eufemia/icons'


// or


import Bell from '@dnb/eufemia/icons/bell'
import BellMedium from '@dnb/eufemia/icons/bell_medium'

UMD

In case you don't have a compiling/build process, you can use the UMD packed version of the @dnb/eufemia.

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