Dropr

  1. Introduction
  2. Basic usage
  3. Animations
  4. Icons
  5. Alignments
  6. Breakpoints

AWSM Timeline - Documentation by AWSM Innovations v1.0

AWSM Timeline

HTML5/CSS3 Animated Timelines

'AWSM Timeline' is a pack of super cool and interactive timeline layouts for your website.

'AWSM Timeline' is a collection of different presets of responsive 'timeline' layouts. It is rather a basic framework which you can use to build your own style of timeline layouts by making some basic CSS changes. This documentation will help you to integrate the layout easily into your existing HTML files.

View Demo Get Support

Who should buy it?

Anyone with basic knowledge of HTML/CSS who wants to integrate cool looking timeline layouts quickly.

Example Applications

The potential of a timeline layout is endless. You can use it to spice up and call the attention of website visitors.

Display a timeline of a company

List of services a company offers

Layouts for blog posts

Schedule of an event

A 'how-to' guide

List of features your product offers (Something like this!)

What's Included

File Structure



            AwsmTimeline/
            │
            ├──01/
            │  │
            │  ├─01.html
            │  │
            │  ├──css/
            │  │   │
            │  │   ├──fonts/
            │  │   │   │
            │  │   │   ├──awsmIcomoon.eot
            │  │   │   ├──awsmIcomoon.svg
            │  │   │   ├──awsmIcomoon.ttf
            │  │   │   ├──awsmIcomoon.woff
            │  │   │   └──selection.json
            │  │   │
            │  │   ├──01.css
            │  │   ├──animate.css
            │  │   ├──awsmIcomoon.css
            │  │   ├──default.css
            │  │   └──reset.css
            │  │
            │  └──js/
            │      │
            │      ├──modernizr.js
            │      ├──awsm-timeline-main.min.js
            │      └──awsm-timeline-main.js
            │
            │  ...
            │  
            │
            └──15/
               │
               ├─15.html
               │
               ├──css/
               │   │
               │   ├──fonts/
               │   │   │
               │   │   ├──awsmIcomoon.eot
               │   │   ├──awsmIcomoon.svg
               │   │   ├──awsmIcomoon.ttf
               │   │   ├──awsmIcomoon.woff
               │   │   └──selection.json
               │   │
               │   ├──15.css
               │   ├──animate.css
               │   ├──awsmIcomoon.css
               │   ├──default.css
               │   └──reset.css
               │
               └──js/
                   │
                   ├──modernizr.js
                   ├──awsm-timeline-main.min.js
                   └──awsm-timeline-main.js

Gettings Started

After downloading and extracting files, you need to identify the files that are relevant to your project and add them to your project. We have some basic CSS files and js files used commonly in all the presets. these can be found in 'css' and 'js' directories respectively

  1. default.css: Handles all the basic styling [Required]
  2. reset.css: Does the basic reset. You probably won't need it if you are already using a reset. Try it yourself. [Optional]
  3. animate.css: CSS animations [Required for Animations]
  4. awsmIcomoon.css: For the icons. [Required only if you are using icons]
  5. modernizr.js: to check CSS animation support. [Required only for animations]
  6. awsm-timeline-main.js: For CSS animations. [Required only for animations]

All the files are currently linked from the demo layouts style-01 to style-15.

Usage

Once you have selected the style you want to use in your project, link the respective stylesheet to your project.

Including Stylesheets

We have different variations timeline(15 at present) which are organized in directories "01" to "15". Link the CSS file of which style you are using. For example, if you have decided go with style-01, link 01.css. (Optionally you can even copy-paste the style to your project's main CSS files)

             <link rel="stylesheet" type="text/css" href="01.css" />

Basic Markup

Below is the basic markup you will have to follow throughout the timeline layout. No matter which style you choose, this will remain as your basic markup for your timeline. The class names are self-descriptive.


    
    


        

            
        
 

        
 
            

                Timeline Date/Time here...
               Timeline content here.. 
            
         
        
 

    



    


        

            
        
 

        
 
            

                Timeline Date/Time here...
                 Timeline content here..

Managing Animation

Usage example

        <div class="awsm-timeline awsm-timeline-style-1">
            <div class="awsm-timeline-block awsm-odd-item" data-animation="slideInUp">
                ....
            </div><!-- awsm-timeline-block -->
        </div><!-- awsm-timeline -->

You can use any one form following list. Change the value of "data-animation" to any of the following.

  1. bounce
  2. flash
  3. pulse
  4. rubberBand
  5. shake
  6. swing
  7. tada
  8. wobble
  9. jello
  10. bounceIn
  11. bounceInDown
  12. bounceInLeft
  13. bounceInRight
  14. bounceInUp
  15. fadeIn
  16. fadeInDown
  17. fadeInDownBig
  18. fadeInLeft
  19. fadeInLeftBig
  20. fadeInRight
  21. fadeInRightBig
  22. fadeInUp
  23. fadeInUpBig
  24. flip
  25. flipInX
  26. flipInY
  27. lightSpeedIn
  28. rotateIn
  29. rotateInDownLeft
  30. rotateInDownRight
  31. rotateInUpLeft
  32. rotateInUpRight
  33. slideInUp
  34. slideInDown
  35. slideInLeft
  36. slideInRight
  37. zoomIn
  38. zoomInDown
  39. zoomInLeft
  40. zoomInRight
  41. zoomInUp

Managing Icons

AWSM Timeline comes with 1000+ icons packed by default. Click here to see all the available icons. After selecting the icon, just copy the class name next to it (Ex: icon-mail-envelope) and use it in the timeline

Usage example

            <i class="icon-envelope"  aria-hidden="true"></i>

Alignment Options

We have 3 different alignment options

Alternate

You can use "awsm-alternate" class name

    

    
      

          ------
      


      

          ------

When using the alternate layout you have to add 'awsm-odd-item' and 'awsm-even-item' class names to the content blocks alternatively.

Right align

You can use "awsm-right-align" class name

        <div class="awsm-timeline awsm-right-align awsm-timeline-style-1">
            ...........
            .....
            ........
        </div><!-- awsm-timeline -->

Left align (Default)

When you don't specify any alignment, it will be left-aligned

        <div class="awsm-timeline awsm-timeline-style-1">
            ...........
            .....
            ........
        </div><!-- awsm-timeline -->

Alignment options for smaller screens (Responsive options)

You can use "awsm-responsive-right" class name to right align the timeline in responsive screens

        <div class="awsm-timeline awsm-alternate awsm-responsive-right awsm-timeline-style-1">
            ...........
            .....
            ........
        </div><!-- awsm-timeline -->

Alignment of Date/Time

By default, the 'date/time' element will be on the same side as the content. You can use "awsm-date-opposite" class name to show it on the opposite side.

        <div class="awsm-timeline awsm-alternate awsm-date-opposite awsm-timeline-style-1">
            ...........
            .....
            ........
        </div><!-- awsm-timeline -->

Breakpoints

The breakpoints are something you add in between your timeline to group the stories. For example - years. You can group stories by years and add years as breakpoints. Below is a usage example.

        <div class="awsm-timeline-block awsm-timeline-label-block" data-animation="slideInUp">
            <div class="awsm-labels">
                <span>2016</span>
            </div><!-- .awsm-start-label -->
        </div><!-- awsm-timeline-block -->

Start and end breakpoints can be manged by classnames

        <div class="awsm-labels awsm-start-label">
            .....
        </div>
    
        <div class="awsm-labels awsm-end-label">
            .....
        </div>

Credits

This is an AWSM Project.