@contactlab/ds-tokens NPM

Design Tokens

Named entities that store visual-design info, in order to maintain a scalable, consistent system for user interface development.

Design Tokens

CDN Usage

Put the link tags in the head of your index.html document:

<!-- The Montserrat Font (optional, you can import it from the Google Font CDN) -->
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/@contactlab/ds-tokens@latest/css/montserrat.css"
/>

<!-- The CSS Custom Properties -->
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/@contactlab/ds-tokens@latest/css/vars.css"
/>

<!-- The Common Contactlab Styles -->
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/@contactlab/ds-tokens@latest/css/common.css"
/>

What does it do?

Corrects bugs and common browser inconsistencies.
The montserrat.css stylesheet provides the official font of the Contactlab products. If you like, you can import it from the Google Font CDN.
The common.css stylesheet provides useful defaults to plain HTML documents.
The vars.css stylesheet dispatches the Contactlab's CSS Custom Properties (aka CSS variables). The SCSS, LESS and JavaScript version are provided.
The custom-media.css stylesheet injects the Contactlab's CSS Custom Media Queries. The SCSS, LESS and JavaScript version are provided.

Install

Install CSS-Kit and save them to your package.json dependencies:

npm install @contactlab/ds-tokens --save

Webpack usage

Import the Design Tokens in CSS:

/* The Montserrat Font (optional, you can import it from the Google Font CDN) */
@import '~@contactlab/ds-tokens/css/montserrat.css';

/* The CSS Custom Properties */
@import '~@contactlab/ds-tokens/css/vars.css';

/* The Common Contactlab Styles */
@import '~@contactlab/ds-tokens/css/common.css';

Import the Design Tokens in JavaScript:

// The Montserrat Font (optional, you can import it from the Google Font CDN)
import '@contactlab/ds-tokens/css/montserrat.css';

// The CSS Custom Properties
import '@contactlab/ds-tokens/css/vars.css';

// The Common Contactlab Styles
import '@contactlab/ds-tokens/css/common.css';

In webpack.config.js, be sure to use the appropriate loaders:

module.exports = {
  //--- other webpack configuration stuffs...
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      }
    ]
  }
};

Custom Media Queries

Caution: The Custom Media Queries are a native feature of the CSS in the process of becoming a web standard. Read the official specification draft.

You can consume the predefined Custom Media Queries. In Webpack bundler, import the custom-media.css as dependency.

Import Custom Media Queries in CSS:

/* The Custom Media Queries */
@import '~@contactlab/ds-tokens/css/custom-media.css';

Import Custom Media Queries in JavaScript:

// The Custom Media Queries
import '@contactlab/ds-tokens/css/custom-media.css';

In webpack.config.js, be sure to use the appropriate loaders and the postcss-custom-media plugin:

module.exports = {
  //--- other webpack configuration stuffs...
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          {loader: 'css-loader', options: {importLoaders: 1}},
          {
            loader: 'postcss-loader',
            options: {
              ident: 'postcss',
              plugins: () => [postcssCustomMedia(/* pluginOptions */)]
            }
          }
        ]
      }
    ]
  }
};

Alternatively, you can use the following postcss-config in conjunction with postcss-loader or postcss-cli.