cora-ui

0.0.9 • Public • Published

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>

Readme

Keywords

none

Package Sidebar

Install

npm i cora-ui

Weekly Downloads

2

Version

0.0.9

License

MIT

Unpacked Size

9.39 kB

Total Files

5

Last publish

Collaborators

  • nicholasmueller