@world-vision-canada/lumen-css
Advanced tools
Comparing version 0.0.3-dev.5 to 0.0.3-dev.6
{ | ||
"name": "@world-vision-canada/lumen-css", | ||
"version": "0.0.3-dev.5", | ||
"description": "", | ||
"version": "0.0.3-dev.6", | ||
"description": "CCS implementation of WVC's Lumen Design System. Intended to be imported into js framework(vue, react) implementation of lumen and wvc websites.", | ||
"main": "wvc-lumen.min.css", | ||
@@ -15,3 +15,3 @@ "author": "wvc_dev", | ||
"build": "yarn run bundle && yarn run copy", | ||
"bundle": "yarn run sass ./styles/styles.scss ./dist/wvc-lumen.css && yarn run sass ./styles/styles.scss ./dist/wvc-lumen.min.css --style compressed", | ||
"bundle": "yarn run sass ./src/styles/styles.scss ./dist/wvc-lumen.css && yarn run sass ./src/styles/styles.scss ./dist/wvc-lumen.min.css --style compressed", | ||
"copy": "cp package.json dist/ && cp README.md dist/", | ||
@@ -18,0 +18,0 @@ "storybook": "start-storybook -p 6001", |
@@ -1,5 +0,38 @@ | ||
# WVC Lumen Css # | ||
# WVC Lumen CSS # | ||
This README would normally document whatever steps are necessary to get your application up and running. | ||
CCS implementation of WVC's Lumen Design System. Intended to be imported into js framework(vue, react) implementation of lumen and wvc websites. | ||
## Running the Project | ||
- To download project dependecies, run `yarn`. | ||
- To run the storybook sandbox, run `yarn start`. | ||
- To compile scss to css for deployment(to dist/), run `yarn build`. | ||
- To lint (error check) your code, run `yarn lint`. | ||
## Getting Started | ||
### Using inside an HTML project | ||
In the `<head>` place: | ||
``` | ||
<link rel="stylesheet" href="https://unpkg.com/@world-vision-canada/lumen-css@*.*.*/wvc-lumen.min.css"> | ||
``` | ||
Replace `@*.*.*` with the correct version number if needed. | ||
Apply component classes to existing markup or copy component snippets from storybook. | ||
`<button class="wvc-btn wvc-btn--primary theme-light">Button</button>` | ||
### Import to js framework project (vue, react) | ||
- Download package, run `npm i @world-vision-canada/lumen-css` or `yarn add @world-vision-canada/lumen-css`. | ||
- Import css file at app's entry point | ||
``` | ||
import "@world-vision-canada/lumen-css/wvc-lumen.min.css"; | ||
``` | ||
- apply component classes to existing markup or copy component snippets from storybook. | ||
`<button class="wvc-btn wvc-btn--primary theme-light">Button</button>` | ||
*** | ||
### What is this repository for? ### | ||
@@ -6,0 +39,0 @@ |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
15930
62