style_palette

StylePaletteGallery

Gallery playground to test the gem StylePalette

Installation

git clone git@github.com:fguillen/StylePaletteGallery.git
cd StylePaletteGallery

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>

Configuration & Initialization

Create a json file with the name of the palettes and with an array of colorized styles for each palette, like this:

{
  "states": [
    { "style": "background-color: #cd8745; color: #000;" },
    { "style": "background-color: #82d37c; color: #000;" },
    { "style": "background-color: #81dbde; color: #000;" }
  ],

  "tags": [
    { "style": "background-color: #f5acb0; color: #000;" },
    { "style": "background-color: #f5abd5; color: #000;" },
    { "style": "background-color: #e7abf5; color: #000;" },
    { "style": "background-color: #b2a6f5; color: #000;" }
  ]
}

Check a configuration example file.

Then initialize StylePalette this way:

StylePalette.palettes_config = <palettes_file_path.json>

Rails integration

Configuration:

# config/style_palettes.json
{
  "states": [
    { "style": "background-color: #cd8745; color: #000;" },
    { "style": "background-color: #82d37c; color: #000;" },
    { "style": "background-color: #81dbde; color: #000;" }
  ]
}

Initialization:

# config/initializers/style_palette.rb
StylePalette.palettes_config = "#{Rails.root}/config/style_palettes.json"

Helper:

# app/helpers/application_helper.rb
def render_label(word, palette_name)
  StylePalette::Helper.label(word, palette_name).html_safe
end

Use:

# in any template
<%= 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.

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;" },
  { "style": "background-color: #82d37c; color: #000;" },
  { "style": "background-color: #81dbde; color: #000;", "regex": "blocked" }
],

Now if the word is blocked then the last color is gonna be choosen.

As you can guess, any valid regex can be used in this field.

Check the examples in the tests

Also check the next examples:

Number assignment

"number": [
  { "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>

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

Range assignment

"ranges": [
  { "style": "background-color: #fff385; color: #000;", "range": "..0" },
  { "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>

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>

The Gallery playground

You can check your style palettes in the StylePaletteGallery or fork the app and create your own playground.