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>