Requirements and browser support#
Aside from the peer dependencies, there are no specific technical requirements, except that it is highly recommended to use a compiling process with tree shaking in place.
Usage#
Eufemia (@dnb/eufemia) can be used within a UMD, ESM, CJS, or TypeScript environment. The purpose is to use it on top of (or inside) modern JavaScript frontend frameworks and setups. However, we strongly recommend using Eufemia with a React stack, as this makes including the Eufemia tools and components most productive. All the component internal states are handled with React to keep only the most necessary elements in the DOM (HTML elements and event bindings).
The hard part of a living design system#
The hard part of a living design system, like Eufemia, is avoiding the creation of black holes and choosing ways that make maintainability of user experience hard and complex. To address this challenge and gain more insight, read on about maintainability.
React#
Why React is a good choice:
- Declarative and functional
- Immutable structure
- Lightweight
- Centralization of code that should work in context (concepts like writing code like reading a book)
- Can be used with a JAM stack, CSR, and SSR (SPA) using the same code base (App)
- Flexible frontend stack to create the best user experience, depending on the solution and its needs
- Can be tailored to different conventions and guidelines
Using the styles#
This library works perfectly with any styling techniques, such as Styled Components (Emotion), CSS Modules, or SCSS/LESS. You simply consume ready-to-use CSS files and CSS Custom Properties (CSS variables).
License#
The @dnb/eufemia package is intended for internal DNB development only. Make sure you comply with the license.
The Eufemia Repository#
The @dnb/eufemia is hosted as a sub-package inside the Eufemia Repository on GitHub.
You can also enable notification about upcoming releases.
Public assets#
Use the Asset CDN when a web, native, or external consumer needs public URLs for Eufemia fonts, icons, images, flags, browser assets, or company logos.
Supported Browsers and Platforms#
| Browser | Minimum version |
|---|---|
| Chrome | 109 |
| Chrome Android | 109 |
| Edge | 109 |
| Firefox | 115 |
| Firefox Android | 115 |
| iOS Safari | 14.5 |
| Safari | 14.1 |
| Samsung Browser | 21 |
See the DNB browser support report for more information (DNB sign-in required).
Configuration and Browserslist#
Eufemia uses the @dnb/browserslist-config configuration for bundle output, defined in .browserslistrc:
extends @dnb/browserslist-config
This configuration only affects the JavaScript bundle output, not the CSS bundle output.
To see which browsers this config supports, paste the following config into the Check compatible browsers tool:
chrome >= 109,
firefox >= 115,
edge >= 109,
safari >= 14.1,
ChromeAndroid >= 109,
FirefoxAndroid >= 115,
samsung >= 21,
iOS >= 14.5