Nocturnal Practitioners of Magic
    Have ideas to improve npm?Join in the discussion! »

    fork-corner

    2.0.1 • Public • Published

    Fork Corner Rate on Openbase

    by Waren Gonzaga Version Stars 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...

    Features

    Modern Design

    The Fork Corner design inspired by Tholman's 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.

    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. You can customize your Fork Corner animations by using utility classes just like using animate.css 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.

    Used By

    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!

    Issues

    If you're facing a problem in using Fork Corner please let me know by creating an issue in this github repository. I'm happy to help you! Don't forget to provide me some screenshot or error logs of it, thank you!

    Community

    Wanna see other projects I made? Join today!

    Community

    License

    Fork Corner is licensed under MIT - https://opensource.org/licenses/MIT

    Author

    Fork Corner is Developed and Maintained by Waren Gonzaga

    Facebook Twitter LinkedIn YouTube DEV BMC


    💻 Made with ❤️ and by Waren Gonzaga with YHWH 🙏

    Install

    npm i fork-corner

    DownloadsWeekly Downloads

    80

    Version

    2.0.1

    License

    MIT

    Unpacked Size

    38.4 kB

    Total Files

    8

    Last publish

    Collaborators

    • avatar