Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add README.md #7

Closed
yeun opened this issue Sep 13, 2016 · 1 comment
Closed

Add README.md #7

yeun opened this issue Sep 13, 2016 · 1 comment
Assignees

Comments

@yeun
Copy link
Owner

yeun commented Sep 13, 2016

No description provided.

@yeun yeun self-assigned this Sep 13, 2016
@yeun
Copy link
Owner Author

yeun commented Sep 21, 2016

Open color

introduction

Open color is a color sheme for UI design. You can use it for font, background, border etc. It contains a gray and 12 colors.
All the color is perceptible by color blind (specifically deuteranopia and protanopia) person.

  • Since the colors can be adjusted in future, using Open color as main identity color is not recommended.

Installation

$ npm install open-color

Variable convention

$oc-(color)-(number)

  • oc: Abbreviation for Open color
  • (color): Color name like gray, red, lime ect.
  • (number): 0 to 9. Color brightness spectrum.

How to use

Import the file to your project and use the variables.

Example

//SASS, SCSS
@import 'path/open-color';

.body {
  backgrond-color: $oc-gray-0;
  color: $oc-gray-7;
}

a {
  color: $oc-teal-7;

  &:hover,
  &:focus,
  &:active {
    color: $oc-indigo-7;
  }
}

@yeun yeun closed this as completed Sep 21, 2016
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant