About Vanilla

The Vanilla package contains styles for SEB's components written in SCSS. Default classes are exported using the .sdv-prefix.

Components in Vanilla are implemented as a set of mixins in order to provide flexibility for developers when required. This means that it's possible to export all components using custom class names, and even different markup structure to a certain extent. Use this feature with care, and only if you really need to, for example when trying to solve a compatibility issue.

Vanilla contains no Javascript. It is up to the developer to implement any interactivity and logic that is not easily achievable through CSS.

More technical information can be found here:https://sebgroup.github.io/vanilla-pattern-library/

Using Vanilla through NPM

1. Create an empty directory and open a command prompt in that directory.

2. If you're working on the SEB networks, you will need to configure your NPM environment accordingly. Search for 'npmrc' in GitHub Enterprise for suggestions on how to do this, or send us an email if you need help.

3. Create a package.json file by running npm init:

$ npm init

4. Install the Vanilla pattern library:

$ npm install --save @sebgroup/vanilla

5. Now Vanilla will be installed in your node_modules folder. You could either import scss from <vanilla-dir>/src/vanilla in your own scss-files, or you can use pre-compiled css from <vanilla-dir>/css.

If you are on Windows, you can use this command to explore the contents of the Vanilla package:

$ npm explore @sebgroup/vanilla -- explorer

6. To try out the components, create a basic html-file and include the css files as specified above, then go to https://sebgroup.github.io/vanilla-pattern-library/ and copy some markup and put in your html-file.

Voilà!

About Bootstrap

The Bootstrap repository is a theme for Bootstrap 4, so all markup examples on their website will work for this package too, please note however that not all components have been styled for SEB yet and this library doesn't include any Javascript either. The later is by design as the goal and purpose of this repository is to hold common styles for standard web components and not control how they work or behave as that would require additional Javascript and that is something most frameworks take care of ie. React, Angular, Vue etc. This is also the reason as to why some of the components like pagination, accordion etc. on the demo page doesn't do anything when you try to use them.

Instructions

You can find detailed technical documentation for this package on GitHub:

https://github.com/sebgroup/bootstrap

About React

This is a set of React components for use in SEB applications. They are styled using SEB Bootstrap.

For instructions, please have a look at the documentation site here:https://github.com/sebgroup/react-components

There are two different options available for Angular:

• ng-bootstrap
• ng-components

ng-bootstrap is a theme for the open soruce ng-bootsrap framework, and ng-components is a custom made set of Angular components, styled using SEB Bootstrap.

Instructions for each of these can be found in the respective repositories linked above.