Вертикальний таймлайн на 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
Ось можете бачити як змінюється вигляд залежно від розміру екрану:

адаптивність таймлайну
Таймлайн на різних екранах

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


Поділитись в соцмережах

Сподобався пост? — розкажіть про нього своїм друзям