orbit-style

Orbit Style is Radar Governamental's Design System, made with Sass and React

Install

yarn add @radargovernamental/orbit-style

Usage

Import global styles in your index.css (created with create-react-app):

@import '~@radargovernamental/orbit-style/styles/settings/_global.scss';

Use components

import React, { Component } from 'react'

import { Button } from '@radargovernamental/orbit-style'

class Example extends Component {
  render () {
    return (
      <Button>Hello</Button>
    )
  }
}

Check components in storybook

cd example
yarn install
yarn storybook

Concept

We had a few premise regarding our own design system:

We want to use it as pure scss (to reuse in non SPAs, such as landing pages, for example)
We want to use it with React
Must be able to use with as many frameworks as we need
Let's use well known packages for complex stuff - we don't need to reinvent the wheel
Must be tree shaking ready and use CSS Modules for SPAs.
Must be easy to use

Considering our premise, we mixed three main concepts: Atomic Design, ITCSS and BEM. How?

ITCSS

ITCSS is already quite known for its robustness and scalability regarding css. To adapt to our premise, here is what we did:

Settings: stores variables, colors and sizes
Tools: a series of mixins
Generic: reset, shared global styles
Elements: default body style
Objects: grid and wrappers
Components: all of ours components designed with Atomic Design (below)
Themes: not used yet
Trumps: few helpers

All of these styles are located in /src/styles. This allow us to accomplish premises 1, 2, 3 and 5.

Atomic Design

Following http://bradfrost.com/blog/post/atomic-web-design/ idea and considering we already have our "components" directory for styles, we now have create a components directory in /src/js/components. This directory is structured as: atom, molecule and organism, where:

Atom: all unit styles
Molecule: two or more atoms together, or something that might hold two atoms (an element container, for example)
Organism: more complex elements that mixes many molecules

Atomic Design gives us a series of new approaches to work as we want with our components in a high scalable way. Also, we first created all of our components using React, allowing us to use it with CSS Modules and import in our React projects

This allow us to accomplish premises 2, 5. To approach premise 6, it would be too complex for users to know what's an atom/molecule/organism, so we export them as their own name. Therefore, instead of using import Button from '@radargovernamental/orbit-style/atom', we just use import { Button } from '@radargovernamental/orbit-style'.

Also, to be sure 6 is achieved, we created all components using StoryBooks, which can be accessed in /example running yarn storybook.

BEM

BEM was a plus in terms of premises. We chose it to make it easier to control our components hierarchy in terms of CSS Modules and to better control states. For example: a Timeline component with alternate rows will have .c-timeline--alternate-rows class added. A Timeline with alternate rows AND with dates will have both .c-timeline--alternate-rows and .c-timeline--with-date classes added.

Complex components

The only remaining premise is 4. In order to follow it, complex components such as custom dropdown, grid, etc, were choosen from well known packages. For now, we are using:

react-autosize-textarea to auto resize textareas
react-content-loader for custom content loading such as Facebook's
react-flatpickr for custom calendar/time picker
react-flexbox-grid for flex grid
react-input-mask for input masking
react-modal for custom modals
react-quill for WYSIWYG
react-select for custom selects
react-tabs for accessible tabs
react-tippy for accessible tooltips

All credits for them, they did an awesome work :)

Contributors

@brunocramos

radargovernamental/orbit-style