Responsive
Calendar works fine on any device: desktop, tablet or mobile.
---
layout: default
route: index
fixed-navbar: false
title: Quick-Start
subtitle: bulma.io Calendar component with range selection capability
---
{% capture component_include_css %}
{% endcapture %}
{% capture component_include_sass %}
@charset "utf-8"
// Import Bulma core
@import 'bulma.sass'
// Import component
@import "bulma-timeline.sass"
{% endcapture %}
{% capture component_example %}
January 2016 Timeline content - Can include any HTML element February 2016 Timeline content - Can include any HTML element March 2017 Timeline content - Can include any HTML element
Calendar works fine on any device: desktop, tablet or mobile.
Use of sass variables to easily customize design.
There are several ways to get started with Bulma-extensions. You can either:
Use npm to install and stay up to date in the future
{% highlight shell %}npm install bulma-timeline{% endhighlight %}Use the GitHub repository to get the latest development version
This method requires git installed on your computer.
{% highlight shell %}git clone git://github.com/Wikiki/bulma-timeline.git{% endhighlight %}The component comes with various files:
Depending on your need your can use either pre-compiled files from dist
directory or sources from
src
directory.
The best way to start with calendar is to use a simple HTML5 date input:
{% highlight html %}{{ component_example }}{% endhighlight %}You are only at 1 simple step to work with bulma-timeline.
The first step is to include the stylesheet into your project. You can use either the minified CSS version or the Sass source to integrate it into a more global project.
{% highlight html %}{{ component_include_css }}{% endhighlight %}
{% highlight html %}{{ component_include_sass }}{% endhighlight %}