Skip to Main Content

Designs launchingafterJuly 14, 2021, please referencethe latest release of Spark.

Installing Spark

Installing Spark in an HTML Project

Adding Spark Components

Now you’re ready to start writing the HTML to build the structure of the components you’ll be using. Here we’ll cover how to add components for HTML, CSS and JavaScript environments with no JavaScript framework. You can follow along with the code examples in this guide using the sample app found in our starter repository.

This guide is Part 3 in a 3-Part series. You can also check out Part 1 - Setting Up Your Environment and Part 2 - Installation.

For instructions on setting up Spark in other environments, check out the guides for Angular and React development environments.

Navigating to Component HTML

  1. To get started, select the Using Spark tab at the top of this page. This is where you’ll find all the HTML you’ll need for the component variants and configurations you can use.

  2. Underneath the Components section in the left column, find the component you want to add.

For example: Let’s say you’re trying to add a Loading Button. You’d select the Button component.

  1. Click the HTML link to view the HTML documentation.

  2. Navigate to the Docs tab at the top of the screen.

  3. Scroll down until you see the component variant you would like to include in your site.

  4. Click Show code.

  5. Copy the sample code into index.html.

For example: If you’re adding a Loading Button, you’d scroll down on the Button page to find Loading Button. Then you’d copy the Loading Button code that looks like this:

<button class="sprk-c-Button" data-sprk-spinner="click">
Submit
</button>

Note: Make sure you’re including main.js after the HTML elements in index.html. The <script> line should be at the bottom of the <body> tag.

  1. You should see the component you just installed with all the correct Spark CSS applied.

For example: If you’ve added a Loading Button you’ll see something like this…

A Spark Button Spinner component.

You did it!

You’re ready to start building with Spark!

Additional Topics