cora-ui

Cora-UI

Overview

UI guide for Cora projects

Development

• yarn install to install dependencies
• yarn build to compile scss to css

Deployment

• yarn release follow prompts to publish to npm

Usage

Reference the package and version directly in your html

<link rel="stylesheet" href="https://unpkg.com/cora-ui@0.0.3/dist/index.css">

Style Guide

Resets

• CSS resets are applied and defined in scss/base.scss.
• <h1> through <h6> and <p> defaults are applied
• Root font size is defined here and it is recommended to define relative sizes using em in your project

Helpers

• Some utility classes are defined in scss/utility.scss.

Colors

• Colors are defined as color-shade--type. The color palette is defined in /scss/colors.scss. Colors can be used as follows:

<div class="blue-0 red-3--bg">
  Dark blue text and a light red background
</div>

Alerts

• TODO

Buttons

• referenced with btn
• small button styling available with btn--small

<div class="btn">Button</div>

Fonts

• Font families are defined in scss/fonts.scss

Inputs

• TODO

Animations

• TODO