Pure CSS Timeline For Bulma Framework

Preview:

Description:

A Bulma extension to create vertical timelines without requiring any additional JavaScript.

It is easy to integrate with your existing Bulma-based projects, which allows you to showcase events, milestones, or any chronological data in a structured and modern format.

How to use it:

1. Load the necessary Bulma.css and bulma-timeline.min.css in the document.

<link rel="stylesheet" href="/path/to/cdn/bulma.min.css">
<link rel="stylesheet" href="/path/to/bulma-timeline.min.css" />

2. Utilize the predefined CSS classes and HTML structure to create your timeline.

<div class="timeline is-centered">
  <header class="timeline-header">
    <span class="tag is-medium is-primary">Start</span>
  </header>
  <div class="timeline-item is-primary">
    <div class="timeline-marker is-primary"></div>
    <div class="timeline-content">
      <p class="heading">January 2016</p>
      <p>Timeline content - Can include any HTML element</p>
    </div>
  </div>
  <div class="timeline-item is-warning">
    <div class="timeline-marker is-warning is-image is-32x32">
      <img src="https://bulma.io/images/placeholders/32x32.png">
    </div>
    <div class="timeline-content">
      <p class="heading">February 2016</p>
      <p>Timeline content - Can include any HTML element</p>
    </div>
  </div>
  <header class="timeline-header">
    <span class="tag is-primary">2017</span>
  </header>
  <div class="timeline-item is-danger">
    <div class="timeline-marker is-danger is-icon">
      <i class="fa fa-flag"></i>
    </div>
    <div class="timeline-content">
      <p class="heading">March 2017</p>
      <p>Timeline content - Can include any HTML element</p>
    </div>
  </div>
  <header class="timeline-header">
    <span class="tag is-medium is-primary">End</span>
  </header>
</div>

3. RTL mode is supported as well.

<div class="timeline is-rtl">
  ...
</div>

4. Default CSS variables.

$timeline-marker-size: 12px !default
$timeline-marker-color: $grey-lighter !default
$timeline-marker-icon-size: 24px !default
$timeline-marker-border-size: 1px !default
$timeline-marker-border: $timeline-marker-border-size solid $timeline-marker-color !default
$timeline-line-color: $grey-lighter !default
$timeline-line-width: 1px !default
$timeline-line-style: solid !default
$timeline-line: $timeline-line-width $timeline-line-style $timeline-line-color !default
$timeline-content-padding: 1em 0 0 2em !default
$timeline-rtl-content-padding: 1em 2em 0 0 !default
$timeline-icon-size: .75rem !default
$timeline-header-width: 4em !default
$timeline-item-padding-left: $timeline-header-width * 0.5 !default
$timeline-item-padding-bottom: 2em !default
$dimensions: 16 24 32 48 64 96 128 !default