Skip to content

CSS Styles

To ensure flexibility and the possibility of theming, the DNB CSS Styles area built in a bottom up manner.

The styles are decoupled from the functional components. There are several packages you can use and combine.

Main Packages

Sub Packages

  • dnb-ui-body - includes the default body style and a CSS reset (normalize).
  • dnb-ui-basis - includes everything from dnb-ui-core, except dnb-ui-body (NB: needs a wrapper class).
  • dnb-ui-elements - includes only the styles for HTML Elements CSS classes, like .dnb-h1.

Additional Packages

  • dnb-ui-tags - this package will force styles on all the HTML Tags like <h1> instead of CSS classes, like .dnb-h1. Use it carefully - because this will effect existing styles as well.
  • dnb-ui-properties - includes only the CSS Custom Properties.
  • dnb-ui-fonts - includes only the @font-face and properties.

All the CSS packages are ready to use, minified CSS files. You will find the main style here: dnb-ui-lib/style/dnb-ui-core.min.css

Individual styles

Additionally, it is also possible to import a style and theme for every single component separately. You find the styles here, like: dnb-ui-lib/components/[button]/style/dnb-button.min.css - read more about how to import a single-component style

CSS Structure Diagram

The following Diagram gives an overall overview how the packages are structured.

How to deal with existing styles

The dnb-ui-core package includes some styles witch effects the global scope (body and CSS reset). To avoid interference with existing styles, let's say a header or a menu, You could only use the dnb-ui-basis package in combination with other packages like dnb-theme-ui and dnb-ui-components.

You may have a look at some code examples of dealing with legacy code.

Example import

// NB: needs a wrapper class: ".dnb-core-style"
import 'dnb-ui-lib/style/basis'
import 'dnb-ui-lib/style/components'
import 'dnb-ui-lib/style/themes/ui'
// instead of all together
/* import 'dnb-ui-lib/style' */

Core Style

If You neither include the dnb-ui-core nor the dnb-ui-body package, then You ending up having no Eufemia styles for the Document <body>. To have the Eufemia Core styles inside a wrapper anyway, simply use the following helper class: .dnb-core-style

<body>
<p>I'm not Eufemia</p>
<!-- Wrapper to have correct Eufemia css reset and styles -->
<div id="app" class="dnb-core-style">
<h1 class="dnb-h1">I have an Eufemia Style</h1>
<p class="dnb-p">👉 Me as well</p>
</div>
</body>

CSS Specificity

Once You use the .dnb-core-style wrapper class, You may in some circumstances, need to use it to modify already given properties.

For Styled Components You do it this way:

import { P } from 'dnb-ui-lib/elements'
const MyElement = styled(P)`
.dnb-core-style & {
margin-top: 3rem;
}
color: var(--color-sky-blue);
`

In CSS You simply do it this way:

.dnb-core-style .my-element {
margin-top: 3rem;
color: var(--color-sky-blue);
}

Spacing for Articles

To ensure more flexibility in styling, all the margins / spacings are reset to zero. But more often we have to have a by default defined spacing, e.g. margin on HTML Elements like headings or paragraphs.

To use the default DNB spacings, define a CSS class called: .dnb-spacing Effected HTML Elements inside this container will then have a default spacing. This will be specially helpful for article alike pages.

<article class="dnb-spacing">
<!-- DNB spacings -->
<h1 class="dnb-h1">e.g. I have now the Eufemia spacing (margin)</h1>
<p class="dnb-p">👉 Me as well</p>
</article>

The styles for the .dnb-spacing are included in the package: dnb-theme-ui For more details, check out the source file: spacing.scss

Styling of HTML Elements (tags)

To deal with HTML Elements, without declaring them individual with the right css classes, like <h1 class="dnb-h1">, You can import the sub package dnb-ui-tags.

NB: Use it carefully - cause this will effect existing styles as well!

/* directly the CSS file */
import 'dnb-ui-lib/style/dnb-ui-tags.min.css'
/* ... or by the shorthand */
import 'dnb-ui-lib/style/elements'
<!-- HTML Elements in the wild -->
<h1>I'm now Eufemia styled</h1>
<ul>
<li>Me as well</li>
</ul>

A list of all CSS properties

Beside the portal documentation with related tables and additional information, you may have a look at the CSS file, containing the custom properties (CSS variables), as well as a JavaScript file, witch is auto generated from the CSS data.