Design System

Mediocrity: It takes a lot less time and most people won't notice the difference until it's too late.


A design system unites product teams around a common visual language. It reduces design debt, accelerates the design process, and builds bridges between teams working in concert to bring products to life.

Reactium ships with the ability to create a Design System for your application elements and components.

Simply fire up the local instance $ npm run local and navigate to http://localhost:3030/toolkit to view the default elements.


Atomic Design

Reactium follows the Atomic Design paradigm as outlined by Brad Frost.

There are 4 distinct levels in atomic design:


Atoms

Applied to web interfaces, atoms are our HTML tags, such as a form label, input, or a button.


Molecules

Molecules are groups of atoms bonded together and are the smallest fundamental units of a compound. A search form maybe a good example of a molecule.


Organisms

Organisms are groups of molecules joined together to form a relatively complex, distinct section of an interface. A header or mega-nav would be considered an Organism.


Templates

Templates consist mostly of groups of organisms stitched together to form pages.


Creating Elements

Using the ARCLI you can easily add new elements and menu items to the Design System.

$ arcli element create
ARCLI Options:
Usage: element <action> [options]

Options:
  -o, --overwrite [overwrite]          Overwrite existing element.
  -i, --id [id]                        The element ID.
  -n, --name [name]                    The element name.
  -g, --group [group]                  The menu group to add the element to.
  -l, --label [label]                  The menu link text.
  -m, --menu-order [menuOrder]         The menu link index.
  -s, --stylesheet [stylesheet]        Add a stylesheet.
  -d, --documentation [documentation]  Show readme.
  -c, --code [code]                    Show Code view.
  -D, --dna [dna]                      Show DNA info.
  -h, --help                           Output usage information.

Themes

The design system accounts for multiple themes and allows you to quickly switch between them.

Creating a new theme:
$ arcli theme
ARCLI Options:
Usage: theme

Options:
  -n, --name [name]              Theme Name.
  -s, --stylesheet [stylesheet]  Theme stylesheet.
  -a, --active [active]          Activate the theme.
  -i, --inactive [inactive]      Deactivate the theme.
  -m, --menu-order [menuOrder]   Theme menu order index.
  -N, --new-name [newName]       Rename to.
  -h, --help                     Output usage information.

            

Customizing the Design System

Knowing that the Design System can be used to express a brand vision, there are a few areas where it can be customized by editing the ~/src/app/toolkit/index.js file.

Beware: editing the Design System ~/src/app/toolkit/index.js file is risky business and should be done with care. It’s recommended to backup or commit the working copy of your index.js before editing.

Custom Header

You can change the log, title, and version of the toolkit by editing the header properties:

1
2
3
4
5
6
7
8
9
module.exports = {
...
"header": {
    "logo"    : "/assets/images/atomic-reactor-logo.svg",
    "title"   : "Style Guide",
    "version" : "ver 2.0.1"
},
...
};

Customizing the Menu

You can customize the Design System Menu by adding new element groups:

$ arcli group create
ARCLI Options:
Usage: group <action>

Options:
  -o, --overwrite [overwrite]   Overwrite existing group. Beware this will remove all children of the group.
  -i, --id [id]                 The group ID.
  -l, --label [label]           Menu Text.
  -m, --menu-order [menuOrder]  Menu order.
  -h, --help                    Output usage information.

Custom Overview Page

The Overview page is displayed when you navigate to the http://localhost:3030/toolkit page. You can customize it by either replacing the required component or editing the default overview component located at ~/src/app/toolkit/overview/index.js.

module.exports = {
...
"overview": require('appdir/toolkit/overview').default,
...
};