Separate library code/demo code and markup/styles

msisto commented 8 years ago

Sweet! I'm tired of the GitHub ribbon too and would love to see this gain some traction. I love the hover animation!

This seemed like a fun thing to contribute to, so I thought I'd share some ideas. Let me know what you think or if you want me to break this down into smaller pulls. I got a little carried away :smile: ...

Separate style from markup - The good thing about the original way you have this set up is that anyone can copy/paste your markup and get the same result. Still, I think it would be nice to let the default method for setting color & size to be in CSS, as this is considered best practice. Keeping fill set on the path elements provides a nice default (black corner w/ white Octocat).
Separate library code from demo page code - I always appreciate it when library code is not mixed with the demo page's code. Here I created a dist directory, which contains only the required styles.
BEM - Use BEM naming methodology for more descriptive and meaningful class names. Classes are namespaced (gh-corner) to avoid style conflicts on existing pages.
Add "sticky" option - Added a modifier, .gh-corner--fixed for a "sticky" corner.
"Arm wave" becomes a "tail wiggle" - I love this animation, but the thing that shakes is actually (I believe) the Octocat's tail, not arm. This pull tweaks those names :)
Update demo page accordingly - I did some DRYing up of the demo page HTML and CSS and updated the page to cover these changes.
Demo page updates:

msisto commented 8 years ago

Just realized why it ships with two SVG files (tail on left). Would need to fix that on the left-corner version.

tholman commented 8 years ago

Hey mate!

Really appreciate this, especially so early in the projects life. I'm kind of in the midst of making an editor, or something along the lines, which will probably make this a bit redundant... so going to close this out for now. But again, very appreciated (please don't take closing this issue the wrong way)

Hahaha, I swear octopus's don't have tails, but everyone is calling it one :dancer: Going to stick with wave too ;)

msisto commented 8 years ago

Cool! It's an octoCAT. Hence the tail :-)

— Sent from Mailbox

On Sat, Nov 14, 2015 at 1:50 PM, Tim Holman notifications@github.com wrote:

Hey mate! Really appreciate this, especially so early in the projects life. I'm kind of in the midst of making an editor, or something along the lines, which will probably make this a bit redundant... so going to close this out for now. But again, very appreciated!

Hahaha, I swear octopus's don't have tails, but everyone is calling it one :dancer: Going to stick with wave too ;)

Reply to this email directly or view it on GitHub: https://github.com/tholman/github-corners/pull/4#issuecomment-156732800

tholman commented 8 years ago

Fair enough :)

I always imagined it like a centaur or mermaid... Octopus on the bottom cat on the top :)

tholman / github-corners

Separate library code/demo code and markup/styles #4

Demo page updates:

Hahaha, I swear octopus's don't have tails, but everyone is calling it one :dancer: Going to stick with wave too ;)