A dashboard plugin for the Bulma CSS framework
npm install bulma-dashboardBulma Dashboard is extension for the Bulma CSS framework that enables you to easily write dashboard-style interfaces with fixed horizontal panels.
The Bulma Dashboard extension is available as an npm package:
``shell`
npm install bulma-dashboard
You can also download or link to the Sass or CSS files directly.
All functionality is used inside of the dashboard class, which is intended to take up the entire page. Here's an example:
` html`
Main
You can see an example page in docs/index.html. Here's a screenshot:
You can visit that page here.
If you add a Bulma footer in the dashboard main section, it will "stick" to the bottom and fill up all remaining space.
There are a variety of widths available for panels:
Class | Width
:-----|:-----
is-one-quarter | 1/4is-half | 1/2is-one-third | 1/3is-small | 15remis-medium | 25remis-large | 30rem
> By default, panels are 25rem wide. You can change that default using the $dashboard-default-panel-width variable.
You can add the is-scrollable class to any element to make it scrollable.
You can add the has-thick-padding class to a panel to bulk up the padding to double the default.
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