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 most recent version directly in your html like so:

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

You can find the latest version hosted on npm

Style Guide

• All classes are namespaced with the cora- prefix to avoid conflicts

Resets

• CSS resets are applied and defined in scss/base.scss.

Typography

• Typography styles are defined as per the UI guidelines with cora-h1 through cora-h7 and cora-p

Colors

Specific Colors

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

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

name	class	background
Egg Shell	cora-color-eggShell	cora-color-eggShell--bg
Desert Sand	cora-color-desertSand	cora-color-desertSand--bg
Pastel Pink	cora-color-pastelPink	cora-color-pastelPink--bg
Black Olive	cora-color-blackOlive	cora-color-blackOlive--bg
Raisin Black	cora-color-raisinBlack	cora-color-raisinBlack--bg
Aztec Gold	cora-color-aztecGold	cora-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="cora-colorScheme-primaryDark">
  Egg Shell text and Black Olive background
</div>

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

Buttons

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

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

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

Fonts

• 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 can be styled with cora-input and only have one variant which can be triggered with the --alternate modifier

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

Alerts

• Alerts can be styled with the cora-alert class.

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