GETTING_STARTED.md

Getting started with the SL Design System

To get started using the SL Design System, you can install it via npm. Each component and theme has its own package. So if you want to use a button component with the Sanoma Learning theme, you do:

npm add @sl-design-system/button @sl-design-system/sanoma-learning

Before you can do this though, you first need to get access to the private GitHub NPM repository. To get access, you need to be added to the team in GitHub. Please contact a team member to be added.

Once you have been added, you can follow the instructions here to authenticate with the GitHub NPM registry.

Setup

To start using the SL Design System, you need to setup a theme for your application. The theme determines how your application looks. There is a theme for every major product within Sanoma Learning. You can install a theme as shown above, by installing the NPM package.

After installing the theme, you need to import the theme in your application. You can do this by loading the theme in your application:

<link href="@sl-design-system/sanoma-learning/all.css" rel="stylesheet">

Components

To start using the button in our example, you need to import the button component in your application. You can do this by importing the button component in your main JS file:

import '@sl-design-system/button/register.js';

This will load the button component and register it as <sl-button>. After that you can start using the button in your application:

<sl-button>Hello world!</sl-button>