NPM Packages for Camp Gladiator's Design System.

Packages

• @campgladiator/ui: library written in Sass including typography, colors, elements, utilities, components, etc;
• @campgladiator/components: collection of React components that depends on the above;

Basic Usage

CGUI can be used in two ways:

1. As a collection of react components
2. As a stripped-down sass library

Using the react component library offers the most benefits. This is always recommended for react apps.

For apps not using react, the Sass library can be used to allow you to access basic styles and create your own components based on the existing style library.

Note: The Sass library is standalone, but the React components require the Sass library as a dependency.

Install the necessary dependencies:

React Component Library

$ yarn add @campgladiator/ui @campgladiator/components

OR:

Standalone Sass Library

$ yarn add @campgladiator/ui 

The included source files are written in Sass. After installing you can add your project's node_modules directory to your Sass include paths, then import it like this:

@import '~@campgladiator/ui/main';

The component library is meant to be tree-shakeable, therefore you need to import each component individually:

import { render } from 'react-dom'
import Button from '@campgladiator/components/build/Button'

render(
  <Button solid primary>cool, it works</Button>,
  document.getElementById('app')
)