

Purplecoat.js – Simple Labeled Overlays - ellekasai
http://ellekasai.github.io/purplecoat.js/

======
cproctor
I like when I'm on a run thinking about adding something to my website, and
then I get home to find that very feature, nicely implemented, posted on HN!
(Also, as a former English teacher, I can't resist pointing out a typo:
"(Explanation: The value of deta-purplecoat-toggle must match the value of
data-purplecoat to make this all work.)"

~~~
ellekasai
Thank you! Fixed the typo :)

------
jdp23
Very nice! Nicely presented as well ... and timely too, I was just thinking
about something today this would be perfect for.

It seems like you could extend this to put more information on the coats. For
example, I'd like to use one coat for help text and another to convey state
changes. A data-purplecoat-class on the button (that then is applied to the
generated div) could describe this easily enough ... in general, are you
thinking of adding more power to what can be specified?

------
tdicola
Nice effect! I really like the look of the Jekyll theme you made too, Shiori.
Love the simplicity and use of Bootstrap.

~~~
ellekasai
Thank you so much!

------
tzaman
Interesting! May I ask how you got the idea for this? I'm thinking about
possible use cases :)

~~~
doomspork
At the bottom of the page there is an example of using it to highlight the
areas of the page the user can customize .

~~~
hartror
That example probably belongs near the top. It wasn't clear to me at all what
the usecases were until I got to the end.

~~~
ellekasai
Thank you! I brought it closer to the top :)
[http://ellekasai.github.io/purplecoat.js/](http://ellekasai.github.io/purplecoat.js/)

------
m_mueller
While this is fixable with the customization options, I find the readability
in the demo lacking. The transparency, the color choices or some combination
of both doesn't make it look nice to me. I like the simplicity of the solution
though.

~~~
ellekasai
Thank you for your feedback :)

------
iM8t
This is a great thing to have for CMSs. Clients often times don't understand
what's `navigation.html` or `top header`, so this could aid in helping them to
understand it. Good job!

------
doppp
This is awesome, Elle! Tell Shu I said hi! :)

