The unofficial missing JavaScript library for Bulma websites.

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>

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

bulmaJS.setConfig('bulmaJS.elementIdPrefix', 'bulma-js-')

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

Can be called multiple times after page contents have changed.

bulmaJS.init()

Helpful after populating an area with an AJAX call.

bulmaJS.init(document.getElementById('container-element'))

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

https://bulma.io/documentation/elements/notification/, https://bulma.io/documentation/components/message/, https://bulma.io/documentation/elements/tag/

• Support for delete buttons within notification, message, and tag elements. (Thanks thibaultmeyer for the feature.)

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

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

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

• Support for the dropdown elements.

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.

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')
    }
  }
})

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.