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';

Compiled CSS

If you do not want to import the styles manually, you can use our precompiled CSS files. These can be found at:

• development/compile/sn-style.css (Springer Nature brand)
• development/compile/nature-style.css (Nature brand)

These compiled CSS files include the styles for all the brand’s components.

Development is underway on a CLI (command line interface) that will allow you to choose just the components you need when compiling the Sass to CSS. Until then, if you want control over what is compiled, then import the individual component Sass manually.

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/nature-header/js/header';

header();