@trimble-oss/modus-variables

Modus Variables

This project provides a CSS sheet of variables for the Modus Design System, accessible via the modus-variables npm package.

Getting Started

• Install the package:

  npm i --save-dev @trimble-oss/modus-variables copyfiles
  

• Set up the postinstall script in your package.json:

  Create a postinstall script to copy the CSS file automatically. This will copy your CSS file to your public directory after running npm install. We recommend using copyfiles.

  {
    "name": "your-project-name",
    "version": "1.0.0",
    "scripts": {
      "postinstall": "copyfiles -f ./node_modules/@trimble-oss/modus-variables/css/modus-variables.css ./public"
    },
    "dependencies": {
      "@trimble-oss/modus-variables": "^1.0.0",
      "copyfiles": "^2.4.1"
    }
  }
  

• Reference the CSS file in your HTML:

  Add the following line to reference the CSS file in your HTML file:

  <link rel="stylesheet" type="text/css" href="public/modus-variables.css">
  

• Use the variables in your CSS:

  You can now use the Modus variables globally:

  .my-element {
    color: var(--col_trimble_blue);
  }