An elegant and minimalistic color palette for UI design.
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist
docs
media
scripts
scss
templates
test
.gitignore
.sass-lint.yml
CODE_OF_CONDUCT.md
LICENSE
Makefile
README.md
bower.json
colors.json
index.scss
package.json
postcss.config.js

README.md

siimple-colors

siimple-colors

Made with siimple npm npm devDependency Status npm

siimple-colors is an elegant and minimalistic color palette for UI design.

Getting started

siimple-colors can be installed using npm:

$ npm install --save siimple-colors

Or imported in your HTML files using a CDN.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/siimple-colors@1.0.0/dist/siimple-colors.min.css">

Documentation

We are working on a new documentation for v1.0.0.

Usage

Using CSS variables:

You can apply the color in your CSS styles simply by using our CSS variables:

.red-text {
    color: var(--siimple-red);
}

.blue-text {
    color: var(--siimple-blue-light);
}

.green-bg {
    background-color: var(--siimple-green-dark);
}

Using CSS selectors

Use .siimple--color-{COLOR} class to change the text color, or .siimple--bg-{COLOR} to change the background color. Optionally, you can use a lighten or darken color using .siimple--color{COLOR}-{LIGHTNESS} class for changing the text color, and .siimple--bg-{COLOR}-{LIGHTNESS} for changing the background color.

<span class="siimple--color-red">Text with red color</span>
<span class="siimple--bg-blue-dark siimple--color-white">White text with dark blue color</span>

Using SASS/SCSS

Using the siimple-color function defined in scss/functions.scss is the easiest way to load our colors in your SASS/SCSS files. This function will return a string with the hex value of the desired color, and gets two arguments:

  • COLOR: a string with the desired color.
  • LIGHTNESS (optionally): a string with the desired lightness variant of the color. If not provided, the function will return the base color.
@import "siimple-colors/scss/functions.scss";

.blue-text {
    color: siimple-color("blue");
}
.red-text {
    color: siimple-color("red", "extra-dark");
}
.green-bg {
    background-color: siimple-color("green", "light");
}

You can also use the colors variables defined in scss/colors.scss. Each color has a variable with the following formats:

  • $siimple-{COLOR} for the base color.
  • $siimple-{COLOR}-{LIGHTNESS} for the darken and lighten variants of the color.
@import "siimple-colors/scss/colors.scss";

.blue-text {
    color: $siimple-blue;
}
.red-text {
    color: $siimple-red-extra-dark;
}
.green-bg {
    background-color: $siimple-green-light;
}

License

Code and documentation © 2018 the siimple team. The code is released under the MIT License and the documentation is released under the Creative Commons CC BY 4.0 License.

The siimple-colors logo is © 2018 Josemi Juanes. Released under the Creative Commons CC BY-SA 4.0 License.