Modularity in Bulma

Just import what you need

Bulma consists of elements and components defined in dozens of .scss files, that you can load individually with the @use keyword.

@use "path/to/file.scss";

While this will correctly load the target file's styles, most Bulma components rely on base styles and CSS variables defined by the default themes.

That is why it's preferable to also load the sass/base folder and the sass/themes folder:

// Load Bulma's base styles and themes (including the minireset)
@use "bulma/sass/base";
@use "bulma/sass/themes";

// Load other Bulma components
@use "bulma/sass/elements/button";
@use "bulma/sass/components/message";

Importing columns #

Layout features like Bulma's columns don't rely on CSS variables defined by Bulma themes. As a result, you can load them directly without requiring any additional file.

For example, importing Bulma columns only requires to load the file located in the bulma/sass/grid folder.

Simply load the columns.scss file with the @use keyword

// Only load the columns
@use "bulma/sass/grid/columns";

Now you can use the classes .columns (for the container) and .column directly:

<div class="columns">
  <div class="column">1</div>
  <div class="column">2</div>
  <div class="column">3</div>
  <div class="column">4</div>
  <div class="column">5</div>
</div>

Importing Bulma elements and components #

To load Bulma elements like the .button and components like the .message, it's preferable to also load the base styles and default themes.

// Load Bulma's base styles and themes (including the minireset)
@use "bulma/sass/base";
@use "bulma/sass/themes";

// Load the button and title elements and components
@use "bulma/sass/elements/button";
@use "bulma/sass/elements/title";
@use "bulma/sass/components/message";

You can now use the .button class, and all its modifiers:

.is-active
.is-primary, .is-info, .is-success...
.is-small, .is-medium, .is-large
.is-outlined, .is-inverted, .is-link
.is-loading, [disabled]

<button class="button">Button</button>
<button class="button is-primary">Primary button</button>
<button class="button is-large">Large button</button>
<button class="button is-loading">Loading button</button>

Importing with custom Sass variables #

Most Bulma components are configured with Sass variables. For example, the .section layout component uses 4 variables to define its padding:

$section-padding: 3rem 1.5rem !default;
$section-padding-desktop: 3rem 3rem !default;
$section-padding-medium: 9rem 4.5rem !default;
$section-padding-large: 18rem 6rem !default;

The @use keyword allows use to configure a module when loading it with our own variables:

// Load the section component with custom variables
@use "bulma/sass/layout/section" with (
  $section-padding: 3rem,
  $section-padding-desktop: 4.5rem
);

Start Here

Features

Sass Tools

Customization

CSS Library

CSS Helpers

Modularity in Bulma

Just import what you need

Importing columns #

Importing Bulma elements and components #

Importing with custom Sass variables #

How to support Bulma