Skip to content

Latest commit

 

History

History
56 lines (43 loc) · 3.38 KB

QUICK-START.md

File metadata and controls

56 lines (43 loc) · 3.38 KB

Quick start guide

This guide will show you how to quickly install Spectrum CSS and use it to display the Button component.

Install using Node/yarn

Install the components you want along with their dependencies. Here's an example:

yarn add -DW @spectrum-css/tokens @spectrum-css/typography @spectrum-css/page @spectrum-css/icon @spectrum-css/button

Spectrum CSS components utilize custom properties in order to change themes and scales. For these to apply, a couple of classes need to be added to the document’s <html> tag based on the visual language, scale, and theme you wish to use. For example, the following code snippet will display styling for the default Spectrum visual language using medium scale and light color theme:

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

Use the index.css files in your project to include component and global styles (Spectrum and Express contexts, background theme/colorstop, platform scaling, etc.) for the component. If you don't need all of the global styles, peek at the docs for including assets). Use this file by including the stylesheet (plus stylesheets for dependencies) in the <head> tag:

<head>
  <!-- Include global tokens depedency first -->
  <link rel="stylesheet" href="node_modules/@spectrum-css/tokens/dist/index.css"/>

  <!-- Include index.css for the components you're using -->
  <link rel="stylesheet" href="node_modules/@spectrum-css/button/dist/index.css"/>
</head>

Inside the <body> tag, add the markup for your component (Spectrum button in our example). The example also includes the CSS class names spectrum-Button--fill and spectrum-Button--accent, to use the accent variant:

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

To put it all together, your final html file will look like this:

<html class="spectrum spectrum--light spectrum--medium">
  <head>
    <link rel="stylesheet" href="node_modules/@spectrum-css/tokens/dist/index.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--fill spectrum-Button--accent spectrum-Button--sizeM">
      <span class="spectrum-Button-label">Button</span>
    </button>
  </body>
</html>

Include files from a CDN

Another way to include Spectrum CSS components in your project is to use a CDN to link to the components you want, plus their dependencies, in the <head> tag of your HTML. If you choose to use a CDN, please note that Spectrum CSS doesn't manage a CDN, cannot confirm the availability or up-time of external CDNs, and doesn't recommend using a CDN for Spectrum CSS in a production environment.