How to use Adobe Design tokens - Spectrum

Official link：https://spectrum.adobe.com/

My Sample

Get Started with Spectrum CSS

Tutorial: add a Spectrum button

1. Installing Spectrum CSS

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

2. Setting up global variables

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

3. Adding Spectrum CSS

<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>

4. Add button

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

5. Final html

<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">
      <span class="spectrum-Button-label">Button</span>
    </button>
  </body>
</html>

How to add Card component

You need to import the package in order to use the component and include in the css file declaration.

1. Install the corresponding component

npm install @spectrum-css/card@2.0.0

2. Import card css

@import "./node_modules/@spectrum-css/card/dist/index-vars.css";

3. Add component

<div class="content-card">
    <a href="subpage/post.html">
        <div class="spectrum-Card" tabindex="0" role="figure">
            <div class="spectrum-Card-coverPhoto"
                 style="background-image: url(img/download.jpeg)"></div>
            <div class="spectrum-Card-body">
                <div class="spectrum-Card-header">
                    <div class="spectrum-Card-title">Blog Post 1</div>
                </div>
                <div class="spectrum-Card-description">
                    <p>
                        Consulted he eagerness unfeeling deficient existence of.
                        Calling nothing end fertile for venture way boy.
                        Esteem spirit temper too say adieus who direct esteem.
                    </p>
                    <p>
                        It esteems luckily mr or picture placing drawing no.
                        Apartments frequently or motionless on reasonable projecting expression.
                        Way mrs end gave tall walk fact bed.
                    </p>
                </div>
            </div>
        </div>
    </a>
</div>

PreviousLesson 5: Creating Responsive LayoutsNext3. Javascript & The DOM

Last updated