4 ms·

Purplecoat.js – Simple Labeled Overlays

147 points by ellekasai 12y ago

tdicola 12y ago
Nice effect! I really like the look of the Jekyll theme you made too, Shiori. Love the simplicity and use of Bootstrap.
- ellekasai 12y ago
  Thank you so much!
tzaman 12y ago
Interesting! May I ask how you got the idea for this? I'm thinking about possible use cases :)
- doomspork 12y ago
  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 12y ago
    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 12y ago
      Thank you! I brought it closer to the top :) http://ellekasai.github.io/purplecoat.js/ http://ellekasai.github.io/purplecoat.js/
- taylorlapeyre 12y ago
  I've used something like this for showing supplementary information when a user hovers over an image. Think Dribbble.
- jeangenie 12y ago
  Could also be useful for interactive walkthroughs of interfaces.
- wmeredith 12y ago
  We're currently using something like this for in-app help on my company's SASS offering.
cproctor 12y ago
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 12y ago
  Thank you! Fixed the typo :)
m_mueller 12y ago
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 12y ago
  Thank you for your feedback :)
jdp23 12y ago
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?
doppp 12y ago
This is awesome, Elle! Tell Shu I said hi! :)
iM8t 12y ago
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!

147 points by ellekasai 12y ago

tdicola 12y ago

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

ellekasai 12y ago
Thank you so much!

tzaman 12y ago

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

doomspork 12y ago
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 12y ago
  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 12y ago
    Thank you! I brought it closer to the top :) http://ellekasai.github.io/purplecoat.js/ http://ellekasai.github.io/purplecoat.js/
taylorlapeyre 12y ago
I've used something like this for showing supplementary information when a user hovers over an image. Think Dribbble.
jeangenie 12y ago
Could also be useful for interactive walkthroughs of interfaces.
wmeredith 12y ago
We're currently using something like this for in-app help on my company's SASS offering.

cproctor 12y ago

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 12y ago
Thank you! Fixed the typo :)

m_mueller 12y ago

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 12y ago
Thank you for your feedback :)

jdp23 12y ago

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?

doppp 12y ago

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

iM8t 12y ago

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!