Bulma Dashboard

Bulma Dashboard is extension for the Bulma CSS framework that enables you to easily write dashboard-style interfaces with fixed horizontal panels.

Installing

The Bulma Dashboard extension is available as an npm package:

npm install bulma-dashboard

You can also download or link to the Sass or CSS files directly.

Usage

All functionality is used inside of the dashboard class, which is intended to take up the entire page. Here's an example:

<div class="dashboard is-full-height">
  <!-- left panel -->
  <div class="dashboard-panel is-one-quarter">
  </div>

  <!-- main section -->
  <div class="dashboard-main is-scrollable">
    <nav class="navbar is-fixed-top">
      <div class="navbar-brand">
        <span class="navbar-item">
          Bulma Dashbaord
        </span>
      </div>
    </nav>

    <section class="section">
      <p class="title">
        Main
      </p>
    </section>

    <!-- the footer will take up all unused space at the bottom -->
    <footer class="footer">

    </footer>
  </div>

  <!-- right panel -->
  <div class="dashboard-panel is-small">
  </div>
</div>

Example

You can see an example page in docs/index.html. Here's a screenshot:

You can visit that page here.

Footer

If you add a Bulma footer in the dashboard main section, it will "stick" to the bottom and fill up all remaining space.

Sizes

There are a variety of widths available for panels:

Class	Width
is-one-quarter	1/4
is-half	1/2
is-one-third	1/3
is-small	15rem
is-medium	25rem
is-large	30rem

By default, panels are 25rem wide. You can change that default using the $dashboard-default-panel-width variable.

Scrolling

You can add the is-scrollable class to any element to make it scrollable.

Padding

You can add the has-thick-padding class to a panel to bulk up the padding to double the default.

Variables

Variable	Default	Meaning
$dashboard-default-panel-width	25rem	The default panel width if no size modifier is added
$dashboard-default-panel-padding	1.5rem	The padding in panels