Menu

Vertical responsive timeline

Hi, in this experiment we'll create flat-designed responsive vertical timeline based on html5 and css3.

timeline article layout

Layout. Timeline concept.

At first there was drawed a little bit weird concept-art of "article with date-label". Just a sketch but I thought it can be interesting as UI element.
This thing will inspired me to create vertical timeline based on similar layout. And here we are!

Timelines can be used in UI for a dozen different reasons. Infographics and historical projects will often use timelines to express important dates or events. Additionally timelines can refer to the interface element found recently in web and mobile applications.

Design Tickle

First of all, let's check a little demo

Here you can see how real content can be represented in timeline, for example evolution of web design and web technologies. Feel free to change color scheme of timeline, using this flat-ui palette

Midnight Blue Belize Hole Turquoise Nephritis Sun Flower Orange Alizarin Wisteria

Present trends

Responsive Web Design (RWD), Flat design, parallax scrolling

2012-nowadays

Responsive web design (RWD)

responsive web design

Ethan Marcotte coined the term responsive web design (RWD) in a May 2010 article in A List Apart.He described the theory and practice of responsive web design in his brief 2011 book titled Responsive Web Design.

Responsive design was listed as #2 in Top Web Design Trends for 2012 by .net magazine after progressive enhancement at #1.

Responsive web templates are designed to look great on a variety of different screen sizes, so anyone can view your site in a crisp and clear manner where ever they go.

responsive web design

A site designed with RWDadapts the layout to the viewing environment by using fluid, proportion-based grids, flexible images, and CSS3 media queries, an extension of the @media rule.

2011-nowadays

Parallax scrolling

The Parallax web design trend has grown in popularity because it creates an illusion of depth (or a faux-3D effect) as you scroll through the webpage. Various images on the site will move at different speeds or change in size or at dimension to the site.

parallax scheme

Additionally, proponents use parallax backgrounds as a tool to better engage users and improve the overall experience that a website provides.

2010-nowadays

Flat UI Design

Flat design refers to a style of interface design which removes any stylistic choices that give the illusion of three-dimensions (such as drop shadows, gradients, or textures) and is focused on a minimalist use of simple elements, typography and flat colors.

flat ui design example

A website with flat design lacks gradients, skeuomorphism, but incorporates solid colors, white space, and crisp typography.

Late 2000's

Rise of HTML5, opensource, mobile web

April 2010

Rise of HTML5

html5 logo

HTML5 became the topic of mainstream media around April 2010 after Apple Inc's then-CEO Steve Jobs issued a public letter titled "Thoughts on Flash" where he concludes that "[Adobe] Flash is no longer necessary to watch video or consume any kind of web content" and that "new open standards created in the mobile era, such as HTML5, will win".

In early November 2011, Adobe announced that it will discontinue development of Flash for mobile devices and reorient its efforts in developing tools utilizing HTML5.

2008 - 2010

The mobile web

world in your hand with mobile web

The mobile web refers to access to the world wide web, i.e. the use of browser-based Internet services, from a handheld mobile device, such as a smartphone or a feature phone, connected to a mobile network or other wireless network.

Many businesses looked towards creating a condensed 'mobile' version of their site. Mobile sites contain essentials of the regular website, delivering viewers flagship content and noble features formatted for display on their device.

be more social with mobile web

Mobile sites contain essentials of the regular website, delivering viewers flagship content and noble features formatted for display on their device.

The Mobile Web has also been called Web 3.0, drawing parallels to the changes users were experiencing as Web 2.0 websites proliferated.

April 2008

Rise of the open-source

The pivotal moment, however, was the creation of git, which has since become the most popular DVCS.

opensource logo

The increasing popularity of open source DVCSs such as git, and then, later, DVCS hosting sites, the most popular of which is GitHub (founded 2008), incrementally reduced the barriers to participation in free software projects still further.

github octocat

With sites like GitHub, no longer did potential contributors have to do things like hunt for the URL for the source code repository (which could be in different places on each website, or sometimes tucked away in a README file or developer documentation), or work out how to generate a patch, and if necessary subscribe to the right mailing list so that their patch email would get to the right people.

...and I think that's enough for demo.

But if you are interested in the full version of "Evolution of web design timeline" - you can check this page or this one

Well, now let's see the basic markup:


<section class="timeline">
	<div class="timeline_milestone"></div>	
	<article class="timeline_post">
		<h1 class="tl-post_date"></h1>		
		<div class="tl-post_card">
			<header class="tl-post_header"></header>
			<div class="tl-post_content">
				<div class="content_wrap"></div>
			</div>
			<div class="tl-post_footer"></div>
		</div>
	</article>
</section>	
					
Basic timeline markup

This code block - simplified concept of timeline and next code block contain markup with inner helper-elements
There is main timeline section that may contain milestones or articles. Article contain post-date and post-card.
Post card - block with general post content, it contain:

Ok, here is the result of this markup:

Looks kind of boring, let's add some inner helper-elements


<section class="timeline">
	<div class="timeline_milestone">						
		<h2 class="milestone_title"></h2><!--Milestone title-->
		<p class="milestone_meta"></p><!--Milestone meta information or annotation-->
	</div>
	<article class="timeline_post">
		<h1 class="tl-post_date"></h1><!--Date, that will be shown in colored label-->
		<div class="tl-post_card">
			<header class="tl-post_header">
				<h2 class="tl-post_title"></h2><!--Post title-->
				<p class="tl-post_meta"></p><!--Post meta or resume-->
			</header>
			<div class="tl-post_content">
				<div class="content_wrap">
					<img class="tl-post_image" src="" alt=""><!--post image-->						
					<p class="tl-post_text">Post text</p><!--Post paragraph-->
				</div>
			</div>
			<div class="tl-post_footer">
				<p class="tl-post_tags">Tags:
					<span>Some tag</span>
					<span>Another tag</span>
				</p><!--Post related tags-->
				<a class="tl-post_readmore" href="" title="">Read more...</a><!--Link to related full article or original source-->	
			</div>
		</div>
	</article>
</section>	
					
Full timeline markup

All right! Now it looks pretty good

Lorem ipsum

Milestone meta information or annotation

Some date

Some post title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pretium ac turpis in lobortis. Ut ligula ante, mattis vel augue eget, tincidunt vehicula nisi.

image example

Curabitur pretium commodo faucibus. Aliquam eget dictum odio. Morbi a pellentesque nibh. Suspendisse consequat augue laoreet lacus aliquet, sed vestibulum augue semper.

image example

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pretium ac turpis in lobortis. Ut ligula ante, mattis vel augue eget, tincidunt vehicula nisi.

I think, it's all clear with inner elements, but there is one moment with images. There are two extra classes for floated images. Also you can add .js-lazy class for image lazy loading. More datailed about this hint in javascript section


	<img class="tl-post_image" src="" alt=""><!--full size centered image-->
	<img class="tl-post_image left" src="" alt=""><!-- 40% left floated image-->
	<img class="tl-post_image right" src="" alt=""><!--40% right floated image-->
					
Images markup

Now it's time for styles!

I must say, that there will be shown full basic styles and secondary styles - only rules without declarations, but with comments. That because styles of all decorative arrows and lables, that created as pseudo elements are huge.

Please note:

If you want to use css, you should optimize this code, because this one is automatically generated from lesscss. I recomend you to use some preprocessor, that allows you to use variables for color schemes and sizes.


/* ==============================
   $Timeline general styles
   ==============================*/
.timeline {
  position: relative;
  max-width: 1200px;/* timeline width, feel free to set desired width in px or percents */
  margin: 0 auto;
  padding: 0 10px;
  overflow: hidden;
  text-align: center;
  clear: both;
}		
	.timeline:before {}	/*dotted line across all timeline from top to bottom*/
	.timeline_milestone {
	  position: relative;
	  width: 70%;
	  min-height: 100px;
	  margin: 0 auto 100px;
	  padding: 10px;
	  background-color: #7f8c8d;
	}			
		.timeline_milestone:after {} /*bottom arrow of milestone block*/			
		.milestone_title {} /*some properties of milestone title*/			
		.milestone_meta {} /*some properties of milestone annotation*/		
		
	.timeline_post { /*timeline row, that contain date label and post*/
	  display: block;
	  position: relative;
	  width: 100%;
	  margin: 40px 0;
	  clear: both;
	}		
		.timeline_post:before,
		.timeline_post:after {} /*clearfix to prevent collapsing parents of floated elements*/		 			
		.timeline_post:before {} /*center positioned bullet in each row*/		
		
		.tl-post_date { /*label-arrow with date*/
		  position: relative;
		  width: 35%;
		  min-height: 100px;
		  margin-top: 25px;
		  padding: 15px 0;
		  background-color: #e74c3c;
		  font-size: 50px;
		  color: #ecf0f1;
		}				
		.tl-post_card { /*card with main content*/
		  position: relative;
		  width: 42%;
		  min-height: 200px;
		  border-top: 10px solid #7f8c8d;
		  border-bottom: 10px solid #7f8c8d;
		  background-color: #ffffff;
		  text-align: left;
		}
			.tl-post_header { /*header with title and annotation*/
			  position: relative;
			  min-height: 125px;
			  padding-bottom: 10px;
			  border-bottom: 1px dashed #7f8c8d;
			  background-color: #ffffff;
			}			
				.tl-post_title {} /*some  properties of post title*/				
				.tl-post_meta {} /*some properties of post annotation*/	
				
			.tl-post_content {
			  position: relative;
			  background-color: #ffffff;
			  text-align: center;
			}
				.tl-post_content:after {	} /*clearfix to prevent collapsing content block*/
				.content_wrap {
				  min-height: 100px;
				  max-height: 300px;
				  padding: 0 10px;
				  overflow-y: auto;
				}
					.tl-post_text {} /*some properties of post paragraph*/
					
					.tl-post_image { /*ordinary full-width image*/
					  display: inline-block;
					  max-width: 90%;
					}
					.tl-post_image.left { /*floated left image*/
					  float: left;
					  max-width: 40%;
					  margin-right: 10px;
					}
					.tl-post_image.right { /*floated right image*/
					  float: right;
					  max-width: 40%;
					  margin-left: 10px;
					}
			.tl-post_footer { /*footer with tags and readmore-link*/
			  position: relative;
			  min-height: 50px;
			  padding-bottom: 10px;
			  background-color: #ffffff;
			  font-family: "Roboto", sans-serif;
			}
				.tl-post_tags {} /*some properties of post tags*/
					.tl-post_tags span {}
						.tl-post_tags span:not(:last-of-type):after { /*commas between tags*/
						  content: ",";
						}
				.tl-post_readmore {} /*readmore link properties*/			
Timeline basic styles

But this is not the end.. The real timeline "magic" begins with pseudo-classes and pseudo-elements that in odd (2n-1) articles make posts float left and labels float right and in even (2n) - backward, posts float right, labels float left. And of course these pseudo-elements allow us to create all those awesome arrows and corners.
This stylesheet contain a bunch of code, so I've hidden them under spoiler and let me show you these cute kittens ;)

Ok, show me all those styles!

Pseudo-elements hell... In lesscss it looks much better


/* ==============================
   $Timeline (2n-1) styles
   ==============================*/
.timeline_post:nth-of-type(2n-1):hover .tl-post_date {}/*animation options for odd post's labels on hover*/
.timeline_post:nth-of-type(2n-1) .tl-post_date { /*right floated label in odd posts*/
  float: right;
  margin-right: 15%;
}
	.timeline_post:nth-of-type(2n-1) .tl-post_date:before {} /*arrow-triangle corner for label*/
.timeline_post:nth-of-type(2n-1) .tl-post_card { /*left floated post content in odd posts*/
  float: left;
  margin-right: 5%;
  border-left: 10px solid #7f8c8d;
}
	.timeline_post:nth-of-type(2n-1) .tl-post_card:before {} /*header dark angle-border*/
	.timeline_post:nth-of-type(2n-1) .tl-post_card:after {} /*header dark angle-border*/
	
	.timeline_post:nth-of-type(2n-1) .tl-post_header {} /*header positioning options*/
		.timeline_post:nth-of-type(2n-1) .tl-post_header:before {} /*header light angle-border*/
		.timeline_post:nth-of-type(2n-1) .tl-post_header:after {} /*header light angle-border*/
		
	.timeline_post:nth-of-type(2n-1) .tl-post_content {} /*content positioning options*/
		.timeline_post:nth-of-type(2n-1) .tl-post_content:before {} /*content border*/

	.timeline_post:nth-of-type(2n-1) .tl-post_footer {} /*footer positioning options*/
		.timeline_post:nth-of-type(2n-1) .tl-post_footer:before {} /*footer border*/

/* ==============================
   $Timeline (2n) styles
   ==============================*/
.timeline_post:nth-of-type(2n):hover .tl-post_date {} /*animation options for even post's labels on hover*/
.timeline_post:nth-of-type(2n) .tl-post_date { /*left floated label in even posts*/
  float: left;
  margin-left: 15%;
}
	.timeline_post:nth-of-type(2n) .tl-post_date:before {} /*arrow-triangle corner for label*/
.timeline_post:nth-of-type(2n) .tl-post_card { /*right floated post content in even posts*/
  float: right;
  margin-left: 5%;
  border-right: 10px solid #7f8c8d;
}
	.timeline_post:nth-of-type(2n) .tl-post_card:before {} /*header dark angle-border*/
	.timeline_post:nth-of-type(2n) .tl-post_card:after {} /*header dark angle-border*/
	
	.timeline_post:nth-of-type(2n) .tl-post_header {} /*header positioning options*/
		.timeline_post:nth-of-type(2n) .tl-post_header:before {} /*header light angle-border*/
		.timeline_post:nth-of-type(2n) .tl-post_header:after {} /*header light angle-border*/
		
	.timeline_post:nth-of-type(2n) .tl-post_content {} /*content positioning options*/
		.timeline_post:nth-of-type(2n) .tl-post_content:before {} /*content border*/
		
	.timeline_post:nth-of-type(2n) .tl-post_footer {} /*footer positioning options*/
		.timeline_post:nth-of-type(2n) .tl-post_footer:before {} /*footer border*/							
								
Timeline pseudo-elements styles

See the source codes for detailed styles of decorative borders

A bunch of kittens much better than code
A bunch of cute kittens

Right, now let's make it a little bit responsive

At first I thought to write code, but there are no special tricks, so I decided to show you final results and say a few words about "over-specified" selectors. More details about responsive layout and it's code you'll find in sources on github.

Layout for @media (max-width:800px)

responsive 800px view

Layout for @media (max-width:640px)

responsive 800px view

Now a few words about "over-specified" selectors... In this timeline for different direction of elements for odd and even articles were used pseudo-elements. This choice makes selectors "over-specified" and for making responsive layouts each time was needed to use some reset styles, for example: margins, floats, borders etc. This is the pay for using "over-specified" selectors with responsive layout.

At last some javascript code:

Honestly, this timeline except lazy-load builded on pure css. But in real life timeline must have lazy-load of content, in this case lazy-load of pictures.
I used this one jquery lazy-load plugin. Note that you should use noscript fallback. Here is the markup:

					
<img class="tl-post_image js-lazy" data-src="octocat.jpg" src="placeholder.jpg" alt="github octocat">
<noscript><img class="tl-post_image" src="octocat.jpg" alt="github octocat"></noscript>
						
Image lazy load plugin

And jQuery plugin settings:


$("img.js-lazy").lazyload({ effect : "fadeIn", threshold : 200 });							
						
Lazy load usage

One more thing..

I suggest you to use this plugin for smooth anchor scrolling and improve timeline navigation

					
<a class="nav_link js-scroll" href="#milestone">Some milestone</a>
						
Smooth anchor scroll markup

$(function() {
  $('a.js-scroll').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      if (target.length) {
        $('html,body').animate({
          scrollTop: target.offset().top
        }, 1000);
        return false;
      }
    }
  });
});												
						
Smooth anchor scroll plugin

All done!

Compatible browsers: IE9+, Firefox, Chrome, Opera, Safari, Yandex.browser
You can download source code here or fork me on github

I hope you enjoyed this little experiment and it will help you to create some awesome things or inspire further experiments.

Thank you for watching!