Colored Pages
Colored Pages offer easy and flexible use of color themes on your website with utiliy classes as well as your own custom CSS.
They come with six predefined color themes, each containing five different colors. You can specify which color theme is used on a webpage or let user switch between them and let Colored Pages do the work.
Table of Contents
Demo
How does it look? Check out Colored Pages demo.
Installation
NPM
Install package via npm
npm install colored-pages
Import
SCSS
copy and include JS
GitHub
Clone this repository.
Import
SCSS
and include JS
Make sure to include colored-pages after your custom SCSS in order to override the default variables.
Usage
Basic Usage
TL;DR
Define SCSS variables for color themes and color your webpage with utility classes listed below. If you need something more complex write your own stylesheets with CSS variables.
I. Add custom data attribute
First of all, to use Colored Pages themes add data attribute "data-clp-theme" to the body. The value of this attribute should be 'clp-theme-' + 'index of the theme'.
...
II. Declare color theme(s) variables
Continue by defining a SCSS map(s) of a color theme(s) you want to use. Each color theme has its own default values. You can override them by declaring up to 6 maps with the following keys in your custom SCSS file:
;
Map variables must be defined as $clp-theme-01, $clp-theme-02, ... $clp-theme-06. The keys (clp01, clp02, ... clp05) must remain the same too.
Only color values can change.
III. Declare transition variables (optional)
There are four transitions for you to customise that control the color change on specific CSS properties.
$clp-transition-clr // Color $clp-transition-bg // Background $clp-transition-stroke // Stroke $clp-transition-fill // Fill
The variables accept the CSS transition property values. The default value is:
Often you will want to disable transitions entirely to avoid flash of default theme. Another way would be disabling transitions for a brief moment with JavaScript by adding and removing a class with a wildcard that disables transitions on page load
IV. Add utility classes
You are ready to use colored-pages in your html!
Each utility class
.clp03-clr.clp01-bg .clp02-stroke...
is made of two parts:
a) first part tells us which color from the theme is used
.clp03...
b) while the second part determines which CSS property will be affected
...-clr // Color ...-bg // Background ...-stroke // Stroke ...-fill // Fill
For example, to specify color of the text with the first color value and background of the element with the third, you would write down
Colored Pages made me this way.
When assigning values to color themes keep in mind that certain combinations of colors might not work while others do. More often than not you will find yourself using certain keys for dark or bold colors, while reserving others for light shades.
Advanced Usage
I. Use custom CSS/SCSS
Whenever utility classes can't be used (for example, WYSIWYG fields), you can apply you custom styles by using Colored Pages CSS variables.
.my-container
II. Allow users to change themes
Colored Pages come with theme indexes/switches that allow the user to navigate between color themes. Each theme has a dedicated data attribute. Add it to the element to initialize it as an indicator. That is it! (And don't forget to include JS file that makes all of this possible.)
Try this themeor this oneor the thirdand fourthperhaps number 5?
Optionally, you can add clp-index class to get Colored Pages styled index (used in the Demo)
Selected color theme is saved in local storage.
Utility Classes
Class | Description |
---|---|
.clp01-clr | color property value set to first color of the current theme |
.clp01-bg | background-color property value set to first color of the current theme |
.clp01-stroke | stroke property value set to first color of the current theme |
.clp01-fill | fill property value set to first color of the current theme |
Of course you can chose second, third, fourth and fifth color of the current theme by using clp02-..., clp03-..., clp04-... and clp05-... respectively.
Variables
CSS Variables
Colored pages use only 5 CSS variables. They are the backbone of Colored Pages.
Variable | Description |
---|---|
var(--clp01) | First color in the theme |
var(--clp02) | Second color in the theme |
var(--clp03) | Third color in the theme |
var(--clp04) | Fourth color in the theme |
var(--clp05) | Fifth color in the theme |
SCSS Variables
Extensive list of default SCSS variables.
; ; ; ; ; ; ;;;;