Particle

A CSS framework and React component library for building dscout user interfaces. Visit the documentation site to learn more.

Usage

Install particle using yarn or npm:

$ yarn add @dscout/particle
$ npm install --save @dscout/particle

Everything is a named export on the namespace "@dscout/particle," for example:

import React from 'react';
import { Container, Heading } from '@dscout/particle';

export default function Announcement() {
  return (
    <Container>
      <Heading level="2">Important!</Heading>
      <p>Make sure to eat your vegetables.</p>
    </Container>
  );
}

Stylesheets

Stylesheets are included in two formats: css and scss.

Pre-compiled stylesheets are located in the lib directory of the build output. To import into a plain CSS file:

@import 'node_modules/@dscout/particle/lib/stylesheets/particle.css';
@import 'node_modules/@dscout/particle/lib/stylesheets/particle.min.css';

The source scss file is located in the styles directory. You can import it into your own scss file like so:

@import '@dscout/particle/styles/particle.scss';

Developing with Storybook

Storybook provides an isolated development environment for Particle components as well as a published static site that serves as a playground and documentation.

Install dependencies

Particle uses asdf to manage the node dependencies. To develop locally first install asdf with:

brew install asdf

Then install nodejs. If you don't already have nodejs set up on your machine you may first need install its dependencies and OpenPGP keys:

brew install coreutils
brew install gpg
bash ~/.asdf/plugins/nodejs/bin/import-release-team-keyring

Install asdf dependencies

asdf install

Install NPM dependencies with yarn:

yarn install

Start Storybook

Run Storybook locally:

yarn start

Scripts

A variety of scripts are provided for running common tasks.

Lint with ESLint and run typechecker:

yarn lint

Start the Vitest test runner in watch mode:

yarn test

Contributing

See the wiki for details on how to contribute to Particle.

Releasing a new version

Instructions for preparing a new release and submitting it to npm can be found here.