Skip to content
Home

Helpers

Info
CSS Classes
Functions
Tools

Description

Reusing classes in the markup instead of using SCSS extends or mixins will prevent duplication in the @dnb/eufemia. So also your application will have good benefits from reusing these helper classes.

Core style

dnb-core-style

In order to be able to have the core Body Style inside a wrapper and available for all its children. The Body Style contains among others styles, the correct color, line-height, font and a CSS reset.

Wrapper with the DNB Body Style (CSS reset)

Read more about .dnb-core-style and Use Eufemia Styles elsewhere

Tab focus

dnb-tab-focus

Removes default focus outline from a focusable element and adds a custom visual focus state when is focused by a tab key. There is also:

  • dnb-mouse-focus
  • dnb-focus-ring
  • dnb-no-focus
Try to focus me with the Tab keyMy main focus state has been removed and replaced by the helping class .dnb-tab-focus

Skip link

dnb-skip-link

A default Skip Link style, for adding a link at the top of each page that goes directly to the main content area.

Show Skip-Link
<body>
  <a class="dnb-skip-link" href="#content-id">Skip to content</a>
  <header>
    <nav>
      <!-- Nav links or content to skip -->
    </nav>
  </header>
  <main id="content-id">
    <!-- Content goes here -->
  </main>
</body>

More details in the Focus Section.

Spacing

dnb-spacing

Sets default spacing (using margin) on all HTML elements inside the container with this style. The default spacing is a margin-bottom: 1.5rem, but specific margins are defined for headings, lists and tables.

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

More details in Styling.

Scrollbar appearance

dnb-scrollbar-appearance

Define the DNB scrollbar appearance, including the color --color-emerald-green with transparent.

NB: Browser support is not fully covered (2021).

Screen Reader (sr) only

dnb-sr-only

Visually hides an element, but is still reachable by screen readers. (sr stands for Screen Reader)

Hidden textI am only visible to screen readers, so you probably can't see me. Unless you're using a screen reader.!

Drop shadow

dnb-drop-shadow

Adds a default drop shadow, box-shadow: 0 8px 16px rgba(51, 51, 51, 0.08), to the component. The current shadow specification is designed to be less sharp and more blurry.

CSS properties

The DNB Drop shadow is also available as a CSS Custom Property:

import properties from '@dnb/eufemia/style/themes/theme-ui/properties.js'


const cssBoxShadow = properties['--shadow-default']

If you only want to apply parts of the property, these are available as well:

  • --shadow-default-x: 0;
  • --shadow-default-y: 8px;
  • --shadow-default-blur-radius: 16px;
  • --shadow-default-color: rgba(51, 51, 51, 0.08);

Responsive component

dnb-responsive-component

Makes some component form components, like Input react to small sized screens. But as this can have some negative effects to have this enabled by default, you can enable this optionally using this helper class.

Unstyled list

dnb-unstyled-list

Removes default styling for lists. Applies to the ul or ol elements.

  • I'm an unstyled list item
  • Me too!
  • But I'm not.

Selection

dnb-selection

Applies the DNB selection colors to the selected content.

Eufemia uses custom ::selection colors to enhance the contrast and to play well against the many green colors. Every HTML class that starts with the prefix dnb- will be effected. In some circumstances you can simply make use of the class .dnb-selection, which applies the styles below on ::selection.

background-color: var(--color-mint-green);
color: var(--color-black);
text-shadow: none;

If you select a part of this text, you will see the selection highlight is green.

HTML class naming

To ensure a consistent class structure and to ensure that the class is owned by the DNB UI Library, all classes in the UI Library are prefixed with dnb-. Read more about that in the Naming conventions.

SASS and mixins

All CSS helper classes are to be found in src/style/core/helper-classes/helper-classes.scss Most helper classes are SCSS mixins which are then applied to the class when invoked.

You can import Eufemia mixins directly into your SCSS styles:

@import '@dnb/eufemia/style/core/utilities.scss';


/** State handling */
@include hover {
}
@include focus {
}
@include active {
}


/** Media Queries and Breakpoints */
@include allBelow(large) {
}
@include allAbove(small) {
}


/** Screen Reader Only */
@include srOnly() {
} // .dnb-sr-only


/** Browser Checks */
@include IS_EDGE {
}
@include IS_FF {
}
@include IS_CHROME {
}
@include IS_SAFARI_MOBILE {
}
@include IS_SAFARI_DESKTOP {
}


/** Eufemia DropShadow */
@include defaultDropShadow();


/** Eufemia Border helpers */
@include focusRing(
  /* $whatinput: 'keyboard', $color: var(--color-emerald-green), $inset: inset */
);
@include extendFocusRing(
  /* $first-color: null, $second-color: null, width: 0.0625rem */
);
@include fakeBorder(
  /* $color: var(--color-emerald-green), $width: 0.0625rem, $inset: inset */
);


/** Scroll behavior */
@include scrollY(/* $mode: scroll */);
@include scrollX(/* $mode: scroll */);
@include hideScrollbar();
@include scrollbarAppearance();


/** Reset fieldset styles */
@include fieldsetReset();

Formset reset

Removes default styling on a fieldset element.

@include fieldsetReset($checkSpaceProps: boolean)

If true is given, it will handle margin gracefully by checking for e.g. dnb-space__top-- and not reset if this class exists.

I'm a fieldset without styling.