Cora-UI
Implementation of the Cora-UI Guidelines
Development
yarn install
to install dependenciesyarn build
to compile scss to cssyarn 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:
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
throughcora-h7
andcora-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:
Black Olive text and Egg Shell background
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:
Egg Shell text and Black Olive background
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
andcora-cta
class cora-btn-light
option and--disabled
modifier available
ButtonDisabled ButtonLight ButtonLight Disabled Button Call to ActionDisabled Call to Action
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.
Input Fields
<input>
elements can be styled withcora-input
and only have one variant which can be triggered with the--alternate
modifier
Alerts
- Alerts can be styled with the
cora-alert
class.
Alert banner message