| 1 | <p align="center">
|
| 2 | <a href="https://creativecommons.github.io/vocabulary/" class="readme-vocabulary-logo">
|
| 3 | <img
|
| 4 | alt="Vocabulary logo"
|
| 5 | src="https://raw.githubusercontent.com/creativecommons/vocabulary/master/readme_assets/vocabulary_logo.svg?sanitize=true"
|
| 6 | height="40px"/>
|
| 7 | </a>
|
| 8 | </p>
|
| 9 |
|
| 10 | > Vocabulary is a cohesive design system to unite the web facing Creative Commons.
|
| 11 |
|
| 12 | <p align="center">
|
| 13 | <a
|
| 14 | href="https://github.com/creativecommons/vocabulary/blob/master/LICENSE"
|
| 15 | style="margin-right: 1em;">
|
| 16 | <img alt="MIT license" src="https://img.shields.io/github/license/creativecommons/vocabulary.svg?color=brightgreen"/>
|
| 17 | </a>
|
| 18 | <a
|
| 19 | href="https://github.com/creativecommons/vocabulary/blob/master/CONTRIBUTING.md"
|
| 20 | style="margin-right: 1em;">
|
| 21 | <img alt="PRs welcome" src="https://img.shields.io/badge/PRs-welcome-brightgreen.svg"/>
|
| 22 | </a>
|
| 23 | <a
|
| 24 | href="https://github.com/creativecommons/vocabulary/actions"
|
| 25 | style="margin-right: 1em;">
|
| 26 | <img alt="GitHub Actions" src="https://img.shields.io/github/workflow/status/creativecommons/vocabulary/vocabulary-ci/master?label=vocabulary-ci"/>
|
| 27 | </a>
|
| 28 | <a
|
| 29 | href="https://cc-vocabulary.netlify.com"
|
| 30 | style="margin-right: 1em;">
|
| 31 | <img alt="Netlify" src="https://img.shields.io/netlify/fcee0dba-9c91-450d-96e5-82494e6b3af9"/>
|
| 32 | </a>
|
| 33 | </p>
|
| 34 |
|
| 35 | Vocabulary is the code implementation of Creative Commons' Design Language. Vocabulary makes it easier to develop Creative Commons apps while ensuring a consistently familiar experience.
|
| 36 |
|
| 37 | ## Included Packages
|
| 38 |
|
| 39 | `vocabulary` is a monorepo containing three packages:
|
| 40 |
|
| 41 | - [@creativecommons/vocabulary](packages/vocabulary) - The main CSS component library
|
| 42 | - [@creativecommons/fonts](packages/fonts) - A collection of typefaces and icon fonts
|
| 43 | - [@creativecommons/vue-vocabulary](packages/vue-vocabulary) - Vue component library powered by the main CSS library
|
| 44 |
|
| 45 | Packages are located in the `/packages` directory.
|
| 46 |
|
| 47 | ## Installation
|
| 48 |
|
| 49 | You would need to have [Node.js](https://nodejs.org/en/) and [npm](https://www.npmjs.com/) installed.
|
| 50 |
|
| 51 | To run the storybooks for all packages in this repository:
|
| 52 |
|
| 53 | ```bash
|
| 54 | npm install
|
| 55 | npm run setup
|
| 56 | npm run build
|
| 57 | npm run storybook
|
| 58 | ```
|
| 59 |
|
| 60 | To run the storybook for an individual package (say, fonts):
|
| 61 |
|
| 62 | ```bash
|
| 63 | cd packages/fonts
|
| 64 | npm install
|
| 65 | npm run build
|
| 66 | npm run storybook
|
| 67 | ```
|
| 68 |
|
| 69 | ## Using
|
| 70 |
|
| 71 | To use Vocabulary in your projects, refer to [this document](https://cc-vocabulary.netlify.com/?path=/docs/vocabulary-usage--page).
|
| 72 |
|
| 73 | ## Contributing
|
| 74 |
|
| 75 | To contribute to Vocabulary, refer to [this document](https://cc-vocabulary.netlify.com/?path=/docs/vocabulary-contribution--page).
|
| 76 |
|
| 77 | ## Versioning
|
| 78 |
|
| 79 | Vocabulary uses [CalVer](https://calver.org/) for version numbering, in the `YYYY.M.Micro` format. `Micro` is bumped whenever there are multiple releases in a month, for example `2020.7.1` is the first release in July 2020, while `2020.7.2` is the second.
|
| 80 |
|
| 81 | ## License
|
| 82 |
|
| 83 | Licensed under the Expat/[MIT](http://www.opensource.org/licenses/MIT) license.
|