bulma-o-steps

In-depth Steps component for Bulma.io

Usage no npm install needed!

<script type="module">
  import bulmaOSteps from 'https://cdn.skypack.dev/bulma-o-steps';
</script>

README

Steps component for Bulma

This is an extension for the Bulma CSS Framework.

It adds an in-depth steps component to track progress in multi-step forms or wizards.
Original written by aramvisser over at his original repo

Steps example for a checkout form

Documentation

Usage & Examples

I'm trying to keep this working with the latest available Bulma version. Currently tracking: bulma v0.8.2. Other versions should work, but no promises.

Installation

NPM

npm install bulma-o-steps

Manually

SASS

  • Download the bulma-steps.sass file
  • Add @import "bulma-steps.sass" after the @import "bulma.sass" statement in your own stylesheet

CSS

  • Download the bulma-steps.min.css file
  • Add @import "bulma-steps.min.css" after the @import "bulma.css" statement in your own stylesheet
  • An expanded version of the file is also available at bulma-steps.css

Hosted Online

Alternatively, you can include bulma and bulma-steps from a CDN. As of writing, these are the current CDNs for both:

Development

This repository doubles as the documentation page using Jekyll. You can see changes in the documentation by running Jekyll locally.

  • Install ruby and then install Jekyll with gem install jekyll
  • Ruby's eventmachine is broken in windows, you can fix it by uninstalling it with gem uninstall eventmachine and reinstalling the proper one with gem install eventmachine --platform ruby
  • Clone this repository
  • Run jekyll serve inside the root directory of this repository. Use --livereload if you'd like to see the changes live.
  • Open the documentation page on http://localhost:4000
  • Make changes to the bulma-steps.sass file
  • Reload the documentation page to see your changes

Related Project

There is another steps extension by Wikiki, and the original source of this one, by aramvisser