color-pusher v0.1.5

Dynamic color swatch manipulation for changing multiple elements CSS

The color-pusher widget allows anyone to quickly tweak colors on the page, including by theme / similarity / complementary. Now you can give the website to the graphic designer and let them explore and push colors.

installation

Requires nodejs and bower

bower install color-pusher

To use: requires bootstrap CSS and JS, jquery and angularjs.

use

include css and js in document's head

<link rel="stylesheet" href="bower_components/color-pusher/dist/color-pusher.css">
<script src="bower_components/color-pusher/dist/color-pusher.js"></script>

or include minified css and js

<link rel="stylesheet" href="bower_components/color-pusher/dist/color-pusher.min.css">
<script src="bower_components/color-pusher/dist/color-pusher.min.js"></script>

Simple

include widget as stand alone Angular module at the end of the body for example

<div ng-app="color-pusher">
    <color-pusher></color-pusher>
</div>

If you already have an Angular application, add color-pusher as a dependency

var app = angular.module('my-app', ['color-pusher']);

Intermediate

pass initial list of selectors and colors to the widget

<color-pusher
    selectors="body, .well, .info"
    colors="#f5e384, #9c846e, #9c046e">
</color-pusher>

Open the widget and click "Apply colors".

Read this great short tutorial on picking the right color template for your website for background information.

Uses jQuery xcolor and pusher.color.js plugins to manipulate colors. Uses jquery-minicolors color picker via angular-minicolors.

Small print

License: MIT - do anything with the code, but don't blame me if it does not work.

Spread the word: tweet, star on github, etc.

Support: if you find any problems with this module, email / tweet / open issue on Github

History

0.1.5 / 2013-12-09

hiding colour lovers fields using attribute, fixes #41
moved show/hide logic to outer widget, fixes #40

0.1.4 / 2013-12-08

split colourslovers, widget and color-pusher (outer widget)
printing palette fetch error to console
using aged, fixes #38

0.1.3 / 2013-12-07

Merge branch 'feature/split-apply'
started splitting widget from main controller

0.1.2 / 2013-12-05

added badges
added travis file, fixes #34

0.1.1 / 2013-12-04

minified js and css
added banner to output files, fixes #21
adding empty spacer to prevent widget from overlaying on top of the content

0.1.0 / 2013-12-02

allowing swapping selectors, fixes #19
easy colors export, fixes #31

0.0.9 / 2013-12-01

addition of new colors, fixes #4
added ability to remove selected color
when fetching palette, button is disabled, fixes #23

0.0.8 / 2013-12-01

selectors and colors can be passed as attributes, fixes #27
attaching color-pusher widget to bottom of the window
added favicon, fixes #26

0.0.7 / 2013-12-01

selected better default colors
changed button layout

0.0.6 / 2013-12-01

added glyphs, hide and show widget
added alertify, fixes #12, fixes #16

0.0.5 / 2013-12-01

created nicer angular directive
removed bootstrap js min
compiling into widget
setting border color same as background

0.0.4 / 2013-11-30

switched default text color strategy to auto
fetching colourlover palette using API, fixes #5
you can set strategy for generating text color, fixes #9
colors and selectors adjust dynamically to generated colors

0.0.3 / 2013-11-29

you can set strategy for generating text color, fixes #9
colors and selectors adjust dynamically to generated colors
added different color generation strategies

0.0.2 / 2013-11-28

every color allows color picker or edit

0.0.1 / 2013-11-28

added grunt gh-pages task
added small color samples to input fields
recomputing everything on changed based color, and applying colors

0.0.0 / 2013-11-27

added grunt tasks
initial

michalliu / color-pusher Goto Github PK

color-pusher's Introduction