Installation

Installing the package

The package can be installed through npm, using the command shown below. This brings with it all the CSS we need for our components and design system.

npm install @thg-altitude/standalone-components-css

The npm page for the package can be found here.

Importing the package

Within your main/global CSS file, import the package. This way subsequent CSS files, components and pages will have access to the libraries classes and variables.

import '@thg-altitude/standalone-components-css';

Time For A Test Run

Test the installation by adding a component such as the one below into your project:

<button class="skin-tertiary-emphasised interactive btn">
  <span>If I'm purple, we're ready for lift off</span>
  <div class="icon-container">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="32"
      height="32"
      viewBox="0 0 32 32"
    >
      <path
        fill="currentColor"
        d="m7.288 23.292l7.997-7.997l1.414 1.414l-7.997 7.997z"
      />
      <path
        fill="currentColor"
        d="M17 30a1 1 0 0 1-.37-.07a1 1 0 0 1-.62-.79l-1-7l2-.28l.75 5.27L21 24.52V17a1 1 0 0 1 .29-.71l4.07-4.07A8.94 8.94 0 0 0 28 5.86V4h-1.86a8.94 8.94 0 0 0-6.36 2.64l-4.07 4.07A1 1 0 0 1 15 11H7.48l-2.61 3.26l5.27.75l-.28 2l-7-1a1 1 0 0 1-.79-.62a1 1 0 0 1 .15-1l4-5A1 1 0 0 1 7 9h7.59l3.77-3.78A10.92 10.92 0 0 1 26.14 2H28a2 2 0 0 1 2 2v1.86a10.92 10.92 0 0 1-3.22 7.78L23 17.41V25a1 1 0 0 1-.38.78l-5 4A1 1 0 0 1 17 30"
      />
    </svg>
  </div>
</button>
<button class="skin-tertiary-emphasised interactive btn">
  <span>If I'm purple, we're ready for lift off</span>
  <div class="icon-container">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="32"
      height="32"
      viewBox="0 0 32 32"
    >
      <path
        fill="currentColor"
        d="m7.288 23.292l7.997-7.997l1.414 1.414l-7.997 7.997z"
      />
      <path
        fill="currentColor"
        d="M17 30a1 1 0 0 1-.37-.07a1 1 0 0 1-.62-.79l-1-7l2-.28l.75 5.27L21 24.52V17a1 1 0 0 1 .29-.71l4.07-4.07A8.94 8.94 0 0 0 28 5.86V4h-1.86a8.94 8.94 0 0 0-6.36 2.64l-4.07 4.07A1 1 0 0 1 15 11H7.48l-2.61 3.26l5.27.75l-.28 2l-7-1a1 1 0 0 1-.79-.62a1 1 0 0 1 .15-1l4-5A1 1 0 0 1 7 9h7.59l3.77-3.78A10.92 10.92 0 0 1 26.14 2H28a2 2 0 0 1 2 2v1.86a10.92 10.92 0 0 1-3.22 7.78L23 17.41V25a1 1 0 0 1-.38.78l-5 4A1 1 0 0 1 17 30"
      />
    </svg>
  </div>
</button>

Start Using It!

You’re all set! From here its up to you to use as little or as much of the package as you like, and by using a tool like Tailwind, any unused CSS will be pruned from your project at build time keeping your pages quick and lightweight.

So, whats next?

If you want to explore how to take our default themes and make them your own, then go ahead and get familiar with the Altitude Design System. Wether you need to get our styles inline with our current sites, or want to use the Altitude Design System as the basis for styling your site, we explain it all here.

In love with the default stylings already, and want to get straight into integrating our components into your site, check out any of the component specific documentation examples to grab the code and get started.