How does Design Library work?

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 .

The eco system of Design Library

Design Library consists of a website with editorial content (this is what you're looking at right now) as well as a number of repositories that contains component implementations.

A repository will typically contain a framework-specific implementation of SEB's general components, or a project specific collection of components. For example,

  • "Vanilla" is a repository that implements SEB's general components in CSS only (with SCSS mixins for flexibility)
  • "Public Web" repository contains a set of components that was specifically designed and developed for SEB's public websites, but that might be useful in other projects as well.

Any teams within SEB that are developing for the web can contribute their code to Design Library, either by setting up their own repository, or by adding code to, for example, the Vanilla repository.

How does it work?

Each repository actually has its own website. We call this website a "Pattern Library". Here you can have a look at the Pattern Library for Vanilla, for example.

The pattern library site serves several purposes:

  • It shows you which components are available in that specifc repository
  • It can contain detailed and repo specific instructions and documentation targeted at developers
  • It exposes a few differend JSON feeds that the Design Library site reads from (more on this later)
  • It can serve as a development tool, aiding the process of developing and documenting web components.

What do I need?

Each component in a Pattern Library consists of two main things: A markdown file and a code file.

  • The markdown file is used to document the component. It contains meta-data such as the component name and identifier, as well as the code examples that showcases the component. The component identifier (componentid) is the key that ties a component to a specific page in Design Library. For example, a component with a componentid of "component-button" will be displayed on the Code tab of the Button component in Design Library. Look at the top right part of the Button page, for instance. There you can see the componentid of that page.
  • The code file is simply the implementation code of the component. It can be CSS, SCSS, JS, or any other relevant language. A component can also, of course, consist of multiple code files.

Feeds

As mentioned above, the Pattern LIbrary site exposes a few different JSON feeds. These are required for Design Library to be able to display components from the Pattern Library. There are three different feeds:

  • contentindex.json
    This feed contains a list of all the components. It specifies component metadata and a path to the related markdown file.
  • targetindex.json
    This file contains a list of output files that are required to display the components. Usually this will contain paths to some minified files, such as main.min.css and main.min.js.
  • version.json
    This file simply holds the version number of the repository.

DaVanMonet

DaVanMonet is the development tool we use to generate pattern libraries. It is built around WebPack, and handles transpiling, minification, compiling, etc, as well as automatically generating the necessary JSON-feeds for Design Library.

You can find the source code and documentation for DaVanMonet on GitHub.