From our sponsor: Chromatic - Visual testing for Storybook, Playwright & Cypress. Catch UI bugs before your users do.
This is a simple responsive timeline with alternating colors for the labels. An icon font is used for the icons in the timeline waypoints and some example media queries show how to adjust the timeline for smaller screens. The main structure of the timeline is an unordered list.
The HTML
<ul class="cbp_tmtimeline"> <li> <time class="cbp_tmtime" datetime="2013-04-10 18:30"><span>4/10/13</span> <span>18:30</span></time> <div class="cbp_tmicon cbp_tmicon-phone"></div> <div class="cbp_tmlabel"> <h2>Ricebean black-eyed pea</h2> <p>Winter purslane...</p> </div> </li> <li> <time class="cbp_tmtime" datetime="2013-04-11T12:04"><span>4/11/13</span> <span>12:04</span></time> <div class="cbp_tmicon cbp_tmicon-screen"></div> <div class="cbp_tmlabel"> <h2>Greens radish arugula</h2> <p>Caulie dandelion maize...</p> </div> </li> <li> <time class="cbp_tmtime" datetime="2013-04-13 05:36"><span>4/13/13</span> <span>05:36</span></time> <div class="cbp_tmicon cbp_tmicon-mail"></div> <div class="cbp_tmlabel"> <h2>Sprout garlic kohlrabi</h2> <p>Parsnip lotus root...</p> </div> </li> <li> <time class="cbp_tmtime" datetime="2013-04-15 13:15"><span>4/15/13</span> <span>13:15</span></time> <div class="cbp_tmicon cbp_tmicon-phone"></div> <div class="cbp_tmlabel"> <h2>Watercress ricebean</h2> <p>Peanut gourd nori...</p> </div> </li> <li> <time class="cbp_tmtime" datetime="2013-04-16 21:30"><span>4/16/13</span> <span>21:30</span></time> <div class="cbp_tmicon cbp_tmicon-earth"></div> <div class="cbp_tmlabel"> <h2>Courgette daikon</h2> <p>Parsley amaranth tigernut...</p> </div> </li> </ul>
Tiny break: 📬 Want to stay up to date with frontend and trends in web design? Subscribe and get our Collective newsletter twice a tweek.
The CSS
@font-face { font-family: 'ecoico'; src:url('../fonts/timelineicons/ecoico.eot'); src:url('../fonts/timelineicons/ecoico.eot?#iefix') format('embedded-opentype'), url('../fonts/timelineicons/ecoico.woff') format('woff'), url('../fonts/timelineicons/ecoico.ttf') format('truetype'), url('../fonts/timelineicons/ecoico.svg#ecoico') format('svg'); font-weight: normal; font-style: normal; } /* Made with http://icomoon.io/ */ .cbp_tmtimeline { margin: 30px 0 0 0; padding: 0; list-style: none; position: relative; } /* The line */ .cbp_tmtimeline:before { content: ''; position: absolute; top: 0; bottom: 0; width: 10px; background: #afdcf8; left: 20%; margin-left: -10px; } .cbp_tmtimeline > li { position: relative; } /* The date/time */ .cbp_tmtimeline > li .cbp_tmtime { display: block; width: 25%; padding-right: 100px; position: absolute; } .cbp_tmtimeline > li .cbp_tmtime span { display: block; text-align: right; } .cbp_tmtimeline > li .cbp_tmtime span:first-child { font-size: 0.9em; color: #bdd0db; } .cbp_tmtimeline > li .cbp_tmtime span:last-child { font-size: 2.9em; color: #3594cb; } .cbp_tmtimeline > li:nth-child(odd) .cbp_tmtime span:last-child { color: #6cbfee; } /* Right content */ .cbp_tmtimeline > li .cbp_tmlabel { margin: 0 0 15px 25%; background: #3594cb; color: #fff; padding: 2em; font-size: 1.2em; font-weight: 300; line-height: 1.4; position: relative; border-radius: 5px; } .cbp_tmtimeline > li:nth-child(odd) .cbp_tmlabel { background: #6cbfee; } .cbp_tmtimeline > li .cbp_tmlabel h2 { margin-top: 0px; padding: 0 0 10px 0; border-bottom: 1px solid rgba(255,255,255,0.4); } /* The triangle */ .cbp_tmtimeline > li .cbp_tmlabel:after { right: 100%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; border-right-color: #3594cb; border-width: 10px; top: 10px; } .cbp_tmtimeline > li:nth-child(odd) .cbp_tmlabel:after { border-right-color: #6cbfee; } /* The icons */ .cbp_tmtimeline > li .cbp_tmicon { width: 40px; height: 40px; font-family: 'ecoico'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; font-size: 1.4em; line-height: 40px; -webkit-font-smoothing: antialiased; position: absolute; color: #fff; background: #46a4da; border-radius: 50%; box-shadow: 0 0 0 8px #afdcf8; text-align: center; left: 20%; top: 0; margin: 0 0 0 -25px; } .cbp_tmicon-phone:before { content: "e000"; } .cbp_tmicon-screen:before { content: "e001"; } .cbp_tmicon-mail:before { content: "e002"; } .cbp_tmicon-earth:before { content: "e003"; } /* Example Media Queries */ @media screen and (max-width: 65.375em) { .cbp_tmtimeline > li .cbp_tmtime span:last-child { font-size: 1.5em; } } @media screen and (max-width: 47.2em) { .cbp_tmtimeline:before { display: none; } .cbp_tmtimeline > li .cbp_tmtime { width: 100%; position: relative; padding: 0 0 20px 0; } .cbp_tmtimeline > li .cbp_tmtime span { text-align: left; } .cbp_tmtimeline > li .cbp_tmlabel { margin: 0 0 30px 0; padding: 1em; font-weight: 400; font-size: 95%; } .cbp_tmtimeline > li .cbp_tmlabel:after { right: auto; left: 20px; border-right-color: transparent; border-bottom-color: #3594cb; top: -20px; } .cbp_tmtimeline > li:nth-child(odd) .cbp_tmlabel:after { border-right-color: transparent; border-bottom-color: #6cbfee; } .cbp_tmtimeline > li .cbp_tmicon { position: relative; float: right; left: auto; margin: -55px 5px 0 0px; } }
It would be more semantic to use time elements for the spans http://www.brucelawson.co.uk/2012/best-of-time/
Ah yes, of course ๐ Updated!
Thanks for the feedback, cheers, ML
Great., Mary Lou. I am working at a workshop timeline for teaching children and so I will use it for the website.
Seeing that this is a timeline, semantically speaking, shouldn’t the list be an ordered list?
Great tutorial as always. Codrops Rules!!!!!!!!!!!!!!!
Really nice work! If you want to take a bit further, it might be nice to add an animated pointer of sorts that follows the scrolling page down the timeline, locking into place at each entry. ๐
That too much for a Blueprint :).
I love everything you share with us,
๐
Thank you ))
That is a niiice timeline!
It would be more semantic to use :before pseudo elements instead of the empty divs for the icons
.cbp_tmtimeline > li .cbp_tmlabel:before {
// copy the rules from .cbp_tmicon
// adjust top/left positioning accordingly
}
In this case I prefer to have an empty division for the icons because it gives me more control over the element. Using the pseudo-element would make it relative to the .cbp_tmlabel which I don’t really want in this layout. Cheers, ML
Brilliant! But in the demo I’m not seeing the icons for each date, just the first one. I am however seeing each on the mobile width.
Same here! I’d love to be able to see all the icons ๐ Otherwise it’s awesome!
Great job!
Same here, that would be really great to have different icon for different entry.
Add position: relative to the LI element or the icons cover one another. Beautiful demo though.
Added! It was working in the first version because of some default styles but now it’s really needed. Thanks a lot for your feedback, cheers, ML
Mary Lou, I swear to god you can read my mind. For the last 3 weeks I have been trying to make a vertical timeline that is responsive and about a week ago I finally designed one. Than I jumped on here and you made one that puts mine to shame.
I end up usually using at least one of your tutorials on all of my clients. Thank you so much for your hard-work and your amazing talent.
Nice work!
I adopted this for my personal blog (http://www.rbraga.com) with few customizations; but I’m the worst web designer in the world ๐ and if someone have a tip/suggestion for improve my customizations I thank ๐
* sorry my english
Nice work, Mary Lou. That’s brilliant!
This is brilliant, i could use some techniques here to style quotes and code.
Wonderful development! You can add scrolling esch JQuery.
Thanks for this work. Is really awesome. I will use this script in a UI.
Hey Mary Lou,
Amazing concept. Can’t wait to use it on our website for our Jekyll-powered blog. The color theme in Orange seems impossible to figure out though. Any advice on how to go about an Orange color palette? Cheers!
This is fantastic – such a useful resource, thanks for publishing!
Just a quick note on the demo for desktop, the line:
cbp_tmtimeline > li {
position: relative;
}
seems to be missing..
Really amazing work! Best blog on the web!
Buenas
Solucione el problema del CSS con:
.cbp_tmtimeline > li .cbp_tmicon {
position: relative;
…
y
.cbp_tmtimeline > li .cbp_tmlabel {
margin: -41px 0 15px 25%;
…
espero sea de ayuda ๐
Thanks, Tonifont!
hello,
nice work, however like amny said tou need to change to : cbp_tmtimeline > li {
position: relative;
}
also can you make a litle color picker with this like with red, green, blue etc
Once again bravo!
y gracias a todas las aportaciones en los comments! thanks to comments!
In a few minutes I manage to promote my new app http://faceasit.com/pub
Best Mari Lou ever!
Dear Mary Lou, Snipicons are using the “Vertical Timeline”. Preview http://t.co/W7rd6wSkiG
Thank you for the great post.
is possible to use small images instead of that icons, that i dont know where to find them or make other that i need can we use a image instead with the width of this one’s is comments here for eg?
Nice timeline but i have to point that the in the demo don’t have the position relative applied.
Thanks! This is what I was looking for and you saved me a lot of time. Trying to make this by myself would have taken a lot longer
OMG!
work in wordpress post style?
its doesn’t work well. The icon in every timeline item is accumulate at one point.
how can i use the icons? please help me
Is it possible to make this with a seekbar?
(I mean if I try to tap/drag & move the round shaped phone icon on the line, then it would scroll the timeline up/down.)
Awesome.
/* The icons */
.cbp_tmtimeline > li .cbp_tmicon {
width: 40px;
height: 40px;
font-family: ‘ecoico’;
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
font-size: 1.4em;
line-height: 40px;
-webkit-font-smoothing: antialiased;
position: absolute;
color: #fff;
background: #46a4da;
border-radius: 50%;
box-shadow: 0 0 0 8px #afdcf8;
text-align: center;
left: 20%;
top: 0;
margin: 0 0 0 -25px;
}
change the position to “relative” instead of absolute.
.cbp_tmtimeline > li{
position: relative;
}
this piece of code seemed to be missing from the demo css. If you add this the icons will align with the text boxes.
Would love to see a horizontal version of this.
muchas gracias, Mary! Check out this blog of mine –>http://www.effervescence.co.vu/ ^^ many thanks to you!
Pretty useful, Saved my lot of time, Thank you so much…
Remember. If you have some problem with the icon, try to REMOVE the {TOP:0;} on the .cbp_tmtimeline > li .cbp_tmicon. This fixed the problem with the bullet repetition.