Introduction
The new HD Design System provides an easy, theme based approach to design various services and tools with one unified language. Based on atomic components and simple rules for Typography, Layout and Spacing it is flexible enough to cover everything from simple form inputs to contextual actions and nested modals.
It's aim is not to provide the Designer with every single component but to rather provide essential patterns and rules to apply to more complex layouts and flows down the line.
Getting started
Install via npm
This design system is available on npm and can be installed in any node project:
# Using npmnpm i --save @hospitality-digital/design-system# Using yarnyarn add @hospitality-digital/design-system
Usage
The design system can be used as a complete system, or by extracting individual components on an as-needed basis.
Complete
To use the complete design system, import all.css
into your project:
@import 'node_modules/@hospitality-digital/design-system/css/all.css';
Individual components
In order to extract individual components, first import the main.css
file.
This file contains the fundaments of the design system and includes CSS variables, helper classes, and basic element styles.
@import 'node_modules/@hospitality-digital/design-system/css/main.css';
Now you can start importing individual components:
@import 'node_modules/@hospitality-digital/design-system/css/components/button.css';@import 'node_modules/@hospitality-digital/design-system/css/components/body-text.css';