Bulma CSS Framework

Bulma has a wide ecosystem of related projects, including framework-specific component libraries (React, Vue, Angular, Svelte, Blazor, Elm, Ember), integration tools (Rails, Django, Laravel, WordPress), and specialized extensions (Social buttons, Modal effects, Attribute selectors).

Key ecosystem categories include:

• Framework Bindings: Bloomer (React), Buefy (Vue), @angular-bulma (Angular), Svelte Bulma Components (Svelte), BulmaRazor (Blazor).
• Theming & Customization: Bulmaswatch (Themes), Bulma Customizer (Bespoke builds), bulma-fluent (Microsoft Fluent Design).
• Integrations: bulma-rails (Rails), Django Bulma (Django), Laravel Enso (Laravel).
• Utilities: bulma-helpers (Atomic CSS), Bulma-Social (Social buttons).

Bulma is a CSS-only framework. It provides a single output file (bulma.css) and contains no JavaScript.

This makes Bulma 'environment agnostic': it serves strictly as the style layer, allowing you to use your own JavaScript implementation for interactivity. You can use the compiled CSS 'out of the box' or download the Sass source files if you wish to customize the variables.

The .block class is a utility used to provide consistent vertical spacing between elements. When an element is given the .block class, it automatically applies a 1.5rem bottom margin, provided it is not the last child in its container.

This behavior is integrated into many Bulma components, allowing them to be spaced evenly when placed sequentially within a container. To disable this automatic spacing on a component, you can use margin utility classes like mb-0 (margin-bottom: 0).

<!-- Example of automatic spacing using Bulma components -->
<div class="block">
  <div class="notification is-success">
    Message with automatic bottom margin.
  </div>

  <nav class="pagination" role="navigation">
    <!-- This pagination will be spaced 1.5rem below the notification -->
    <a class="pagination-previous">Previous</a>
    <a class="pagination-next">Next</a>
  </nav>
</div>

Bulma uses CSS Variables (custom properties) for styling. These variables are scoped in two ways:

1. Global Scope: Defined at the :root level. These act as defaults for the entire application.
2. Component Scope: Defined within specific classes (e.g., .button).

Variables defined at a more specific component scope will override the global values. This allows you to customize a specific component without affecting the rest of the application.

:root {
  /* Default global value */
  --bulma-size-medium: 1.25rem;
}

.button {
  /* Overrides the global value for buttons only */
  --bulma-size-medium: 1.5rem;
}

In Bulma, a theme is a collection of CSS variables. Bulma provides two built-in themes:

• light.scss (required): The default theme that sets base values for all CSS variables.
• dark.scss (optional): An alternative theme for dark mode.

Bulma handles theme switching using three different mechanisms via the /sass/themes/_index.scss file:

1. Media Queries: Using @media (prefers-color-scheme: $name) to respect system settings.
2. HTML Attributes: Using the [data-theme=$name] attribute.
3. CSS Classes: Using the .theme-$name selector.

Bulma is designed for high customizability through an extensive system of Sass variables. There are approximately 415 Sass variables distributed across 28 files.

To ensure developers can effectively customize the framework, Bulma uses an automated process to keep its documentation in sync with the source code. A script parses the Sass source files and generates JSON data representing the variables. This allows the documentation to automatically display the variable name, its type, and its computed value (where applicable), ensuring that the documentation always reflects the current state of the source code.