CSS Fork Me On GitHub Banner

So yeah, that dude in the top right corner is pretty much it. Nothing revolutionary, but if you want a dynamic, customizable, and easy to use banner without an extra http request then have at it.

It's also designed to be mobile first, so you'll get a fork icon on phones and the full banner on everything else. Resize your browser or view on a phone to see it in action.

Features

Super simple markup:

<div class="fork-me-wrapper">
    <div class="fork-me">
        <a class="fork-me-link" href="[your repo url]">
            <span class="fork-me-text">Fork Me On GitHub</span>
        </a>
    </div>
</div>

Easy to override styles

.fork-me {
    background-color: #000;
}

Fully customizable with SASS support via _fork-settings.scss
Placed on the right side by default, optionally change to left
```
<div class="fork-me-wrapper fork-me-left">
    ...
</div>
```
Positioned absolutely by default, optionally change to fixed positioning
```
<div class="fork-me-wrapper fork-me-fixed">
    ...
</div>
```
Fork icon set as a background SVG image via a data uri in the CSS
- No extra http request
- Cacheable
- Scalable
Fork icon defaults to white, optionally change to black
```
<div class="fork-me fork-me-dark">
    ...
</div>
```

Installation

Install with Bower:
```
bower install fork-me-on-github --save
```
Clone the git repo:
```
git clone https://github.com/edull24/fork-me-on-github.git
```
- checkout the tagged release you want to use
Download the latest release source

Usage

Basic:

Pull in the styles:

<link rel="stylesheet" href="[path to fork.css]">

Add the markup:

<div class="fork-me-wrapper">
    <div class="fork-me">
        <a class="fork-me-link" href="[your repo url]">
            <span class="fork-me-text">Fork Me On GitHub</span>
        </a>
    </div>
</div>

Override the default styles by adding your own rules to your CSS file (optional)
For example, this site has overridden the default banner background color:
```
.fork-me {
    background-color: #000;
}
```

Advanced (SASS):

Import the core SASS file (scss/_fork.scss) into your project
```
@import '[path to _fork.scss]';
```
Copy and import the settings file (scss/_fork-settings.scss) into your project to customize the generated CSS (optional)
For example, this site has overridden the default banner border:
```
$fork-text-border: 1px dotted #fff;
```

Demo

Inspect the banner on this page or try out this pen.

See the Pen diljy by Evan Dull (@evandull) on CodePen.

Donate

If you benefit from this project, please consider donating to one of the following charities: