bulma-o-steps
v1.1.0
Published
In-depth Steps component for Bulma.io
Downloads
7,870
Maintainers
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
Documentation
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:
- bulma: https://cdnjs.cloudflare.com/ajax/libs/bulma/0.8.2/css/bulma.min.css
- bulma-steps: https://cdn.rawgit.com/octoshrimpy/bulma-o-steps/master/bulma-steps.css
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 withgem 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