Bulmally

An accessibility ready frontend component framework for streamlining web development.

Why Bulmally?

We had a need for a modular and easy to extend UI component framework with accessibility support built in. Bulmally adds minimal semantic markup for Bulma UI components to make them accessible. Bulma does not provide any JavaScript since it is a CSS only framework. Bulmally provides a VanillaJS implementation for all its components implementing the dynamic changes needed for screen readers to interpret dynamically changing states in the UI.

Simplicity in mind

Bulmally is not a ready-made NPM package that you can install and import in your project. Experience has taught us it is easier to copy-paste UI components rather than to import them from Node modules. Extending and modifying module based components can be tricky and sometimes too time-consuming for simple tasks in real-life web projects. This is why we made Bulmally really simple to use. To use a Bulmally component there is only a few steps you need to follow:

  1. Install Bulma
  2. Navigate to the component page in this documentation.
  3. Copy-paste the HTML markup
  4. Copy-paste the JS markup
  5. Copy-paste the SCSS markup

List of components:

  • Navbar

    This component provides a fully functional navbar implementation for the Bulma navbar component.

    Go to component
  • Accordion

    This component provides an accordion functionality with added accessible JS implementation.

    Go to component
  • Tabs

    Responsive horizontal navigation tabs, with different styles. Bulmally implements JavaScript and adds accessibility for the component.

    Go to component
  • Modal

    This component provides needed JavaScript functionalities for an accessible modal window.

    Go to component
  • Message

    Colored message blocks, to emphasize part of your page. Bulmally implements the ability to close the message.

    Go to component