Getting started

Design Library aims to help you, as a developer, to create the best possible user experience in the apps and websites you build. You'll find not only re-usable code for SEB themed components, but also guidelines and advice on how to make your app consistent, accessible and easy to use .

How do I use Design Library as a developer?

  1. Look on the site for components that you need in your project.
  2. When you've found the component you need, click the "Code" tab.
  3. In the "Chose source" dropdown at the top of the page, you can select from different repositories that has implemented that component. Vanilla, for example, implements the component in CSS only (through SCSS).
  4. Next, you need to install the corresponding NPM-package and import the sources in your project. Look under Instructions to find out how you can install the appropriate package for the repository of your choice.
  5. Once you have installed the package and imported all the necessary files (css/scss/js/etc), you can use the component by copying the markup from the Code tab on the component page here on Design Library (click on 'Show code and details' to show the code)

Contribute to Design Library

Everyone is welcome to contribute to our library of re-usable components! There are multiple ways you do this in:

  • By improving or adding to the Vanilla component library
  • By connecting your own component library to Design Library
  • By getting in touch with us if you have any suggestions or feedback 

Contributing to Vanilla

The code for Vanilla lives on GitHub: https://github.com/sebgroup/vanilla-pattern-library.

  1. If you want to contribute with your own code, you first need to create a fork of the Vanilla repo. Have a look at this guide for info on forking a GitHub repo: https://help.github.com/articles/fork-a-repo/
  2. Once you have your fork ready you can start committing changes to it. When you are happy with the changes, you need to create a pull request back to the original repo. For more info on this process, take a look at this guide: https://help.github.com/articles/creating-a-pull-request-from-a-fork/
  3. When we have recieved and accepted the pull request, your changes will be merged with the original Vanilla repo and will be published in the next release.

Adding a component library to Design Library

If you have developed your own component library for your application, we would love to include it in Design Library.

Please get in touch with us at designlibrary@seb.se, and we will help you get started!

Feedback?

Contributions don't have to be code! If you have any ideas, suggestions or other feedback, we would love to hear it! Please get in touch with us at designlibrary@seb.se