Documentation

This site gathers documentation of my GitHub projects

Steps

Display steps for a process (like sign-up, or order, form), in different colors, sizes, and states

Colors Yes
Sizes Yes
Variables Yes

Step 1

This is the first step of the process.

Step 2

This is the second step. You get here once you have completed the first step.

3

Step 3

This is the third step. One more last before the end.

Step 4

Final step. You have completed all the previous steps and end the process.

<div class="steps">
  <div class="step-item is-completed is-success">
    <div class="step-marker">
      <span class="icon">
        <i class="fa fa-check"></i>
      </span>
    </div>
    <div class="step-details">
      <p class="step-title">Step 1</p>
      <p>This is the first step of the process.</p>
    </div>
  </div>
  <div class="step-item is-active">
    <div class="step-marker"></div>
    <div class="step-details">
      <p class="step-title">Step 2</p>
      <p>This is the second step. You get here once you have completed the first step.</p>
    </div>
  </div>
  <div class="step-item">
    <div class="step-marker">3</div>
    <div class="step-details">
      <p class="step-title">Step 3</p>
      <p>This is the third step. One more last before the end.</p>
    </div>
  </div>
  <div class="step-item">
    <div class="step-marker">
      <span class="icon">
        <i class="fa fa-flag"></i>
      </span>
    </div>
    <div class="step-details">
      <p class="step-title">Step 4</p>
      <p>Final step. You have completed all the previous steps and end the process.</p>
    </div>
  </div>
</div>

Colors #

  • Step 1

    This is the first step of the process.

  • Step 2

    This is the second step. You get here once you have completed the first step.

  • 3

    Step 3

    This is the third step. One more last before the end.

  • Step 4

    Final step. You have completed all the previous steps and end the process.

<ul class="steps">
  <li class="step-item is-completed is-success">
    <div class="step-marker">
      <span class="icon">
        <i class="fa fa-check"></i>
      </span>
    </div>
    <div class="step-details is-primary is-completed">
      <p class="step-title">Step 1</p>
      <p>This is the first step of the process.</p>
    </div>
  </li>
  <li class="step-item is-info is-completed">
    <div class="step-marker"></div>
    <div class="step-details">
      <p class="step-title">Step 2</p>
      <p>This is the second step. You get here once you have completed the first step.</p>
    </div>
  </li>
  <li class="step-item is-warning is-completed">
    <div class="step-marker">3</div>
    <div class="step-details">
      <p class="step-title">Step 3</p>
      <p>This is the third step. One more last before the end.</p>
    </div>
  </li>
  <li class="step-item is-danger is-active">
    <div class="step-marker">
      <span class="icon">
        <i class="fa fa-flag"></i>
      </span>
    </div>
    <div class="step-details">
      <p class="step-title">Step 4</p>
      <p>Final step. You have completed all the previous steps and end the process.</p>
    </div>
  </li>
</ul>

Sizes #

  • 3
  • 3
  • 3
  • 3
<ul class="steps is-small">
  <li class="step-item is-completed">
    <div class="step-marker">
      <span class="icon">
        <i class="fa fa-check"></i>
      </span>
    </div>
  </li>
  <li class="step-item is-active">
    <div class="step-marker"></div>
  </li>
  <li class="step-item">
    <div class="step-marker">3</div>
  </li>
  <li class="step-item">
    <div class="step-marker">
      <span class="icon">
        <i class="fa fa-flag"></i>
      </span>
    </div>
  </li>
</ul>

<ul class="steps">
  <li class="step-item is-completed">
    <div class="step-marker">
      <span class="icon">
        <i class="fa fa-check"></i>
      </span>
    </div>
  </li>
  <li class="step-item is-active">
    <div class="step-marker"></div>
  </li>
  <li class="step-item">
    <div class="step-marker">3</div>
  </li>
  <li class="step-item">
    <div class="step-marker">
      <span class="icon">
        <i class="fa fa-flag"></i>
      </span>
    </div>
  </li>
</ul>

<ul class="steps is-medium">
  <li class="step-item is-completed">
    <div class="step-marker"></div>
  </li>
  <li class="step-item is-active">
    <div class="step-marker"></div>
  </li>
  <li class="step-item">
    <div class="step-marker">3</div>
  </li>
  <li class="step-item">
    <div class="step-marker">
      <span class="icon">
        <i class="fa fa-flag"></i>
      </span>
    </div>
  </li>
</ul>

<ul class="steps is-large">
  <li class="step-item is-completed">
    <div class="step-marker"></div>
  </li>
  <li class="step-item is-active">
    <div class="step-marker"></div>
  </li>
  <li class="step-item">
    <div class="step-marker">3</div>
  </li>
  <li class="step-item">
    <div class="step-marker">
      <span class="icon">
        <i class="fa fa-flag"></i>
      </span>
    </div>
  </li>
</ul>

Javascript #

Javascript

The extension comes with a JavaScript implementation which manage steps navigation.

Step 1

This is the first step of the process.

Step 2

This is the second step. You get here once you have completed the first step.

3

Step 3

This is the third step. One more last before the end.

Step 4

Final step. You have completed all the previous steps and end the process.

<div class="steps" id="stepsDemo">
  <div class="step-item is-active is-success">
    <div class="step-marker">
      <span class="icon">
        <i class="fa fa-check"></i>
      </span>
    </div>
    <div class="step-details">
      <p class="step-title">Step 1</p>
      <p>This is the first step of the process.</p>
    </div>
  </div>
  <div class="step-item">
    <div class="step-marker"></div>
    <div class="step-details">
      <p class="step-title">Step 2</p>
      <p>This is the second step. You get here once you have completed the first step.</p>
    </div>
  </div>
  <div class="step-item">
    <div class="step-marker">3</div>
    <div class="step-details">
      <p class="step-title">Step 3</p>
      <p>This is the third step. One more last before the end.</p>
    </div>
  </div>
  <div class="step-item">
    <div class="step-marker">
      <span class="icon">
        <i class="fa fa-flag"></i>
      </span>
    </div>
    <div class="step-details">
      <p class="step-title">Step 4</p>
      <p>Final step. You have completed all the previous steps and end the process.</p>
    </div>
  </div>
  <div class="steps-actions">
    <div class="steps-action">
      <button data-nav="previous" class="button is-light">previous</button>
    </div>
    <div class="steps-action">
      <button data-nav="next" class="button is-light">Next</button>
    </div>
  </div>
</div>

Variables #

You can use these variables to customize this component. Simply set one or multiple of these variables before importing Bulma. Learn how.

Name Default value
Name Default value
$steps-maker-default-color $grey-light
$steps-marker-default-border .2em solid
$steps-default-color $grey-lighter
$steps-completed-color $primary
$steps-active-color $primary
$steps-divider-height .2em

Thanks to aramvisser for the marker name idea and for the sizes mixin declaration (which is smart).

This page is designed with Bulma CSS framework.