Timedulines

by MedUnes

A JS/CSS bootstrap-based module that can be very easily integrated in a web page to show custom timelines in an elegant way.

FEATURES

Responsive

Dynamic

Easy

How to use Timedulines

  1. Download timedulines.css & timedulines.js from the link above
  2. Copy them to your working path (Ex: /css/timedulines.css & /js/timedulines.js)
  3. Include timedulines files in your HTML file as follows:
  4. 										
    <script src="js/timedulines.js"></script>
    <link rel="stylesheet" type="text/css" href="css/timedulines.css">
    										
    									
  5. Make sure you include Timedulines dependencies in your HTML file, which are:
  6. Create your custom timeline JS file (Ex: my-timeline.js)
  7. Customize your timeline by building the ColorPalette, timeHeader and timePoint objects. Here is an example:
  8. 										
    var colorPalette=['#FEC900','#595779','#9BAD01','#FF6D00','#C0116E','#4A6AB5','#B51A1E'];
    var timeHeader={header:"MY CAREER",subHeader:"Step by step"};
    var timePoint=
    [
    {
    date:'2013',
    title:'Title 1',
    content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua'
    },
    {
    date:'2014',
    title:'Title 2',
    content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua'
    },
    {
    date:'2015',
    title:'Title 3',
    content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua'
    },
    {
    date:'2016',
    title:'Title 4',
    content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua'
    }
    ];
    										
    									
  9. Call timedulines from your customized JS file using the initTimedulines() function :
  10. 										
    initTimedulines(colorPalette,timePoint,timeHeader);
    										
    									
  11. The code above results in the following timeline:

TODO..

This version of Timedulines is one of my very first finished works. So I'm sure it lacks many imporovements and can include much more features. Some of them are:

  • Theme builder/customizer: Fonts, Colors, sizes, etc.
  • Wordpress plugin

I would also be very thankful if you contribute to the Timedulines Project on Github.

Credits

Timedulines has been inspired by this mockup from