@tresinternet/design-system v3.0.0
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.
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 progressreview
: In reviewerror
: Review not OK / contains errorsready
: OK / Readycustom
: Not a base component, but custom madedeprecated
: 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.
Using the system in your solution
Download the latest build artifact into your solution. Make sure it is accessible trough your (development) server. Your configuration file should be placed in the root of the webserver.
Developing the library
See https://www.npmjs.com/package/@tresinternet/trex?activeTab=readme for more information on how to develop with TREX.
Configuration example
An example configuration file can be found in public/library.json
.