Skip to content

indiana-university/rivet-add-on-boilerplate-lite

Repository files navigation

Rivet Add-on Boilerplate Lite

The Rivet add-on boilerplate is a lightweight introduction to creating add-ons for the Rivet design system. To learn more, visit the Rivet wiki page about add-ons and the Rivet add-on directory.

Getting started

Setting up the Rivet add-on boilerplate is a four-step process. These instructions assume you are familiar with Git, GitHub, and Node.

1. Set up Node and NPM

To work with the Rivet add-on boilerplate, you'll first need to make sure you have Node and Node Package Manager (NPM) installed your computer.

Check if you have Node and NPM installed by running the following in your terminal:

node -v && npm -v

If you don't have both Node and NPM installed, visit the Node website for instructions on setting up Node on Windows, Mac, or Linux.

2. Clone this repo

Clone this repo to the computer on which you'll be developing your add-on:

git clone https://github.com/indiana-university/rivet-add-on-boilerplate-lite.git

3. Rename the boilerplate Sass and JavaScript files

Rename the following Sass and JavaScript files, replacing rivet-add-on-boilerplate-lite with the name of your add-on, such as rivet-progress-bar:

src/sass/rivet-add-on-boilerplate-lite.scss
src/js/rivet-add-on-boilerplate-lite.js

You'll also need to update the paths to the CSS and JavaScript files in src/index.html to point to your renamed files.

4. Start your development server

With Node and NPM installed, use your terminal to navigate to the folder into which you cloned this repo and run the following commands:

npm install
npm run start

This will generate a docs folder and open a browser at localhost:3000 where you can preview your add-on as you develop and document it.

5. Build and document your add-on

We've provided a src/index.html file where you can test your add-on, write documentation, and provide code examples.

This index.html file will be built to the docs folder and can be published with GitHub Pages. This folder is also where localhost:3000 points when you start your development server in step 4.

6. Distribute your add-on

To generate plain CSS and JS for your add-on that can be shared with others, run the following command:

npm run build

This will generate a dist folder containing your component's compiled CSS and JS that can be included on a page in another app.

Getting help with your add-on

If you need help building your add-on, you can reach out on the Rivet slack channel or Rivet mailing list.

Rivet Community Workshop Tutorial Details

The Spring 2019 Rivet Community Workshop will feature three add-on tutorial projects. You can find out more about them by following the links below:

About

A lightweight version of the Rivet Add-on Boilerplate

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published