bulma-dashboard

KO | EN

gitlite — search

#java #docker #javascript #php #nodejs #csharp #android #golang #react #dotnet #tracing #flex

bulma-dashboard

★ 89 Open GitHub ↗

Bulma dashboard

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# 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
<div class="dashboard is-full-height">
  
  <div class="dashboard-panel is-one-quarter">
  </div>

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

<footer class="footer">

</footer>
  </div>

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

## Example

You can see an example page in [`docs/index.html`](docs/index.html). Here's a screenshot:

![Bulma Dashboard screenshot](https://raw.githubusercontent.com/lucperkins/bulma-dashboard/master/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

bulma-dashboard

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README