Golden Label

label.css is a stylesheet providing an easy way to label html elements.

The golden-label gem integrates label.css with Rails asset pipeline for easy of use.

Include golden-label in Gemefile

gem 'golden-label'

Then run bundle install

Add to your app/assets/stylesheets/application.css.

*= require golden/label

Add html element with label class and data-label attribute.

<figure class="label" data-label="HTML5 & CSS3">
  <img src="images/html5css3.png" alt="HTML5 & CSS3">
</figure>

Adjust positon of label by adding class combination.

• inside can go with top, middle, bottom, left and right
• outside can go with top and bottom

Add hover effects by adding fade or float class.

<figure class="label inside bottom left float" data-label="HTML5 & CSS3">
  <img src="images/html5css3.png" alt="HTML5 & CSS3">
</figure>

Add to your app/assets/stylesheets/golden/label/variables.sass.

$label-background-color: rgba(242, 190, 69, 0.8)
$label-font-family: Helvetica
$label-font-size: 2em
$label-font-weight: bold

1. Fork it
2. Create your feature branch (git checkout -b my-new-feature)
3. Commit your changes (git commit -am 'Add some feature')
4. Push to the branch (git push origin my-new-feature)
5. Create new Pull Request

use MIT license.