Skip to content

Bulma

Bulma supplies named CSS styles for forms, buttons, columns and interface pieces such as dialogs. You can use its ready-made stylesheet and keep control of the underlying HTML.

Visit Bulma

What does Bulma supply for an account settings form?

Bulma styles the form’s labels, fields and buttons when you give the HTML the documented class names. Load the ready-made CSS to start. Use its form state styles for a visible error while your app decides when the error applies and explains how to fix it.

A stylesheet changes appearance. Keep meaningful labels, a clear error message and the browser’s normal form controls.

Will a Bulma dialog open and close on its own?

Bulma gives you the dialog’s appearance and a class that shows it. It does not ship JavaScript for opening or closing it. Your app must handle the button, dismissal and what happens to keyboard focus.

For a settings confirmation, have the open action put focus inside the dialog. Check that the keyboard can reach the close control and that closing returns focus somewhere useful. Keep this behavior in the app when you change the styling.

Where should you change colors used in several places?

Bulma v1 uses CSS variables, named values that several style rules can share. Change a documented global value if you want a broad theme change, or change a component value if the update belongs only to buttons or one section.

You can use Sass for a build-time customization if your project already has that setup. Check the v1 migration guide for older Sass overrides before changing the version. Bulma’s framework code is MIT-licensed. Keep your own CSS or Sass settings if you switch frameworks.

How can you plan a form and dialog before adding them to the site?

Draw one save button and a confirmation dialog. Use paper, with no account, form submission or live project.

  1. Mark what the stylesheet controls
    Circle the button, input and dialog outline. Choose one shared color to change.
  2. Write what the app must do
    Mark which button opens the dialog, which key or control closes it and where focus goes each time.
  3. Trace the error state
    Draw a field with an error message and a visible focus indicator. A person should still be able to find and fix the field if they cannot distinguish the border color.