Создаем вертикальный график с помощью CSS

Для чего же нужны вертикальные графики? Вертикальный график может отражать процесс развития чего-либо, например, какого-нибудь программного продукта. На графике можно перечислить все существующие версии программы и указать какие новые возможности появлялись в нем от версии к версии.

График состоит из временной шкалы и блоков с информацией. На временной шкале отмечаются даты каких-либо ключевых событий. К этим меткам «прикрепляются» блоки с описанием этих событий. Блоки размещаются попеременно с разных сторон от временной шкалы.

Хочется отметить, что Timelined - довольно гибкий инструмент. Он имеет много настроек. Например, вы можете размещать на временной шкале метки в виде иконок или изображений, а также настраивать внешний вид блоков.

Итак, давайте познакомимся с Timelined поближе.

Для начала зайдите на страницу инструмента на GitHub. Там вы сможете скачать все необходимые файлы в виде zip-архива.

После загрузки и распаковки советую ознакомиться с файлом demo.html – это обычная статическая страничка, на которой продемонстрированы все основные возможности Timelined. Также вы можете ознакомиться с инструментом, формируя график динамически. Для этого существует другая демо-страница, разработанная с использованием AngularJS.

Чтобы эффективно использовать инструмент нужно разобраться со структурой HTML-кода графика. Выглядит код следующим образом:

HTML

<div class="timeline gray-blue"> 
    <div class="timeline-block"> 
        <div class="timeline-icon"></div>
        <div class="timeline-content"> 
            <p> Any content </p> 
            <div class="timeline-date">Yesterday</div> 
        </div>
    </div>
    …
</div>

• div.timeline – основной контейнер графика;
• div.timeline-block – HTML-элемент, отображающий отдельный блок на графике;
• div.timeline-icon – метка на временной шкале. Блок размещается напротив нее;
• div.timeline-date – HTML-элемент для размещения даты на временной шкале. Дата обычно размещается рядом с меткой;
• div.timeline-content - контейнер для размещения содержимого блока. Особых требований к содержимому нет, вы можете размещать в нем обычный текст, изображения, списки и тп;

Возможно изменение внешнего вида графика. Это делается путем добавления дополнительных CSS-классов к основному контейнеру графика (.timeline):

• .timeline-left – временная шкала будет находиться все время слева, а блоки — справа;
• .timeline-alternating – положение блоков чередуется: они располагаются то слева, то справа от шкалы;
• .timeline-collapsing – если основной контейнер уменьшается до определенного значения (800px по-умолчанию) временная шкала будет всегда располагаться слева от блоков;
• .timeline-with-arrows – по направлению временной шкалы размещаются стрелки (доступно в обычном режиме, а также если временная шкала располагается слева от блоков);

Настройки элемента метки (div.timeline-icon):

• .timeline-icon-hide-border – отключает рамку у метки;
• При оформлении меток, вы можете использовать иконочный шрифт Font Awesome и обычные изображения;

  HTML

  	<div class="timeline-icon timeline-icon-hide-border"> <!-- отключаем рамку у метки -->
  		<i class="fa fa-github fa-lg"></i>
  	</div>
  	<!-- или -->
  	<div class="timeline-icon">
  		<img src="/path/to/image/"/>
  	</div>
  		

Прячем содержимое блока (div.timeline-block).

Если вы не хотите показывать содержимое блока, добавьте к HTML-элементу (div.timeline-block) CSS-класс .timeline-block-icon-only. Это сделает HTML-элемент с содержимым (div.timeline-content) невидимым.

Более того, если вы хотите разместить текст вместо иконки (или изображения), добавьте CSS-класс .timeline-icon-text к элементу div.timeline-icon. При желании вы также можете добавить к элементу CSS-класс .timeline-icon-hide-border. При добавлении внутрь контейнера элемента span с текстом, у контейнера появится фон и рамка.

Ознакомьтесь с примером, чтобы лучше понять как это должно выглядеть:

HTML

<div class="timeline-block timeline-block-icon-only">
    <div class="timeline-icon timeline-icon-text timeline-icon-hide-border">
        <span>This is my important text</span>
    </div>
    <div class="timeline-content"></div>
</div>

Изменяем цвет элементов графика

Использование цветовых схем — это самый простой способ изменить цвет шкалы, иконок, расположенных на ней, а также границ у блоков. Названия цветовых схем не требует пояснений: gray-red, gray-blue, blue-yellow-yellow, purple-flirt, blue-blue-blue. Чтобы поменять цвет, добавьте CSS-класс с названием темы к основному контейнеру графика.

В процессе знакомства с возможностями инструмента для создания CSS-графиков, я создал демо-страничку. Вы можете ознакомиться с ней.