Installation

Quantum design system - Quantum global CSS styles library

Install package

After installing npm or yarn, and having configured the artifactory, you can install @qtm/css with this command:

npm

npm install -S @qtm/css@latest

yarn

yarn add @qtm/css@latest

Install fonts

The Quantum design system was designed with the Roboto font in mind. The Roboto fonts will not be automatically loaded by the Thales design system. The developer is responsible for loading all fonts used in their application.

Roboto & Roboto Mono fonts have a few easy ways to get started.

With CDN

<link rel="preconnect" href="https://fonts.gstatic.com" />
<link
  href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"
  rel="stylesheet"
/>
<link
  href="https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap"
  rel="stylesheet"
/>

With npm

You can install it by typing the below command in your terminal:

# with npm
npm i -S @fontsource/roboto @fontsource/roboto-mono

# with yarn
yarn add @fontsource/roboto @fontsource/roboto-mono

Then, you can import it in your entry-point.

import '@fontsource/roboto';
import '@fontsource/roboto-mono';

info

As the fontsource documentation says, importing the '@fontsource/roboto'or the '@fontsource/roboto-mono' only imports the font weight 400. In order to support more weight or styles, and to import the same configuration as the CDN, you can import the fontsource as below:

import '@fontsource/roboto/100.css';
import '@fontsource/roboto/300.css';
import '@fontsource/roboto/400.css';
import '@fontsource/roboto/500.css';
import '@fontsource/roboto/700.css';
import '@fontsource/roboto/900.css';

import '@fontsource/roboto/100-italic.css';
import '@fontsource/roboto/300-italic.css';
import '@fontsource/roboto/400-italic.css';
import '@fontsource/roboto/500-italic.css';
import '@fontsource/roboto/700-italic.css';
import '@fontsource/roboto/900-italic.css';

Install icons

The Quantum Design System was designed with the Material icons in mind.

The Material icons will not automatically be loaded by the Quantum Design System. The developer is responsible for loading all icons used in their application.

<link
  href="https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp"
  rel="stylesheet"
/>

Usage

This global CSS styles librairy contains:

• Quantum tokens
• All Component styles
• The preflight styles

Once you have installed this package, you just have to import CSS styles!

With a bundler that supports CSS imports in JS /CSS files:

import '@qtm/css';

or in css

@import '@qtm/css';

Otherwise include it in your HTML file:

<link rel="stylesheet" href="./node_modules/@qtm/css/dist/index.css" />

You can also import each component individually but do not forget to import the preflight styles:

With a bundler that supports CSS imports in JS /CSS files:

import '@qtm/css/dist/preflight.css';
import '@qtm/css/dist/button.css';

or in css

@import '@qtm/css/dist/preflight.css';
@import '@qtm/css/dist/button.css';

Otherwise include it in your HTML file:

<!-- preflight is needed -->
<link rel="stylesheet" href="./node_modules/@qtm/css/dist/preflight.css" />
<!-- button component -->
<link rel="stylesheet" href="./node_modules/@qtm/css/dist/button.css" />

Preflight (Optional)

Built on top of modern-normalize, Preflight is a set of base styles for Quatum projects that are designed to smooth over cross-browser inconsistencies and make it easier for you to work within the constraints of your design system.

With a bundler that supports CSS imports in CSS file:

@import '@qtm/css/dist/preflight.css';

Otherwise include it in your HTML file:

<link rel="stylesheet" href="./node_modules/@qtm/css/dist/preflight.css" />

Utilities (Optional)

It provides you with a complete CSS with a huge set of utility classes as it is generated with Tailwind CSS. Then it will be up to you to optimize for production by purging the CSS according to the classes used in your HTML.

With a bundler that supports CSS imports in CSS file:

@import '@qtm/css/dist/utilities.css';

Otherwise include it in your HTML file:

<link rel="stylesheet" href="./node_modules/@qtm/css/dist/utilities.css" />

For example:

<div class="flex p-m mb-m">
  <p class="text-primary-500">
    Hello
    <span class="font-bold">World!</span>
    <span role="img" aria-label="Tada!"> 🎉 </span>
  </p>
</div>

If you already using Tailwind CSS in your project or you want to take full advantage of all its features like functions & directives by building your own classes via @apply for example. You can check our package @qtm/tailwind-preset which will explain to you how to use Quantum styles in a Tailwind project.