Documentation

Getting Started

Looking to add iZambezi.css to your webpages? Simply copy-paste the stylesheet <link> into your <head> before all other stylesheets to load our CSS.

<link rel="stylesheet" href="https://johnmugabe.github.io/izambezi/izambezi.min.css">

Usage

Adding iZambezi elements to your webpage implements the <i> tag.

<i class="izambezi muzinda-hub"></i>

.izambezi [logo-name]

The class name .izambezi is the default caller for the library. Class name .muzinda is called to display the MuzindaHub logo.

Sizes

iZambezi elements have three size variations i.e large, small and the default size. Element sizing is achieved by adding a -lg or -sm suffix to the izambezi class.

<i class="izambezi-lg muzinda-hub"></i>

Animations

To animate an element, add the class .animated to an element. You can include the class .infinite for an infinite loop. Finally you need to add one of the following classes to the element::

• .bounce
• .flash
• .pulse
• .heartBeat
• .bounceIn
• .fadeIn
• .zoomIn

<i class="izambezi muzinda-hub animated infinite pulse"></i>

Delays

It's possible to add delays directly on the element's class attribute. Delays set the waiting-time (seconds) before animation begins. The delay class .wait-?s where ? is any number between 2 and 5 defines the delay time before animation begins.

• .wait-2s
• .wait-3s
• .wait-4s
• .wait-5s

<i class="izambezi muzinda-hub animated pulse wait-4s"></i>

Speed

Animation speed can be controlled using speed specific classes. The below classes control the speed at which animations can run.

• .slow
• .slower
• .fast
• .faster

<i class="izambezi muzinda-hub animated pulse faster wait-4s"></i>

.faster