PSI Software SE Design Library

Component Library

This is the development and documentation platform for our digital products. It is used to develop, evaluate, test, document and deliver all components that are available for creating user interfaces. It is the reference for the HTML markup and the underlying data structure of each individual component and the relationships between them.

The Component Library is based on the Fractal framework (see Fractal User Guide).

Structure

The components of the library are structured as follows:

  1. Base: Basic design guidelines such as specifications for colour, typography or design grid
  2. Elements: Smallest building blocks of the UI such as headings, text paragraphs or buttons
  3. Fragments: Building blocks composed of several elements that are not yet an independent module, e.g. group of buttons or input field with label and hint.
  4. Modules: Modules composed of several elements and/or fragments that function independently on a page, e.g. navigation or contact form.
  5. Templates: Templates for complete pages composed of individual modules.

State of development

The Component Library is constantly under development. The current status of each component is indicated in the menu by a coloured dot and by the label at the top right of the detailed view of the component.

Label Description
Do not use.
In development (only use in development environment).
In the approval process (only use in development environment).
Can be implemented.
No longer use (may be removed in future versions).

Tools

Show design grid

The design grid can be displayed using the grid parameter. The parameter is appended to the URL with a preceding question mark, e.g:

/components/preview/copy?grid.

Editing mode for texts

The edit parameter can be used to switch to edit mode; in this mode, the texts can be temporarily overwritten in order to edit them. The parameter is appended to the URL with a preceding question mark, e.g:

/components/preview/copy?edit.

To exit edit mode, the preview must be reloaded without parameters.