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:
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 |
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
andnode-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 thebulma-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.[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!
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?
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?
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.I don't think
position: sticky
works in Safari without adding a prefix so the fix was as easy as addingposition: -webkit-sticky
... now it renders perfectly.Example broken
It seems that the example here (https://lucperkins.github.io/bulma-dashboard/) is a little broken.
Displayed with Firefox 71.0 and Chromium Version 78.0.3904.108