warengonzaga / fork-corner

A modern and global open source fork corner label for your project's landing page.
https://fork-corner.warengonzaga.com
MIT License
28 stars 4 forks source link
badge badges bitbucket bitbucket-corner corner corner-label fork fork-me github github-corner github-fork-coner gitlab gitlab-corner hacktoberfest labels landing-page modern ribbon ribbons webpage

Fork Corner Featured on Openbase

created by release star Size NPM jsdelivr license

Banner

A modern and global open source fork corner label for your project's landing page.

What is Fork Corner

A modern approach to the old style of adding "Fork Me" ribbon or label in an open source project's landing page.

😎 Demo

Visit fork-corner.warengonzaga.com for the demo. Watch the video demo via Waren Gonzaga's YouTube Channel.

Fork corner generator page coming soon...

πŸ“– Documentation

The complete documentation can be found here:

docs

⚑ Features

Modern Design
> _The Fork Corner design inspired by [Tholman's GitHub Corners](https://github.com/tholman/github-corners), I made my own version by adding more control to it using CSS and JS. Instead of using SVG I use icons from [Devicons](https://devicons.dev)._
Responsive
> _Fork Corner is responsive to any screen sizes. Focus on your landing page while fork corner do the rest of responsive design._
Customizable
> _It uses class to quickly customize your Fork Corner. It allows you to change themes, animations, and which want you want to position your Fork Corner. You can edit the source file if you want more advance customization._
Lightweight
> _Fork Corner is very lightweight and optimized so don't worry about the performance of your landing page._
CSS3 Animations
> _Fork Corner author is a core contributor to the popular [animate.css](https://animate.style). You can customize your Fork Corner animations by using utility classes just like using [animate.css](https://animate.style) utility classes._

πŸ“¦ Installation

Install with npm:

$ npm i fork-corner --save

or add it directly to your webpage using a CDN:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fork-corner/dist/fork-corner.min.css">
<script src="https://cdn.jsdelivr.net/npm/fork-corner/dist/fork-corner.min.js" defer></script>

πŸ•ΉοΈ Usage

After installing Fork Corner simply add this one line of code to the <body> of your webpage:

<a href="https://github.com/user/repo" target="_blank" id="fork-corner" class="fork-corner fc-pos-tr fc-animate fc-theme-git"></a>

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.

Position Class

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)

Animation Class

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!

Theme Class

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!

Size Class

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.

🎯 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!

Read the project's contributing guide for more info.

πŸ’¬ Discussions

For any questions, suggestions, ideas, or simply you want to share your experience in using this project, feel free to share and discuss it to the community!

πŸ› Issues

If you're facing a problem in using Fork Corner please let me know by creating an issue here. I'm here to help you!

πŸ€ Sponsors and Supporters

BuyMeaCoffee Vercel CircleCI GitBook Digital Ocean Deepware NOWPayments StackHawk

Love what I do? Send me some coffees!

Your coffee donation and support will help me to continue working on open-source projects like this.

🌏 Community

Join to my growing tech community and get the latest updates!

community community

πŸ“‹ Code of Conduct

Read the project's code of conduct.

πŸ“ƒ License

Fork Corner is licensed under The MIT License.

πŸ“ Author

Fork Corner is created by Waren Gonzaga, with the help of awesome contributors.


πŸ’» Made with πŸ’– and β˜• by Waren Gonzaga with YHWH πŸ™ | Citizen of Heaven