kushalpandya / badgerly

A CSS 3 library for rendering badges.

Badgerly

    > bower install badgerly --save

---

• Integrates easily with Font Awesome!
• Fully implemented in CSS 3, no spacer images or other hackery.
• Simple to use CSS classes which can be extended.
• Implemented in SCSS, also available in plain CSS for your convenience.

Check out the Wall of Badges

Integrations

• angular-badgerly - Adds directive support for Badgerly, making it even easier (somehow) to create badges!

Colors

Gold, Silver, Bronze

Sizes

Tiny, Small, Medium, Large, Huge

Ribbon Patterns

Red, Orange, Yellow, Green, Blue, Purple, Pink, Black, Rainbow, and a bunch of country flags!

Supports either a single ribbon or a lanyard with two visible ribbons.

Examples

Round silver metal with a single purple ribbon

  <div class="badge large">
    <div class="ribbon purple">
    </div>
    <div class="circle silver border">
      <i class="fa fa-tree"></i>
    </div>
  </div>

Diamond gold metal with a red lanyard

  <div class="badge large">
    <div class="lanyard">
      <div class="ribbon left red"></div>
      <div class="ribbon right red"></div>
    </div>
    <div class="diamond gold border">
      <i class="fa fa-star"></i>
    </div>
  </div>

Contributing

Contributions and pull requests are welcome! Here are instructions on how to build the project:

• Make changes in the badgerly.scss file.
• Then, run npm install followed by gulp sass to transpile the SCSS file into CSS.
• Push the your changes to your fork and submit a PR.

Credits

• Badger icon made by Freepik from www.flaticon.com is licensed by CC 3.0 BY