Timeline шаблонизатор на основе CSS

Timeline шаблонизатор на основе CSS
С открытием в Facebook timeline многие стали делать нечто подобное, изрядно полазив на эту тему нактнулся на пост в habrahabr где был пример основанный jQuery и CSS а именно на плагине jQuery Masonry который убирает пустоту между блоков. Но данный вариант не особо подошел и решил написать такой вариант:

И так:

Создаем основу HTML:
Код

<div id="ucodes-timeline">
<li><i class="arrow"></i><div id="ucodes-still-block">Контент</div></li>
<li><i class="arrow"></i><div id="ucodes-still-block">Контент 2</div></li>  
<li><i class="arrow"></i><div id="ucodes-still-block">Контент 3</div></li>
<li><i class="arrow"></i><div id="ucodes-still-block">Контент 4</div></li>  
<li><i class="arrow"></i><div id="ucodes-still-block">Контент 5 Полный</div></li>
</div>


Также напишем CSS распределения:
Код

#ucodes-still-block {
background: #fff;
border-radius: 3px;
border: 1px solid #c3cbdf;
min-height: 60px;
}

#ucodes-timeline {
background: url(http://ucodes.ru/platform/mobile/img/3.png) repeat-y center;
}
#ucodes-timeline > li {
float: left;
clear: left;
width: calc(50% - 14px);
margin-bottom: 15px;
position: relative;
list-style: none;  
}
#ucodes-timeline > .right {
float: right;
clear: right;
}
#ucodes-timeline .arrow {
background: url(http://ucodes.ru/platform/mobile/img/2.png) no-repeat;
width: 20px;
height: 15px;
position: absolute;
top: 20px;
}
#ucodes-timeline > .left + .right > .arrow {
top: 35px;
}
#ucodes-timeline .right > .arrow {
left: calc(0% - 18px);
right: auto;
background-position: -60px -28px;
width: 19px;
}
#ucodes-timeline .left > .arrow {
left: auto;
right: calc(0% - 19px);
background-position: -41px -28px;
}
#ucodes-timeline .highlight {
clear: both;
width: auto;
float: none;
}
#ucodes-timeline .highlight .arrow {
background-image: url(http://ucodes.ru/platform/mobile/img/2.png);
background-position: -26px -28px;
height: 21px;
width: 15px;
left: 50%;
top: -20px !important;
margin-left: -7px;
}


Ну и на последок .js классификация:
Код

$(function(){
$('#ucodes-timeline li:even').addClass('left');
$('#ucodes-timeline li:odd').addClass('right');
$('#ucodes-timeline li:last').addClass('highlight');
});
Скачать файлы