classbxr Bookmarklet

[ryanaltvater]

@srambach @andresgalante

I created a bookmarklet for classbxr that can be dynamically enabled/disabled from your bookmarks bar, on the fly. Hope this helps make implementation and usage of the tool much faster and easier. :)

https://codepen.io/ryanaltvater/pen/eWBKNG

*The only caveat is that the bookmarklet currently points to
https://cdn.rawgit.com/srambach/classbxr/1767f73e/css/classbxr.css. This requires manually updating the hash in the URL every time there's a new commit, unless there's a more static address that can be used instead.

[andresgalante]

hey @ryanaltvater how are you?

This is pretty awesome!! :) it also shows that classbxr needs adjustments so it doesn't break the layout when it's on. Probably not changing the width and using an outline instead of a border can help. I wanted to look into that once summit craziness was done.

Do you want to send a PR to update the README with a link to the bookmarklet?

Btw, this is Sarahs project :) not mine.

[ryanaltvater]

@andresgalante I'm good, thanks for asking. I hope you're doing well too. :)

You know, I noticed that as well with the layouts breaking. I wasn't sure if it was the intent or not, but I didn't mind the exploded view either. I did try removing the padding/margin/width from the CSS, and replaced the border with an outline. While the layout no longer broke, the class identification was harder to read because most class names are overlapping.

I also found the extension below. Same idea, slightly different execution. The element and class identification is revealed by holding "cmd (or ctrl)" and hovering a highlighted element.
http://pesticide.io