Getting Started

A guide to creating a Boundless-ready React web app

Starting from scratch? Enigma's React webapp generator for Yeoman is a nifty tool that allows you to generate a boilerplate React web app built to official Enigma standards (more detailed usage instructions are available in that repo).

Install Boundless#

Since Boundless is modular, you can use as little or as much of the library as you desire. We recommend starting out with all the components:

npm install --save boundless

The --save option updates package.json automatically.

Later on if you wish to only use a few specific components, they can easily be installed separately:

npm install --save boundless-button boundless-popover

Add the Boundless CSS skin#

Boundless has default styles which can be imported into your CSS build tool of choice (we recommend Stylus.)

If you're using Stylus#

// inside your main style.styl
@import "node_modules/boundless/style.styl"

If you want to do any custom theming, feel free to redeclare variables present in style.styl above where you are importing it, like:

color-accent = royalblue

@import "node_modules/boundless/style.styl"

The above will automatically recolor the component styles to match your app's accent color.

If you're not using Stylus#

A precompiled version of the default styles is available at node_modules/boundless/public/skin.css or node_modules/boundless/public/skin.css (minified) for easy drop-in to your project.

Try it out#

Here's an example of using the Boundless "Button" component. First, import Button into your desired React file:

import {Button} from 'boundless';

Based on the Button props, we know we can give it children of our choice and hook into the "pressed" event by supplying an onPressed callback. Here's a minimal functional example:

import React from 'react';
import {Button} from 'boundless';

export default () => (
    <Button onPressed={() => alert('BORK! 🐶')}>
        Learn to Bork
    </Button>
)