Author: | Wikiki |
---|---|
Views Total: | 292 views |
Official Page: | Go to website |
Last Update: | April 17, 2023 |
License: | MIT |
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