Minimalist Vertical Timeline With Pure CSS – Timelined

Preview:

Description:

Timelined is a simple yet robust and highly customizable CSS library for generating a vertical, fully responsive timeline from plain html structure.

How to use it:

Download and include the timeline.css in the head section of the html page.

<link rel="stylesheet" href="css/timeline.css">

Include the OPTIONAL Font Awesome for timeline node icons.

<link rel="stylesheet" href="font-awesome.min.css">

The basic markup structure for the timeline.

<div class="timeline timeline-collapsing blue-yellow-yellow timeline-with-arrows">
  <div class="timeline-block">  
    <div class="timeline-icon timeline-icon-hide-border">
      <i class="fa fa-camera-retro fa-lg"></i>
    </div> 
    <div class="arrow-right"></div>
    <div class="timeline-content"> 
      <p> Any content </p> 
      <div class="timeline-date">Yesterday</div>
    </div>
  </div>
  <div class="timeline-block timeline-block-icon-only">
    <div class="timeline-icon timeline-icon-text timeline-icon-hide-border">
      <span>Testing this thingTesting this thing</span>
    </div>
    <div class="timeline-content"><div class="timeline-date">Yesterday</div>
    </div>
    
  </div>
  <div class="timeline-block">
    <div class="timeline-icon"></div>
    <div class="timeline-content">
      <h2>This header</h2>
      <p>Nullam luctus ligula ac venenatis tempor. Donec maximus lacus sed ullamcorper viverra. Donec gravida at sem at dapibus. Praesent interdum nec leo ut tincidunt. Fusce lacinia ultricies arcu, quis lacinia libero accumsan quis. Nam ac diam ac ex elementum rhoncus. Sed sed lacinia massa. Maecenas iaculis lectus eu aliquam sollicitudin. Vestibulum aliquam tellus vel tempus fermentum. Duis aliquam fringilla volutpat. Nulla facilisi.</p>
    <div class="timeline-date">Yesterday</div>
    </div>
    
  </div>
</div>

CSS helpers & modifiers.

• .timeline-left: The line is on the left while the content is always on the right;
• .timeline-alternating: Blocks are alternating between left and right of the line;
• .timeline-collapsing: The timeline automatically switches to timeline-left mode when the container is small (800px, by default);
• .timeline-with-arrows: Includes the arrows towards the line (works with default and left modes).
• .timeline-icon-hide-border: Removes the border from the icon circle. For .timeline-icon element.
• .timeline-block-icon-only: Shows the timeline content in the block. For .timeline-block element.

Color schemes.

• gray-red
• gray-blue
• blue-yellow-yellow
• purple-flirt,blue-blue-blue