https://aramvisser.github.io/bulma-steps/

Steps component for bulma.io
https://aramvisser.github.io/bulma-steps/

Last synced: about 2 months ago
JSON representation

Steps component for bulma.io

• Host: GitHub
• URL: https://aramvisser.github.io/bulma-steps/
• Owner: aramvisser
• License: mit
• Archived: true
• Created: 2017-08-14T10:11:25.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2018-09-04T04:26:44.000Z (over 6 years ago)
• Last Synced: 2024-09-30T23:16:40.886Z (2 months ago)
• Language: HTML
• Size: 30.3 KB
• Stars: 92
• Watchers: 5
• Forks: 27
• Open Issues: 13
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-bulma - bulma-steps (alternative) - Keep track of where you are in multi steps forms and wizards (Extensions / Courses)

README

        
# Steps component for Bulma

This is an extensions for the [Bulma CSS Framework](http://bulma.io). It adds a `steps` component to

track progress in multi step forms or wizards.

[![Steps example for a checkout form](steps-example.png)](https://aramvisser.github.io/bulma-steps)

## Documentation

[Usage & Examples](https://aramvisser.github.io/bulma-steps)

I'm trying to keep this working with the latest available Bulma version. Currently tracking: **bulma

v0.5.3**. Other versions _should_ work, but no promises.

## Installation

### NPM

`npm install bulma-steps-component`

### Manually

There is no .css file available, only a .sass file. Make sure you are using the SASS version of

Bulma in your current workflow

- Download the `bulma-steps.sass` file

- Add `@import "bulma-steps.sass"` _after_ the `@import "bulma.sass"` statement in your own

  stylesheet

## Development

This repository doubles as the documentation page using Jekyll. You can easily see changes in the

documentation by running Jekyll locally.

- Install ruby and then install Jekyll with `gem install jekyll`

- Clone this repository

- Run `jekyll serve` inside the root directory of this repository

- Open the documentation page on [http://localhost:4000](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 extensions for Bulma available from

[Wikiki](https://github.com/Wikiki/bulma-steps). It even has the same name!