Get Started with Spectrum CSS

We have a number of resources that outline how to set up Spectrum CSS for your project, as well as an introductory tutorial that’s a hands-on way to understand how our implementation works.

Resources


If you’re ready to jump in, here’s how to set up Spectrum CSS on our GitHub:

Tutorial: add a Spectrum button


This introductory exercise will show you how to quickly add a Spectrum button to your project.

Installing Spectrum CSS

Spectrum CSS requires a Node.js environment with a minimum version of 10.

First, install the required button dependencies by running:

$ npm install @spectrum-css/vars @spectrum-css/button @spectrum-css/page

Installed components will be available in the node_modules/@spectrum-css/ folder or on the Spectrum CSS NPM page.

Setting up global variables

Create a new HTML file (e.g., button.html) in your project’s root folder.

or displaying a button in Spectrum’s light color theme and medium scale, a couple of classes need to be added to the document’s <html> tag:

<html class="spectrum spectrum--medium spectrum--light">

Adding Spectrum CSS

Inside the <head> tag, include the stylesheets that contain the design system tokens for global variables, scales, and color themes, as well as the stylesheets for the components themselves:

<head>
  <link rel="stylesheet" href="node_modules/@spectrum-css/vars/dist/spectrum-global.css">
  <link rel="stylesheet" href="node_modules/@spectrum-css/vars/dist/spectrum-medium.css">
  <link rel="stylesheet" href="node_modules/@spectrum-css/vars/dist/spectrum-light.css">
  <link rel="stylesheet" href="node_modules/@spectrum-css/page/dist/index-vars.css">
  <link rel="stylesheet" href="node_modules/@spectrum-css/button/dist/index-vars.css">
</head>

Inside the <body> tag, add the markup for a Spectrum button. Note that the example also includes the CSS class name, spectrum-Button--cta, to use the call to action (CTA) option.

<button class="spectrum-Button spectrum-Button--cta spectrum-Button--sizeM">
  <span class="spectrum-Button-label">Button</span>
</button>

Here’s what your final button.html file should look like:

<html class="spectrum spectrum--light spectrum--medium">
  <head>
    <link rel="stylesheet" href="node_modules/@spectrum-css/vars/dist/spectrum-global.css">
    <link rel="stylesheet" href="node_modules/@spectrum-css/vars/dist/spectrum-medium.css">
    <link rel="stylesheet" href="node_modules/@spectrum-css/vars/dist/spectrum-light.css">
    <link rel="stylesheet" href="node_modules/@spectrum-css/page/dist/index-vars.css">
    <link rel="stylesheet" href="node_modules/@spectrum-css/button/dist/index-vars.css">
  </head>
  <body>
    <button class="spectrum-Button spectrum-Button--cta spectrum-Button--sizeM">
      <span class="spectrum-Button-label">Button</span>
    </button>
  </body>
</html>
Screenshot of the rendered CTA button in a browser window

Contribute to Spectrum CSS


We’d love for you to contribute to the Spectrum CSS project. Review the contribution guidelines on our GitHub to get started.


No results found

Try another search term.