Simplistic,

Working for a few clients on websites or during personal project I have noticed timelines are always something that make their ways into projects.

The problem is that very often using available components for timelines need a lot of customization and setting up. Furthermore a lot of free online timelines tend to have a complex design with what could be classified as “To much Data”.

The current trend for websites, apps and user interfaces are all coming back to simplistic, materialistic designs; thus came into my mind to create a really simple Material Timeline with a slick responsive design that allows easy implementation.

Preview:

View on GitHub


Design

If you check the materialTimeline.css the first element root has the color variables defined to be easily reused. and customized. I didn’t use SASS as I wanted to make this really easy to customize.


--bg-color: #f8b195;
--text-color:#355c7d;/* Dark Blue #355c7d */
--timeline-color:#f67280;
--date-bg-color:#f67280;
--date-text-color:var(--text-color);
--line-color:var(--text-color);
--header-color:var(--text-color);

Here you can really modify the look and feel of the timeline.


Usage

the dates simply come from a javascript array:


var myDates = [
{"date": "1994","content":"Release of Pulp Fiction and the release of Leon the professional"},
{"date": "2018","content":"Current year and the big stets to our life on Mars!"}
];

Then simply include this div where you want to generate the timeline:


<div id="timeline"></div>

You then simply need to call the function


renderTimeline(myDates);

Don’t forget to then include the css and js


<link rel="stylesheet" type="text/css" href="css/materialTimeline.css">
<script src="js/jquery.js"></script>
<script src="js/materialTimeline.js"></script>
<script src="js/fadeinTimeline.js"></script>

A full example:


<link rel="stylesheet" type="text/css" href="css/materialTimeline.css">
<script src="js/jquery.js"></script>
<script src="js/materialTimeline.js"></script>
<script type="text/javascript">
var myDates = [
    {"date": "1959","content":"Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam."},
    {"date": "1991","content":"Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam."},
    {"date": "1994","content":"Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam."},
    {"date": "2000","content":"Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam."},
    {"date": "2004","content":"Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam."},
    {"date": "2018","content":"Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam."}
];
renderTimeline(myDates);
</script>
<script src="js/fadeinTimeline.js"></script>

Mederic Burlet