--- layout: default variables: - name: $steps-default-color value: $grey-lighter - name: $steps-completed-color value: $success - name: $steps-active-color value: $success - name: $steps-horizontal-min-width value: 10em - name: $steps-vertical-min-height value: 4em - name: $steps-marker-size value: 2 - name: $steps-divider-size value: .4em - name: $steps-gap-size value: .3rem - name: $steps-hollow-border-size value: .3em - name: $steps-thin-divider-size value: 1px - name: $steps-thin-marker-size value: .8em ---

Installation

An extension for the Bulma CSS framework. See the Readme on Github for installation instructions.


{% include meta.html colors=true sizes=true variables=true %} {% include anchor.html name="Documentation" %}

The steps list is useful for tracking progress in multi steps forms or wizards.

You can use the is-active modifier to set the current active step. Any step before or after the active step will be styled differently.

{% capture steps_example %} {% endcapture %}
{{steps_example}}
{% highlight html %} {{steps_example}} {% endhighlight %}
{% include anchor.html name="Marker Content" %}

You can display information inside markers. About 2 or 3 characters or an icon will fit.

{% capture steps_marker_content_example %} {% endcapture %}
{{steps_marker_content_example}}
{% highlight html %} {{steps_marker_content_example}} {% endhighlight %}
{% include anchor.html name="Step Content" %}

Use the steps-content class to add content to a steps-segment.

If the last step also has content, use the is-balanced modifier on the root steps element, to make sure that the last step has the same width as the other steps.

{% capture steps_content_example %} {% endcapture %}
{{steps_content_example}}
{% highlight html %} {{steps_content_example}} {% endhighlight %}

Use the has-content-centered class to align the content directly underneath the marker.

You can omit the is-balanced modifier, since has-content-centered will make sure the steps are always balanced.

{% capture steps_centered_content_example %} {% endcapture %}
{{steps_centered_content_example}}
{% highlight html %} {{steps_centered_content_example}} {% endhighlight %}

Use the is-divider-content modifier to align content with the divider.

If the last step has no content, omit the is-balanced modifier on the root element to make sure the last step stays flush with the right edge.

{% capture steps_divider_content_example %} {% endcapture %}
{{steps_divider_content_example}}
{% highlight html %} {{steps_divider_content_example}} {% endhighlight %}

Use has-content-above modifier to move the steps above the marker.

{% capture steps_content_above_example %} {% endcapture %}
{{steps_content_above_example}}
{% highlight html %} {{steps_content_above_example}} {% endhighlight %}

has-content-above also works with is-divider-content

{% capture steps_content_above_divider_example %} {% endcapture %}
{{steps_content_above_divider_example}}
{% highlight html %} {{steps_content_above_divider_example}} {% endhighlight %}

Add a sibling to .steps-content with the class of .extra-data to create between-steps data. It works with .has-content-above as well.

Be aware that it is floating and therefore does not occupy space within the DOM. Add margins above and below as needed.

{% capture steps_extra_data_example %}
  • Step 1

  • Step 2

    Hello, there.
  • Step 3

  • Step 1

  • Step 2

    General Kenobi!
  • Step 3

{% endcapture %}
{{steps_extra_data_example}}
{% highlight html %} {{steps_extra_data_example}} {% endhighlight %}

Use .has-overflow-left or .has-overflow-right to allow extra data to overflow. By default, it will center and text-wrap for you.

{% capture steps_extra_data_overflow_example %}
  • Step 1

  • Step 2

    This snippet overflows from step 3, and stays right-aligned.
  • Step 3

  • Step 1

    This one overflows from step 1 in the opposite direction.
  • Step 2

  • Step 3

{% endcapture %}
{{steps_extra_data_overflow_example}}
{% highlight html %} {{steps_extra_data_overflow_example}} {% endhighlight %}
{% include anchor.html name="Colors" %}

Every marker can have a different color. This can be used to indicate steps with errors, for example.

{% capture steps_marker_colors1_example %} {% endcapture %} {% capture steps_marker_colors2_example %} {% endcapture %}
{{steps_marker_colors1_example}}
{% highlight html %} {{steps_marker_colors1_example}} {% endhighlight %}
{{steps_marker_colors2_example}}
{% highlight html %} {{steps_marker_colors2_example}} {% endhighlight %}
{% include anchor.html name="Sizes" %}

You can use the is-small, is-medium or is-large modifiers to change the size.

{% capture steps_sizes_example %} {% endcapture %} {% capture steps_sizes_short_example %} {% endcapture %}
{{steps_sizes_example}}
{% highlight html %} {{steps_sizes_short_example}} {% endhighlight %}

Or if you want to go really small, use the is-thin modifier to have 1px wide dividers. The markers will also be made smaller, so you can't put anything inside them anymore.

{% capture steps_thin_example %} {% endcapture %}
{{steps_thin_example}}
{% highlight html %} {{steps_thin_example}} {% endhighlight %}
{% include anchor.html name="Narrow" %}

By default, the steps component will take up the entire width. Add the is-narrow modifier to only take up as much space as needed.

You can combine that with the is-centered or is-right modifiers to change the alignment.

{% capture steps_narrow_example %} {% endcapture %}
{{steps_narrow_example}}
{% highlight html %} {{steps_narrow_example}} {% endhighlight %}
{% include anchor.html name="Short" %}

By default, the steps component with is-vertical modifier will take up the entire height. Add the is-short modifier to only take up as much space as needed.

You can combine that with the is-centered or is-right modifiers to change the alignment.

{% capture steps_is-short_example %} {% endcapture %}
{{steps_is-short_example}}
{% highlight html %} {{steps_is-short_example}} {% endhighlight %}
{% include anchor.html name="Marker Style" %}

The marker can be styled using the is-hollow modifier. It can apply to all steps by defining it on the root steps element or each marker separately.

{% capture steps_hollow_example %} {% endcapture %} {% capture steps_hollow_mixed_example %} {% endcapture %}

For all steps

{{steps_hollow_example}}
{% highlight html %} {{steps_hollow_example}} {% endhighlight %}

Per step

{{steps_hollow_mixed_example}}
{% highlight html %} {{steps_hollow_mixed_example}} {% endhighlight %}
{% include anchor.html name="Divider Styles" %}

The divider can be styled using the is-dashed modifier, has-gaps modifier or both. They can apply to all steps by defining it on the root steps element or each step separately.

is-dashed

{% capture steps_dashed_example %} {% endcapture %} {% capture steps_dashed_mixed_example %} {% endcapture %}

For all steps

{{steps_dashed_example}}
{% highlight html %} {{steps_dashed_example}} {% endhighlight %}

Per step

{{steps_dashed_mixed_example}}
{% highlight html %} {{steps_dashed_mixed_example}} {% endhighlight %}

has-gaps

{% capture steps_gaps_example %} {% endcapture %} {% capture steps_gaps_mixed_example %} {% endcapture %}

For all steps

{{steps_gaps_example}}
{% highlight html %} {{steps_gaps_example}} {% endhighlight %}

Per step

{{steps_gaps_mixed_example}}
{% highlight html %} {{steps_gaps_mixed_example}} {% endhighlight %}
{% include anchor.html name="Alignment" %}

The steps are displayed vertically on mobile and horizontally on bigger sizes by default.

You can use the is-horizontal or is-vertical modifiers to always force the steps in a certain alignment no matter the screen size.

{% capture steps_horizontal_example %} {% endcapture %} {% capture steps_vertical_example %} {% endcapture %}

Always horizontal

{{steps_horizontal_example}}
{% highlight html %} {{steps_horizontal_example}} {% endhighlight %}

Always vertical

{{steps_vertical_example}}
{% highlight html %} {{steps_vertical_example}} {% endhighlight %}
{% include anchor.html name="Example" %}

Putting things together, we can make a checkout form for a shopping website.

{% capture steps_checkout_example %} {% endcapture %}
{{steps_checkout_example}}
{% highlight html %} {{steps_checkout_example}} {% endhighlight %}
{% include anchor.html name="SASS Mixin Helpers" %}

There are a few helpers available to make it easy to directly target step segments if you want to create custom step styles. They are steps-all-segments, steps-inactive-segments and steps-active-segment.

For example, if you create a my-step-style class in a .sass file like this:

{% highlight sass %} // in a .sass file .my-step-style +steps-active-segment .steps-content font-weight: bold +steps-inactive-segments .steps-content color: $grey-lighter {% endhighlight %}

Then using the my-step-style class on the root steps element will add the custom styles.

{% capture steps_custom_example %} {% endcapture %}
{{steps_custom_example}}
{% highlight html %} {{steps_custom_example}} {% endhighlight %}

There is no steps-completed-segments mixin available, due to the way the code is structured (and css3 limitations). If you want to target those, use the steps-all-segments mixin to set that style and override it with the steps-active-segment and steps-inactive-segments mixins.

{% include variables.html variables=variables %} {% include anchor.html name="Problems?" %}

Have an issue? Please create an issue on Github and I will look at it.