INTRODUCTION

Styleflow is a library that holds interactive animation that can be readily accessed by developers. This is an animation library completely built with sass, and currently contains only basic animation.

TUTORIAL

Animate a string to move-up:

Add the class "move-up" to the h1 tag to animate the logo-card

Input	Output
<!-- enter class below --> <h1 > Logo-card, please move-up <∕h1> <!-- enter class above --> RUN

Animate a string to move-down:

Add the class "move-down" to the h1 tag to animate the logo-card

Input	Output
<!-- enter class below --> <h1 > Logo-card, please move-down <∕h1> <!-- enter class above --> RUN

Animate a string to move-left:

Add the class "move-left" to the h1 tag to animate the logo-card

Input	Output
<!-- enter class below --> <h1 > Logo-card, please move-left <∕h1> <!-- enter class above --> RUN

Animate a string to move-right:

Add the class "move-right" to the h1 tag to animate the logo-card

Input	Output
<!-- enter class below --> <h1 > Logo-card, please move-right <∕h1> <!-- enter class above --> RUN

Animate a string to fade-in:

Add the class "fade-in" to the h1 tag to animate the logo-card

Input	Output
<!-- enter class below --> <h1 > Logo-card, please fade-in <∕h1> <!-- enter class above --> RUN

Animate a string to fade-out:

Add the class "fade-out" to the h1 tag to animate the logo-card

Input	Output
<!-- enter class below --> <h1 > Logo-card, please fade-out <∕h1> <!-- enter class above --> RUN

Animate a string to bounce:

Add the class "bounce" to the h1 tag to animate the logo-card

Input	Output
<!-- enter class below --> <h1 > Logo-card, please bounce <∕h1> <!-- enter class above --> RUN

HOW-TO GUIDE

How to download styleflow library:

The library files will be downloadable to our users for fast and easy use. To do that first, the user must sign up to our website or sign in if they are already registered. Then they can download the library zip files from the library page.

How to use basic animations on html elements:

After downloading the library on their local machine, the next step is how to use it; To implement our library on your project, you will have to add the library to the same folder’s directory. Then add the name of the library file “styleflow.css” to the link tag of your html head. After this, you can include the different styles to the class of tags you wish to animate.

How to add intensity to your animation:

Also we were able to add intensity in case our users are not satisfied with animation. You can adjust the animation to suit your satisfaction.

TECHNICAL REFERENCE

Installation:

styleflow is downloaded from www.styleflow.css as a .scss file. The library is compatible with visual code, sublime text editor and espresso.

File location:

styleflow is downloaded into the download folder of a user's local machine.

File content:

styleflow contains basic, ready-to-use animation for styling web elements. They include;

1. class-name: move-up

   styles an html object to move up

2. class-name: move-down

   styles an html object to move down

3. class-name: move-right

   styles an html object to move right

4. class-name: move-left

   styles an html object to move left

5. class-name: fade-in

   styles an html object to fade in

6. class-name: fade-out

   styles an html object to fade out

Privacy:

1. styleflow allows users to manage personal info.
2. styleflow does not sell user information.
3. styleflow is built with strong security features that continuously protect your information.

BACKGROUND

Styling and frameworks:

Largely, frameworks have been adopted as a styling solution for developers due to several reasons such as reusability and speed.

However, they have come under high criticism from most pedantic developers for their simplicity and base nature. They have been considered as reason for generic codes, self-damaging to newbies and less rewarding websites.

The debate seems to stage speed against generic websites and could well be an exciting one to indulge in. But here are a few things we have noted;

1. Frameworks are useful for developers who don't need to reinvent the wheel.
2. Frameworks work well for learners who learn by questioning processes as they would eventually question certain rule abstractions.
3. Frameworks actually help with speed and this may be at the expense of customization.
4. Frameworks could come very handy for building mini-projects that do not involve a design team.
5. Frameworks largely discourage research as a lot of design-solutions could be available in certain libraries for retrieval.

Thus, the dabble into frameworks or the resistance to frameworks largely rest on the intentions of the developer and rightly do. Therefore, styleflow users are encouraged to be certain about their need for an animation library before indulging.

Recommended text-editors:

1. Sublime text editor
2. Visual Studio Code editor
3. Espresso editor