A modern and global open source fork corner label for your project's landing page.
npm install fork-cornerbash
$ npm i fork-corner --save
`
or add it directly to your webpage using a CDN:
`html
`
Usage
After installing Fork Corner simply add this one line of code to the of your webpage:
`html
`
Fork Corner uses _fork-corner_ as ID to identify which element should be use in creating the fork corner. The class _fork-corner_ is use to identify which element to be controlled by the class. We have few important classes to quickly customize the fork corner's look and feel.
$3
Class to position the Fork Corner on your webpage. By default, the position is _top right_.
| Class | Position |
|-------|----------|
| fc-pos-tr | Top, Right |
| fc-pos-tl | Top, Left |
| fc-pos-tr-sticky | Top, Right, Sticky |
| fc-pos-tl-sticky | Top, Left, Sticky |
| fc-pos-br | Bottom, Right _(sticky by default)_ |
| fc-pos-bl | Bottom, Left _(sticky by default)_ |
$3
Class to animate the Fork Corner on your webpage. By default, when you hover your mouse to the icon it will rotate.
| Class | Animation |
|-------|-----------|
| fc-animate | Icon rotation on cursor hover |
| fc-animate-slideup | Icon slide up on cursor hover |
| fc-animate-slidedown | Icon slide down on cursor hover |
| fc-animate-grow | Icon grow on cursor hover |
| fc-animate-shrink | Icon shrink on cursor hover |
| fc-animate-fade | Icon fade out on cursor hover |
> More animation will come, have animation in mind? Contribute today!
$3
Class to select pre-defined theme or style you want to use. By default, it will show the official Git logo.
| Class | Theme/Brand |
|-------|-----------|
| fc-theme-animate | Git Logo |
| fc-theme-github | GitHub Logo |
| fc-theme-gitlab | Gitlab Logo |
| fc-theme-bitbucket | Bitbucket Logo |
> More theme and brand will come, have one in mind? Contribute today!
$3
Class to select pre-defined corner size. By default, it is set as 200px. To set the default size just don't add the size class.
| Class | Corner Size |
|-------|-----------|
| fc-size-small | 150px corner size |
| fc-size-medium | 250px corner size |
| fc-size-large | 300px corner size |
> If you're looking for specific size please edit the source file and build it.
Used By
- _animate.css_
- _daisy.js_
- _pufferpanel_
- _prynk_
- _Your project goes here_
> Wanna see your project here? Let us know!
Badges
Working on custom logo...
---
Contributing
Contributions are welcome, create a pull request to this repo and I will review your code. Please consider to submit your pull request to the `dev`` branch. Thank you!