@dscout/particle v1.0.0-alpha.13

particle

A pattern library for building dscout user interfaces with React.

Install particle using yarn or npm:

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

Visit the demo site to see example code of the components. Everything is a named export on the namespace "@dscout/particle," for example:

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

export default function Announcement() {
  return (
    <Container>
      <ContainerInner>
        <h2>Important!</h2>
        <p>Make sure to eat your vegetables.</p>
      </ContainerInner>
    </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

Install dependencies with yarn:

$ yarn install

Storybook provides a neat approach to developing UI components. Start up the development server with yarn start and open your browser to http://localhost:6006.

Scripts

A variety of scripts are provided for running common tasks.

Lint with ESLint:

$ yarn lint

Watch the tests with Karma:

$ yarn test

Lint, then run the test suite:

$ yarn ci

Remove and re-create the lib directory:

$ yarn clean

Create a build (outputs to the lib directory):

$ yarn build

Minify the CSS build:

$ yarn nano

Create a release with a minified CSS build:

$ yarn release

Generate the documentation website (output to the docs directory):

$ yarn build-docs