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:

``shell 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:

`html


  
  
  
  
  

    
      
        
          Bulma Dashbaord
        
      

    
    

      
        Main


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/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.

`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