Table of contents
About
Toucan Library is a small CSS and JavaScript library that can easily be integrated into any web project. The library allows the developer to include UI Elements and Easter Eggs, making even the most boring website just a little more fun. It's stylish and clean, but the characteristics of the Toucan Library is its eye-catching colors and shapes. The purpose of the library was originally to develop my web-development skills and continuously test new ideas. Development of the library started in May 2020 and the first release was published in August 2020.
Getting started
There are two ways you can implement the Toucan Library to your project:
- Download the files as well as include stylesheet and script to your code.
- Use npm to install the library.
Download and include files
Download the toucan-library folder and place it at the root of your file structure along with your index file.
Include stylesheet in the head section as shown below:
<head>
<link href="toucan-library/css/toucan-style.css" rel="stylesheet" />
</head>Place the script immediately before the body tag closes as shown below:
<body>
<!-- Your content -->
<script src="toucan-library/js/toucan-script.js"></script>
</body>That's it! Now you are ready to include UI Elements and Easter Eggs to your site
Use npm to install
If you have Node.js and npm installed, you can also download Toucan Library as shown below:
First, initialize your project (If you haven't already done so):
npm initAnswer the questions in your terminal and then install the package:
npm install toucan-libraryNow the library should be placed in your 'node_modules' folder
You can include it into your files in the same way as described in the previous section, just remember that the path should now point to the folder in your node modules.
Documentation
UI Elements
Sticky Navbar
Tropic and responsive navigation with nice effects. Add class 'navbar' to a nav tag, div tag or whatever you want to make into a toucan navbar, place a div tag with the class 'navbar-toggle' immediately after the 'navbar' opens and create an unordered list called 'navbar-list' with the list items inside as shown below:
<nav class="navbar">
<div class="navbar-toggle">🟧</div>
<ul class="navbar-list">
<li><a class="navbar-link active" href="#">Home</a></li>
<li><a class="navbar-link" href="#">Articles</a></li>
<li><a class="navbar-link" href="#">Products</a></li>
<li><a class="navbar-link" href="#">Gallery</a></li>
<li><a class="navbar-link" href="#">References</a></li>
<li><a class="navbar-link" href="#">About</a></li>
</ul>
</nav>Toucan Scrollbar
Tired of the boring default scrollbar in your browser? Add a colorful toucan scrollbar to your body tag or wherever you want it. Just use the class '.scrollbar' as shown below:
<body class="scollbar">
<!-- Your content -->
<script src="toucan-library/js/toucan-script.js"></script>
</body>Text Elements
Exotic headings and paragraphs. Just add one of the shown class values to your h or p tags:
<h1 class="heading1">Heading 1</h1>
<h2 class="heading2">Heading 2</h2>
<h3 class="heading3">Heading 3</h3>
<h4 class="heading4">Heading 4</h4>
<p class="paragraph">Paragraph</p>List Elements
Because default lists are just booooring.
<ul class="ul-list">
<li class="toucan-li">Fly little tiny tukka!</li>
<li class="toucan-li">Fly little tiny tukka!</li>
<li class="toucan-li">Fly little tiny tukka!</li>
<li class="toucan-li">Fly little tiny tukka!</li>
</ul>Easter Eggs
Flying Noisy Toucan
- Press CTRL + ALT + T and a noisy toucan will fly from the right to the left side of the screen. Please don't shoot it!
ASCII art in the console
- Press CTRL + Spacebar and an artsy logo will appear in the console for a while.
Show Date and Time
- Hold down the 0 key to show the current date and time.
Contributions
Toucan Library is an open source project developed under the MIT License, and you should be very welcome to contribute to the further development. Make a pull request with your contribution here on GitHub, and I will take a closer look. Don't be scared - it's all for fun and practice
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent