A CSS-only, resolution-independent "Fork me on GitHub" ribbon.
Home Page: https://simonwhitaker.github.io/github-fork-ribbon-css/
License: MIT License
I make videos of some of the PRs I submit:
I wonder if you could publish the package to bower?
Hey!
It would be great if you can make it responsive and it get a little smaller on phone screens.
Instead of cdnjs, I had been using a direct link to the latest version in this repo, and have just noticed it's broken for me (Chrome, OS X).
https://hugovk.github.io/whyaretheflagsup/ is using 0.2.0 from here and looks like this:
https://whyaretheflagsup.github.io/ is now using 0.1.1 via cdnjs and looks like this:
Hi,
I'm sorry that I couldn't help it with CSS as I know very little about so this is rather a question if you may.
Probably not the common usage or taste, but I would like to push it more to the corner to let other elements (footer especially) be displayed.
First I set it's z-index to 0 as I don't want it to be on top of other elements.
Second I want to push it more to the corner, and if possible make it like a small icon or a triangle rather than a ribbon
This is the capture
My preferred solution would be as minimal as possible, setting GitHub icon would be better and as a rectangle or a triangle.
If I need to keep it as a ribbon, I would like only the ribbon to be clickable and not a whole rectangle behind.
Thanks a lot
Demo looks good on IE9 but the ribbon is not clickable.
Followings are my suggestion to fix it:
Option to position the ribbon static on the page. Meaning it will remain in the top corner, even if the page scrolls.
Please update the version on bower. It is still on 0.2.0 but I need 0.2.1 with the box-sizing fix.
I see different bugs in each browser. Let me know if you need details.
Hi,
I don't know if you prepared this minified version, but one is available at https://cdnjs.cloudflare.com/ajax/libs/github-fork-ribbon-css/0.2.3/gh-fork-ribbon.min.css , and as I'd like to be able to get a local copy which matches the integrity of the CDN copy, it'd be nice if I could get this bundle with the npm release. Do you think you could bundle a minified copy?
Editing the index.html file to serve the CSS off of raw.github.com would me people would not need the asset locally, but would mean that if Github goes down, so does the ribbon. Thoughts?
not sure, where the problem is, just tested with yeoman generated angular app and I see following:
steps to reproduce:
mkdir fork-me-on-gh
cd fork-me-on-gh
yo angular
bower install --save github-fork-ribbon-css
grunt serve
Afterwards, just replaced (in fork-me-on-gh/app/index.html):
<body ng-app="forkMeOnGhApp">
with:
<body ng-app="forkMeOnGhApp">
<div class="github-fork-ribbon-wrapper left">
<div class="github-fork-ribbon">
<a href="https://github.com/simonwhitaker/github-fork-ribbon-css">Fork me on GitHub</a>
</div>
</div>
Currently, the ribbon looks pretty bad in IE <= 8. If it's not fixable perhaps support for these browsers should be dropped and show a message or something instead.
On Safari for iOS it's possible to scroll past the right hand edge of the page, revealing the "hidden" corner of the ribbon.
Hi @simonwhitaker! It seems on NPM your latest version is still 0.2.1, which does not use the data-ribbon but title and - at least for me - has text alignment issues. As a workaround I'm declaring dependency on your project as
"github-fork-ribbon-css": "simonwhitaker/github-fork-ribbon-css#0.2.2"
but it would be nice to be able to go back to
"github-fork-ribbon-css": "~0.2"
at some point. Thanks in advance! Best ribbon ever! 🥇
Have you thought about just using a gh-pages branch instead of 2 and removing the master one? Here it makes sense to do this.
A SCSS rewrite would make the color/right-left code much nicer (selector nesting). We could put the compiled CSS in the dist/ dir, and the SCSS in the src/ dir. A config.rb file is used by Compass (a SASS build tool), and would remove the need for a dedicated build script.
The demo with a local CSS file works fine:
https://simonwhitaker.github.io/github-fork-ribbon-css/
But when using the CDN-hosted files the ribbons are badly placed:
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/github-fork-ribbon-css/0.1.1/gh-fork-ribbon.min.css" />
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/github-fork-ribbon-css/0.1.1/gh-fork-ribbon.ie.min.css" />Demo:
https://hugovk.github.io/github-fork-ribbon-css/
Diff:
gh-pages...hugovk:gh-pages
Reproducible with Chrome, Safari, Opera on OS X.
The original ribbon used the K-Type Collegiate font - would be nice to put that to use with these.
It looks like someone's already compiled the font for web embedding, so it'd just be a matter of ganking these and perhaps hosting/hotlinking them via gh-pages:
https://github.com/tubbo/psychedeli.ca/tree/master/app/assets/fonts
Indeed, seeing as how it's been six years since the original publication of the image ribbons, which haven't been revisited even now that the official GitHub font brand has changed, it wouldn't be bad to see this embraced by upstream...
Chrome will blocked normalize.min.css automatically because the website use https protocol but the lib doesn't, the warning in Chrome's console :
The page at 'https://simonwhitaker.github.io/github-fork-ribbon-css/' was loaded over HTTPS, but ran insecure content from 'http://oss.maxcdn.com/libs/normalize-css/3.0.0/normalize.min.css': this content should also be loaded over HTTPS.
To make it work with JQueryMobile (and I would assume other frameworks as well), a z-index should be added to
.github-fork-ribbon-wrapper.left
.github-fork-ribbon-wrapper.right
.github-fork-ribbon-wrapper.left-bottom
.github-fork-ribbon-wrapper.right-bottom
The z-index needs to be 1001 or higher.
When bootstrap css is added to the page
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
The ribbons height is reduced and text is no longer aligned :
I'll implement this once #1 is merged.
After including the stylesheets, it's not clear how to add the ribbons to the page. A more experienced user can inspect the page and figure it out, but would be better to walk users through it explicitly. Thanks!
Hmm.. although in the preview Safari says that the ribbon will be read when I print it's black. Do you have any idea what the problem can be?
For the style-challenged among us, such as myself, please add a color override example to the Usage section.
e.g.,
<style> .github-fork-ribbon.right-top:before { background-color: #333; } </style>
It would have saved me 15 minutes.
Thanks!
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.
