Design system

This Design System provides a framework to display pages and components with an easy to use navigation, statuses per page / component and an option to view the source code and implementatation instructions for every component.

This library is best used in combination with TREX.

Installation

Install the Design System as a dev dependency:

npm install -D @tresinternet/design-system

Copy the public/library.json-file to the root of your project and make the necessary changes.

Templates

The Design System uses two main templates: page and component.

Page

The page template is used to display the template-pages and complete pages. The HTML can be altered as needed. This template uses the following variables:

page

The HTML of the page content

Component

The component template is used to display a single component. Multiple components can be used on a single page, for example to show different variations. A component is shown with multiple tabs:

• Output
• Source code
• Instructions (optional)
• Javascript code (optional)

This template uses the following variables:

component

The HTML of the component

description (optional)

The description of the component. Is shown above the component

instructions (optional)

Instructions for usage of the component. Use markdown to style the instructions

scripting (optional)

Code of Javascript used or referenced

Statuses

Each page can have one of the following statuses:

• (none)
• wip: Work in progress
• review: In review
• error: Review not OK / contains errors
• ready: OK / Ready
• custom: Not a base component, but custom made
• deprecated: Deprecated legacy component

Of these statuses only custom, error and deprecated are used and visible in the frontend.

Hiding sections

In principle all Tokens, Atoms, Organisms, ..., ... except Pages and Templates etc are hidden from the user. You can set a section to public if you want a client to be able to see it in user mode. Do this by adding "public": true to the corresponding section in the library.json.

Admin mode

In the bottom left corner, besides the Modified date, there is a little lock, press it to enable Admin mode and you are able to see all sections.

Configuration example

An example configuration file can be found in public/library.json.