Bulma dashboard

  • By Luc Perkins
  • Last update: Dec 21, 2022
  • Comments: 6

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:

Bulma Dashboard 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

Github

https://github.com/lucperkins/bulma-dashboard

Comments(6)

  • 1

    Documentation needs to explain how to include stylesheet

    Following the README.md did not result in a working page layout for me.

    I have a Vue.js app with Bulma and Buefy working via sass-loader and node-sass.

    The only way I could get bulma-dashboard to work is by visiting the example page at https://lucperkins.github.io/bulma-dashboard/index.html and inspecting the document and copy-pasting the bulma-dashboard.css into a local stylesheet in my project.

    What would be the correct way to make the stylesheet contained in the NPM package work?

    I tried @import "~/bulma-dashboard.css"; but this did nothing.

  • 2

    [FeatureRequest] Show/Hide menu

    Thanks for putting this together - I ended up converting it to scss to match my existing setup but it worked well.

    Do you have plans to provide a way to show/hide the side panel on a click/class mainly so I can show/hide it on mobile.

    By default, your example also hides the navbar on mobile which can be a pain!

  • 3

    Instructions for installing with javascript directly

    I npm installed bulma-dashboard and then tried to use the classes and nothing changed. I'm using webpacker / javascript integration, so I import 'bulma' directly into my js. I tried import 'bulma-dashboard' but it couldn't find that. How are you supposed to import this using js or is not possible?

  • 4

    bulma-dashboard.min.css

    When trying the example dashboard provided in the docs folder, the layout was not as showed by your example page. For example, the scroll bars were missing and the sidebars were not filling the entire page. It turned out that the bulma-dashboard.min.css provided in the dist folder is different from the one provided in the docs folder. Can you please inform me why there is a diference?

  • 5

    Constrain fixed-top navbar properly in Safari

    Hi @lucperkins,

    Thanks for making this extension -- filling a longstanding common need in Bulma.

    I found in Safari (both MacOS and iOS) the fixed-top navbar (from the example.html) would render across the whole page obscuring elements instead of being constrained to the dashboard-main section.

    screen shot 2018-12-26 at 5 39 21 am

    I don't think position: sticky works in Safari without adding a prefix so the fix was as easy as adding position: -webkit-sticky... now it renders perfectly.

    screen shot 2018-12-26 at 6 51 57 am
  • 6

    Example broken

    It seems that the example here (https://lucperkins.github.io/bulma-dashboard/) is a little broken.

    image

    Displayed with Firefox 71.0 and Chromium Version 78.0.3904.108

Popular Tag

Related