Show HN: Minimalistic “Fork Me on GitHub.”(github.com)

9 pointsby muzzammildotxyzvor 9 Jahren20 comments

Show HN: Minimalistic “Fork Me on GitHub.”

https://github.com/muhammadmuzzammil1998/OctoCSS

21 comments

zichyvor 9 Jahren

Here's another minimalistic approach:

    <a href="https://github.com/yourname">Fork me on GitHub</a>

You can now use the <a> tag anywhere in your code.

hashmalvor 9 Jahren

"minimal*" is a word that is used a lot nowadays, but you sir, really got the gist of it.

muzzammildotxyzvor 9 Jahren

That, sir, is truly <em>THE</em> minimalistic, easy, and with cross-browser compatibility approach I have ever seen. Thanks :)

asuzukivor 9 Jahren

Unbelievable! It just works. </sarcasm>

nebabytevor 9 Jahren

It even works with fluid designs. We call it liquid courage

muzzammildotxyzvor 9 Jahren

It is the minimalistic approach. :D

chrismorganvor 9 Jahren

http://tholman.com/github-corners/ is another, which gives you straight SVG to inline. This one with a couple of minutes of minification and inlining comes to about 1 170 bytes (no gzip); that one after similar time comes to about 985 bytes and more accessible (see its aria-label/aria-hidden) if you remove the fancy animation which is a bonus.

(I confess I’m addicted to shaving bytes.)

muzzammildotxyzvor 9 Jahren

Yes it looks good with the animation... If I knew about this one I probably would not have wrote OctoCSS... Thanks anyway... :)

bfred_itvor 9 Jahren

Much better design too, regardless of size.

muzzammildotxyzvor 9 Jahren

Yup.

Tepixvor 9 Jahren

FYI, the "original" ribbons are at

https://github.com/blog/273-github-ribbons

They use PNG images which are around 8kb. The SVG from this project (which lacks the text) is 1kb.

TazeTSchnitzelvor 9 Jahren

One of the annoying things about images of this kind is their bounding box is twice the size it should be.

muzzammildotxyzvor 9 Jahren

Thanks, but I knew that already and didn't like it. So I thought an OctoCat would send the same message as "Fork me on Github" :) That's why it does not have any text.

BenjaminBinivor 9 Jahren

On my screen I can see color difference between the Octocat and the background (on your demo website).

muzzammildotxyzvor 9 Jahren

https://github.com/muhammadmuzzammil1998/OctoCSS/commit/246c...

Its fixed :) Thank you for noticing that.

deamvor 9 Jahren

That's correct. The svg background-color should be changed to #F9F9F9.

muzzammildotxyzvor 9 Jahren

I'll fix that thanks.

muzzammildotxyzvor 9 Jahren

Please feel free to contribute. I'll fix that thanks.

dannywvor 9 Jahren

Design suggestion: increase the padding of the GitHub logo. It looks quite crowded.

muzzammildotxyzvor 9 Jahren

Please feel free to contribute.

[deleted]vor 9 Jahren