simple-colorwall v0.8.6
simple-colorwall
simple-colorwall is a lightweight JavaScript open source color generator to create a simple color wall with an arbitrary number colors. Size: 12.6 KB
Screenshot
The sliders are changing the rgb values
For more simplicity you can deactivate the sliders and the logo
Demo
Click on this link to find some preconfigured simple-colorwalls with good known colors and logos. Demo Link
Install
Bower
bower install simple-colorwallNPM
npm install simple-colorwallThe oldschool way
<script src="simple-colorwall.min.js" type="text/javascript" charset="utf-8"></script>Usage
Create a div element which has color-wall-container as id and invoke the simple-colorwall function.
<div id="color-wall-container"> </div>SimpleColorWall({
colors : [
'#2C7AA5',
'#3996C4',
'#055B74',
'#013442',
'#F0F3F4'
],
imgPreview: 'bower.svg'
});To create 5 random colors just omit the options parameter
SimpleColorWall();Options
This parameter is an object. Also, every option is optional!
| Option | Default | Type | Description |
|---|---|---|---|
| colors | null | array | (optional) A array full of hex color strings |
| imgPreview | false | string | (optional) Will show a little img on the top left corner |
| colorName | true | boolean | (optional) Activates and deactivates the automatic color name detection |
| sliders | true | boolean | (optional) Activates and deactivates sliders |
| autoGenerateCSS | true | boolean | (optional) simple-colorwall needs a bit of CSS, if you want to use your own style just pass a false to it. |
| dblclickForNewColumn | true | boolean | (optional) deactivates and activates a click event for creating a new column at runtime |
to translate simple-colorwall, you can also provide these options:
| Option | Default | Type |
|---|---|---|
| pleaseInsert | 'Please insert a valid 6 digit hex color with a # as prefix.' | string |
| isNotValidColor | 'is not a valid color.' | string |
How to use the UI
- Every hex value is editable via click and changes the value on the fly!
- If you hit a hex value which has a color name it will displayed.
- Double click on a column to add a new one.
- You can use the url to send your colors to others.
- Hover over a column to make the sliders visible.
How to build your own version
If you would like to build your own version of simple-colorwall, the only thing you need to do is to follow the steps below.
$ cd simple-colorwall
$ npm install
$ gruntBrowser compatibility
- Chrome 7+
- FireFox 23+
- Safari 5.1+
- Opera 15+
- Internet Explorer (Sry I do not have a Windows Machine)
Known Issues
Not touch/mobile friendly!
What´s new in 0.8.6 ?
- New UI Events
- Dropped jQuery support
- Created a project structure
Author
Oliver Jessner @oliverj_net, Website
Copyright © 2015 - 2016