cora-ui

Cora-UI

Implementation of the Cora-UI Guidelines

Development

• yarn install to install dependencies
• yarn build to compile scss to css
• yarn start to serve the example html, useful for creating and testing new styles

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

Colors

Specific Colors

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

<div class="color-blackOlive color-eggShell--bg">
  Black Olive text and Egg Shell background
</div>

name	class	background
Egg Shell	color-eggShell	color-eggShell--bg
Desert Sand	color-desertSand	color-desertSand--bg
Pastel Pink	color-pastelPink	color-pastelPink--bg
Black Olive	color-blackOlive	color-blackOlive--bg
Raisin Black	color-raisinBlack	color-raisinBlack--bg
Aztec Gold	color-aztecGold	color-aztecGold--bg

Color Schemes

• Colors are to be used in background/text combinations. These schemes can be defined on parent elements and child elements will inherit them unless otherwise defined. The accepted schemes can be used as follows:

<div class="colorScheme-primaryDark">
  Egg Shell text and Black Olive background
</div>

name	class
Primary Light	colorScheme-primaryLight
Primary Dark	colorScheme-primaryDark
Alternate Light	colorScheme-alternateLight
Alternate Dark	colorScheme-alternateDark
Secondary Dark	colorScheme-secondaryDark

Buttons

• referenced with btn and cta class
• btn-light option and --disabled modifier available

<div class="btn">Button</div>
<div class="btn--disabled">Disabled Button</div>
<div class="btn-light">Light Button</div>
<div class="btn-light--disabled">Light Disabled Button</div>

<div class="cta">Call to Action</div>
<div class="cta--disabled">Disabled Call to Action</div>

Fonts

• Fonts are defined on <h1> through <h6> and <p> elements and should never have to be defined.
• Because this library currently only exports a css file, the font files have to be included and served by your projects build system. Font face families have to be defined in your local css as follows, so the cora-ui stylesheet can reference the correct family.

@font-face {
  font-family: 'ProximaNova-Regular';
  src: asset-url('path/to/font');
}

@font-face {
  font-family: 'ProximaNova-Semibold';
  src: asset-url('path/to/font');
}

@font-face {
  font-family: 'Monday';
  src: asset-url('path/to/font');
}

Input Fields

• <input> elements are styled by default and only have one variant which can be triggered with the .alternate class

<input placeholder='Normal input' />
<input class='alternate' placeholder='Alternate input' />

Alerts

• Alerts can be styled with the alert class.

<div class="alert">
  Alert banner message
</div>

Helpers

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