README.md in style_palette-0.0.5 vs README.md in style_palette-0.0.7
- old
+ new
@@ -1,25 +1,31 @@
-# StylePaletteGallery
+# StylePalette
-Gallery playground to test the gem [StylePalette](https://github.com/fguillen/StylePalette)
+When you have a bunch of _tags_ and you want to render them in a colorize way you can implement your own colorize system or you can use **StylePalette**.
-## Installation
+StylePalette offers a json based configured color collections that can be associate with words.
- git clone git@github.com:fguillen/StylePaletteGallery.git
- cd StylePaletteGallery
+StylePalette offers also helpers to render already styled `.label` elements.
+## The Gallery playground
+You can check your _style palettes_ in the [StylePaletteGallery](http://stylepalettegallery.herokuapp.com/) or [fork the app](https://github.com/fguillen/StylePaletteGallery) and create your own playground.
+
+## Installation
+
+ gem "style_palette"
+
## Usage
StylePalette.brush(<word>, <palette_name>)
StylePalette.brush("cat", :tags).background # => #f5abd5
StylePalette.brush("cat", :tags).foreground # => #000
StylePalette::Helper.style("cat", :tags) # => background-color: #f5abd5; color: #000;
- StylePalette::Helper.label("cat", :tags) # => <span class="label" style="background-color: #f5abd5; color: #000;">cat</span>
+ StylePalette::Helper.label("cat", :tags) # => <span class="badge" style="background-color: #f5abd5; color: #000;">cat</span>
## Configuration & Initialization
Create a _json_ file with the name of the **palettes** and with an array of _colorized_ styles for each palette, like this:
@@ -75,11 +81,11 @@
<%= render_label(current_user.state, :states) %>
## Word/Color assignment
-In the basic configuration ColorPallete takes a random _color_ for each _word_ (**always the same color for each word**), this is very helpful when you don't really care about the associated color for each word, for example if you have docens of _tags_ you are not gonna assign one specific color to each _tag_ just create a big enough palette and let StylePalette to choose.
+In the basic configuration StylePalette takes a random _color_ for each _word_ (**always the same color for each word**), this is very helpful when you don't really care about the associated color for each word, for example if you have docens of _tags_ you are not gonna assign one specific color to each _tag_ just create a big enough palette and let StylePalette to choose.
But if you want to _force_ a color for an specific word you can do it using the special _regex_ attribute for a color in this way:
"states": [
{ "style": "background-color: #cd8745; color: #000;" },
@@ -101,13 +107,13 @@
{ "style": "background-color: #CCCCCC; color: #000;", "regex": "^0$" },
{ "style": "background-color: #91E391; color: #000;", "regex": "^[^-]" },
{ "style": "background-color: #E68585; color: #000;", "regex": "^-" }
],
- StylePalette::Helper.label(0, :number) # => <span class="label" style="background-color: #CCCCCC; color: #000;">0</span>
- StylePalette::Helper.label(123, :number) # => <span class="label" style="background-color: #91E391; color: #000;">123</span>
- StylePalette::Helper.label(-99, :number) # => <span class="label" style="background-color: #E68585; color: #000;">-99</span>
+ StylePalette::Helper.label(0, :number) # => <span class="badge" style="background-color: #CCCCCC; color: #000;">0</span>
+ StylePalette::Helper.label(123, :number) # => <span class="badge" style="background-color: #91E391; color: #000;">123</span>
+ StylePalette::Helper.label(-99, :number) # => <span class="badge" style="background-color: #E68585; color: #000;">-99</span>
* For _zero_ the first color will be choosen
* For _positive numbers_ the second color will be choosen
* For _negative numbers_ the last color while be choosen
@@ -118,27 +124,24 @@
{ "style": "background-color: #85ffd0; color: #000;", "range": "0..20" },
{ "style": "background-color: #85c2ff; color: #000;", "range": "20..80" },
{ "style": "background-color: #ff85f3; color: #000;", "range": "80.." }
]
- StylePalette::Helper.label(0, :ranges) # => <span class="label" style="background-color: #fff385; color: #000;">0</span>
- StylePalette::Helper.label(45, :ranges) # => <span class="label" style="background-color: #85c2ff; color: #000;">45</span>
+ StylePalette::Helper.label(0, :ranges) # => <span class="badge" style="background-color: #fff385; color: #000;">0</span>
+ StylePalette::Helper.label(45, :ranges) # => <span class="badge" style="background-color: #85c2ff; color: #000;">45</span>
### Boolean assignment
"boolean": [
{ "style": "background-color: #91E391; color: #000;", "regex": "^(yes|1|true)$" },
{ "style": "background-color: #E68585; color: #000;", "regex": "^(no|0|false)$" }
],
- StylePalette::Helper.label(0, :boolean) # => <span class="label" style="background-color: #91E391; color: #000;">0</span>
- StylePalette::Helper.label("no", :boolean) # => <span class="label" style="background-color: #91E391; color: #000;">no</span>
- StylePalette::Helper.label("yes", :boolean) # => <span class="label" style="background-color: #E68585; color: #000;">yes</span>
- StylePalette::Helper.label(true, :boolean) # => <span class="label" style="background-color: #E68585; color: #000;">true</span>
+ StylePalette::Helper.label(0, :boolean) # => <span class="badge" style="background-color: #91E391; color: #000;">0</span>
+ StylePalette::Helper.label("no", :boolean) # => <span class="badge" style="background-color: #91E391; color: #000;">no</span>
+ StylePalette::Helper.label("yes", :boolean) # => <span class="badge" style="background-color: #E68585; color: #000;">yes</span>
+ StylePalette::Helper.label(true, :boolean) # => <span class="badge" style="background-color: #E68585; color: #000;">true</span>
-## The Gallery playground
-
-You can check your _style palettes_ in the [StylePaletteGallery](http://stylepalettegallery.fernandoguillen.info/) or [fork the app](https://github.com/fguillen/StylePaletteGallery) and create your own playground.