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

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

Last synced: about 2 months ago
JSON representation

Bulma dashboard

• Host: GitHub
• URL: https://github.com/lucperkins/bulma-dashboard
• Owner: lucperkins
• License: isc
• Created: 2018-12-09T01:00:31.000Z (about 6 years ago)
• Default Branch: master
• Last Pushed: 2022-06-04T21:05:57.000Z (over 2 years ago)
• Last Synced: 2024-10-11T23:39:10.054Z (2 months ago)
• Language: Sass
• Size: 990 KB
• Stars: 88
• Watchers: 6
• Forks: 15
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE

Awesome Lists containing this project

• awesome-bulma - bulma-dashboard - Write easily dashboard-style interfaces with fixed horizontal panels (Extensions / Courses)

README

        
# Bulma Dashboard

**Bulma Dashboard** is extension for the [Bulma](https://bulma.io) 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](https://npmjs.org) 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`](docs/index.html). Here's a screenshot:

![Bulma Dashboard screenshot](docs/screenshot.png)

You can visit that page [here](https://lucperkins.github.io/bulma-dashboard/index.html).

## 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