Get started

We are changing the way we release Elements from the existing individual packages in the frontend-toolkits repository to a single package release in a new Elements repository.

This will make it easier for you to install and use the components and themes of the design system. It will also make it easier for us to maintain and scale.

Requirements

To use Elements components and themes you need:

• npm version 7 or higher
• Node.js version 18.14.0 or higher
• Dart Sass to compile your styles

Installation

You will get all of the components and themes by installing the single package. To install the Elements themes and components, enter the following command in your terminal:

npm install @springernature/elements

The package contains themes, components and utilities.

A theme defines the style of a brand. Formerly, in frontend-toolkits, themes were known as brand-context.

We support the Springer Nature (themes/springernature) and Nature (themes/nature) themes.

For now, no utilities (/utilities) are provided. We will be developing these in the future.
At the moment you can find the utilitiy classes inside the themes.

Import the styles

Choose a theme from the /themes folder and import the theme’s index file, located in the root.

Springer Nature

• Import the core theme into your core styles

@import '../../node_modules/@springernature/elements/themes/springernature/scss/core.scss';

• Import the enhanced theme into your enhanced styles

@import '../../node_modules/@springernature/elements/themes/springernature/scss/enhanced.scss';

• If you need them, import the utilities of the theme into your styles as a single import for all of them

@import '../../node_modules/@springernature/elements/themes/springernature/scss/utilities.scss';

Nature

• Import the core theme into your core styles

@import '../../node_modules/@springernature/elements/themes/nature/scss/core.scss';

• Import the enhanced theme into your enhanced styles

@import '../../node_modules/@springernature/elements/themes/nature/scss/enhanced.scss';

• If you need them, import the utilities of the theme into your styles as a single import for all of them

@import '../../node_modules/@springernature/elements/themes/nature/scss/utilities.scss';

Components

For each component you want to use, import the component’s main Sass file. For example, the card component’s main Sass file is components/card/scss/card.scss. The main Sass file is always named after the component itself.

@import '../../node_modules/@springernature/elements/components/card/scss/card.scss';

Templates

The location of a component’s template has changed. It used to be in the /view folder. Now it is in the root folder.

Example of a file path:

'../../node_modules/@springernature/elements/component/template.hbs’

New data folder

In the single release package, components will now have a data folder.

Here you will find:

• a schema JSON file (component-name.schema.json)
• an example JSON file (component-name.example.json)

These set out the expected structure for the data that will populate the template.

JavaScript

Import the script from Elements and then execute it.

For example:

import {header} from '@springernature/elements/eds-c-header/js/header';

header();

Help improve this page

If you have a question, idea, or suggestion to improve this component or guidance, post in the #ask-elements Slack channel or the #ask-elements Teams channel.