bulma-js

The unofficial missing JavaScript library for Bulma websites.

Getting Started

Download bulma-js.js here, use the jsDelivr CDN, or install from npm.

npm install @cityssm/bulma-js

Add the following to your HTML.

<script src="dist/bulma-js.js"></script>
<script>
  bulmaJS.init();
</script>

Options

Toggle Functionality

bulmaJS.setConfig("bulma.burger", true);
bulmaJS.setConfig("bulma.dropdown", true);
bulmaJS.setConfig("dropdown", true);
bulmaJS.setConfig("tabs", true);
bulmaJS.setConfig("window.collapse", true); // close dropdowns when clicked outside

Set Unique Element Id Prefix

bulmaJS.setConfig("bulmaJS.elementIdPrefix", "bulma-js-");

Set the "Initialized" Attribute Name

bulmaJS.setConfig("bulmaJS.initAttribute", "data-bulma-js-init");

Initialize Functionality on Entire Page

Can be called multiple times after page contents have changed.

bulmaJS.init();

Initialize Functionality on the Children of an Element

Helpful after populating an area with an AJAX call.

bulmaJS.init(document.getElementById("container-element"));

Features So Far

• Toggles appropriate Bulma classes and ARIA attributes.
• Close dropdown and navbar-dropdown elements when other parts of the webpage are clicked.

Navbar

https://bulma.io/documentation/components/navbar/

• Support for the navbar-burger element.
• Support for the navbar-dropdown elements.

Dropdown

https://bulma.io/documentation/components/dropdown/

• Support for the dropdown elements.

Tabs

https://bulma.io/documentation/components/tabs/

• Support for the tabs elements.
• Use the href attribute on each tab anchor element to link to the corresponding tab panel.
• All tab panels should be siblings. Hide the inactive tab panels with the is-hidden class.

Modal Alerts and Confirms

Methods for creating accessible alerts and confirms.

bulmaJS.alert("This is a basic alert!");

bulmaJS.alert({
  title: "Alert",
  message: "This is a <strong>more complex</strong> alert.",
  messageIsHtml: true,
  contextualColorName: "success",
  okButton: {
    text: "Yes, But Not Too Complex",
    callbackFunction: () => {
      console.log("OK Button Pressed");
    }
  }
});

bulmaJS.confirm({
  title: "Question",
  message: "Have you ever been to Sault Ste. Marie, Ontario?",
  contextualColorName: "primary",
  okButton: {
    text: "Yes, I Have",
    callbackFunction: () => {
      console.log("OK Button Pressed");
    }
  },
  cancelButton: {
    text: "No, But I'd Like To",
    callbackFunction: () => {
      console.log("Cancel Button Pressed");
    }
  }
});

Alternative Bulma JavaScript Project

The BulmaJS project also provides JavaScript functionality for Bulma, and is far more complete than this project. I recommend you take a look if you need more functionality than is offered here.

This project goes in a different direction in a few ways.

• Prioritizes simple usage in an HTML script tag. No import or require necessary.
• TypeScript types available.
• Goes beyond just toggling the is-active Bulma classes, and manages ARIA attributes as well to increase accessibility.
• Attempts to correct common issues (i.e. missing roles, missing ids) that may affect accessibility.