Internet Explorer is not supported by Design Library

The last version of Internet Explorer, version 11, was released on October 17, 2013. This is a very long time ago when taking into account the rapid development of web technologies. These days it is often difficult and time consuming to get modern technologies to work well in this old browser. More and more frameworks are dropping support, and even Microsoft themselves has announced that they will fully drop support for IE in their own services in 2021.

Consequently, we have decided to not include support for IE in the Design Library website.

Luckily, there are modern options in active development. Please use Firefox, Edge or Chrome instead.

Npm package installation instructions

If you want to use the components, this is how you go about to install it for Vanilla, Bootstrap and React. Once you have installed the packages, there are many advantages to download the latest components and security through npm.

Vanilla

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à!

Bootstrap

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

React

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

Angular

There are two different options available for Angular:

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.

Subsections

Page last updated

Feedback

Was this page helpful?