Вертикальный таймлайн на css

Продолжаем эксперименты с таймланамы, играем с адаптивностью

Вперёд!
таймлайн фейсбук
Таймлайн страницы профиля в фейсбук

И снова велосипеды...

Привет, сегодня поговорим о такой штуке как таймлайн. Таймлайн - "линия времени", способ организации контента, который имеет определенную определенную хронологию. Каждый месяц — это веха таймлайна или контрольная точка, еще называется майлстоун (milestone). В промежутке между вехами размещается контент, относящийся к данному периоду. Таймлайны бывают как горизонтальными так и вертикальными, но в данной статье рассмотрим именно вертикальную раскладку. Вот как это выглядит в исполнении того же Фейсбука: инфографика истории публикаций

Давайте посмотрим какие составляющие элементы должны быть применены в данной раскладке.
Говоря о таймлайне вцелом там будут следующие элементы:

структура таймлайна
Элементы таймлайна
  • контрольные точки (майлстоун) — содержат заголовок тематического блока или период публикаций
  • публикации — посты с основным контентом

Сама же публикация является по сути независимым блоком и должна включать следующие элементы:

  • Шапка — содержит заголовок и аннотацию. Возможно, как в варианте с социальными сетями добавить аватарку.
    • Дата — элемент, который может идти в сочетании с аннотацией, а может быть представлен отдельно в виде ярлыка или определенной метки.
  • Контент — часть статьи, на которую ссылается публикация таймлайна, или полноценная заметка. Может содержать изображения, видео и тому подобное. Важно то, чтобы контент был ограничен определенной высотой, а остальная его часть скрывалась в контейнере с прокруткой, иначе из-за чрезмерно большого размера контента визуальный ритм таймлайна будет нарушен.
  • Подвал — содержит теги публикации и ссылки на источник или полноразмерную статью.
    • Панель с кнопками для быстрого репоста в социальных сетях — опционально
    • Комментарии — скорее всего свернуты под спойлер — опционально

С структурой разобрались, но вот еще одна деталь — вертикальная линия посередине является скорее декоративным элементом и решена как псевдоэлемент самого таймлайна, об этом позже.

эскиз таймлайна
Эскиз элемента таймлайна

Вообще идея сделать этот велосипед появилась после размышлений как должны выглядеть посты таймлайна. Ведь по-прежнему приходилось работать с такими раскладками. Первое с чем я работал был таймлайн от Кристиан Феи. Но финально взяться за написание велосипедов было решено после того, как мне попался на глаза вот такой эскиз. Дату сделать ярлычком, а остальное в отдельный контейнер. Ну и парные-непарные посты должны быть отображены один через один, как на первой картинке.

Все как просто, забегая вперед дам ссылку на гитхаб репозиторий и демку, а теперь за дело.
Базовая разметка выглядит вот так:

    
	<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>        
	
Разметка таймлайна

А вот что представляют собой базовые стили:

    
.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*/        
	
Стили таймлайна

Собственно с базовыми разметкой и стилями все, хотя есть еще "километр" стилей со всеми псевдоэлементами, которыми реализовано уголки и рамочки, но то все нюансы. Кроме того данный таймлан является адаптивным и включает решения для трех ширин экранов: 1200px, 800px, 640px
Вот можете видеть как меняется вид в зависимости от размера экрана:

адаптивность таймлайна
Таймлайн на разных экранах

Кстати, как вы видите здесь контент содержит некоторое количество изображений, и я рекомендую использовать ленивую загрузку изображений (Лейзи лоад). А вообще круто было бы допилить ленивую загрузку новых постов и выгрузку тех, что пролистаны вверх. Также на демке видно, что достаточно просто сделать цветовую схему для таймлайна и вписать его в собственный дизайн — удобно как ни крути.
Ну вот такой вот эксперимент, в результате которого был создан адаптивный вертикальный таймлайн в стиле флэт дизайна. Надеюсь он будет вам полезным, поэтому смотрите демку, форкайте проект на гитхаби, спасибо за внимание)


Поделиться в соцсетях

Понравился пост? — расскажите о нём своим друзьям