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.

Download Github

FEATURES

Responsive

Dynamic

Easy

How to use Timedulines

  1. Download timedulines.css & timedulines.css 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">
  4. Make sure you include Timedulines dependencies in your HTML file, which are:
  5. Create your custom timeline JS file (Ex: my-timeline.js)
  6. Customize your timeline by building the ColorPalette, timeHeader and timePoint objects. Here is an example:
    7. 										
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'
}
];
  7. Call timedulines from your customized JS file using the initTimedulines() function :
    8. 										
initTimedulines(colorPalette,timePoint,timeHeader);
  8. 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