purplecoat.js

Purplecoat.js lets you create labeled overlays that can be triggered with a click. And you don't need to write a single line of Javascript.

Download on GitHub →

bower install purplecoat.js

Usage

Step 0: Add purplecoat-min.js along with jQuery.

<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script type="text/javascript" src="http://ellekasai.github.io/purplecoat.js/purplecoat.min.js"></script>

Step 1: Add data-purplecoat="foo" and data-purplecoat-label="Hello!" to any element.

<img data-purplecoat="foo"
     data-purplecoat-label="Hello!"
     src="http://placehold.it/200x150">

Step 2: Add data-purplecoat-toggle="foo" to any clickable element.

Now, go ahead and click this button to show the overlay label. Click again to hide the label.

<button data-purplecoat-toggle="foo">
  ✓ Click Me
</button>

(Explanation: The value of data-purplecoat-toggle must match the value of data-purplecoat to make this all work.)

Example Use Case

Shiori is a Jekyll blog theme I designed. Shiori lets you customize its layout by modifying the html files under its _includes directory.

Here I added purplecoat.js on Shiori's demo page. Users can now understand which part of the layout corresponds to which html file.

View Shiori →

Shiori

Customizations

You can create multiple triggers:

<button data-purplecoat-toggle="odd" ...>...</button>
<button data-purplecoat-toggle="even" ...>...</button>

<img data-purplecoat="odd"
     data-purplecoat-label="1 is odd" ...>
<img data-purplecoat="even"
     data-purplecoat-label="2 is even" ...>
<img data-purplecoat="odd"
     data-purplecoat-label="3 is odd" ...>

You can also customize the overlay color via data-purplecoat-color:

<button data-purplecoat-toggle="color-demo"
        data-purplecoat-color="rgba(63, 159, 252, 0.8)">...</button>

<img data-purplecoat="color-demo"
     data-purplecoat-label="Hello!" ...>
<img data-purplecoat="color-demo"
     data-purplecoat-label="Hello!"
     data-purplecoat-color="rgba(122, 182, 20, 0.8)" ...>

jQuery API

Purplecoat.js also offers a simple jQuery API that lets you toggle the overlay programmatically.

<img data-purplecoat="hover"
     data-purplecoat-label="Hello!" ...>

<script>
$(".js-purplecoat-hover-trigger").on("mouseover", function() {
  $("[data-purplecoat=hover]").purplecoat();
});
</script>
        

Author

Elle Kasai

Purplecoat.js is written by Elle Kasai, a UI designer/developer based in Vancouver.

Learn More about Elle →

Thanks!

P.S. If you like purplecoat.js, you should check out my other project: ResumeCards, a Markdown based resume generator. It looks great on mobile/desktop and can be saved as PDF.

Thanks to @chibicode for revising my English.