Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
cora-ui - npm Package Compare versions
Comparing version 0.0.4 to 0.0.5
| { | ||
| "name": "cora-ui", | ||
| "version": "0.0.4", | ||
| "version": "0.0.5", | ||
| "description": "UI guide for Cora", | ||
@@ -5,0 +5,0 @@ "main": "dist/index.css", |
| # Cora-UI | ||
| ## Overview | ||
| Implementation of the Cora-UI Guidelines | ||
| UI guide for Cora projects | ||
| ## Development | ||
| ### Development | ||
| - `yarn install` to install dependencies | ||
@@ -12,6 +10,6 @@ - `yarn build` to compile scss to css | ||
| ## Deployment | ||
| ### Deployment | ||
| - `yarn release` follow prompts to publish to npm | ||
| ## Usage | ||
| ### Usage | ||
@@ -23,3 +21,3 @@ Reference the package and version directly in your html | ||
| ## Style Guide | ||
| # Style Guide | ||
@@ -32,38 +30,91 @@ ### Resets | ||
| ### Colors | ||
| - Colors are defined as `color-shade--type`. The color palette is defined in `/scss/colors.scss`. Colors can be used as follows: | ||
| #### Specific Colors | ||
| - Colors are defined as `color-<name>--<type>`. The color palette is defined in `/scss/colors.scss`. Colors can be used as follows: | ||
| ```html | ||
| <div class="blue-0 red-3--bg"> | ||
| Dark blue text and a light red background | ||
| <div class="color-blackOlive color-eggShell--bg"> | ||
| Black Olive text and Egg Shell background | ||
| </div> | ||
| ``` | ||
| ### Alerts | ||
| - Alerts can be styled as follows: | ||
| 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: | ||
| ```html | ||
| <div class="alert-success"> | ||
| <div class="close"></div> | ||
| <p>Alert success message</p> | ||
| <div class="colorScheme-primaryDark"> | ||
| Egg Shell text and Black Olive background | ||
| </div> | ||
| <div class="alert-error"> | ||
| <div class="close"></div> | ||
| <p>Alert error message</p> | ||
| </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` | ||
| - small button styling available with `btn--small` | ||
| - referenced with `btn` and `cta` class | ||
| - `btn-light` option and `--disabled` modifier available | ||
| ```html | ||
| <div class="btn">Button</div> | ||
| <div class="btn--small">Small 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 | ||
| - Font families are defined in `scss/fonts.scss` | ||
| - 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. | ||
| ```css | ||
| @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 | ||
| ```html | ||
| <input placeholder='Normal input' /> | ||
| <input class='alternate' placeholder='Alternate input' /> | ||
| ``` | ||
| ### Alerts | ||
| - Alerts can be styled with the `alert` class. | ||
| ```html | ||
| <div class="alert"> | ||
| Alert banner message | ||
| </div> | ||
| ``` | ||
| </div> | ||
| ### Helpers | ||
| - Some utility classes are defined in `scss/utility.scss`. |
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by24.65%
8541
- Number of lines in readme file
- increased by76.12%
118
Worsened metrics
- Lines of code
- decreased by-5.56%
17
No dependency changes