Skip to content

Latest commit

 

History

History
146 lines (101 loc) · 5.12 KB

README.md

File metadata and controls

146 lines (101 loc) · 5.12 KB
Raw

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:

  1. Download the files as well as include stylesheet and script to your code.
  2. 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 init

Answer the questions in your terminal and then install the package:

npm install toucan-library

Now 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 🐵