bulma

library1.0.1jsnpmunverified

Bulma is a modern, open-source CSS framework built entirely on Flexbox, providing a responsive and mobile-first design system. Currently at version 1.0.4, it undergoes active development with frequent bug fixes and feature enhancements, as evidenced by multiple patch releases within the 1.x series. A key differentiator is its "CSS only" philosophy, meaning it ships without any JavaScript, allowing developers to integrate their preferred front-end logic. It focuses solely on the styling layer, making it "environment agnostic." Bulma offers a comprehensive set of CSS components and utilities, and while it provides a compiled `bulma.css` file, it is highly customizable through its Sass source files, particularly since its rewrite in v1.0.0 to use Dart Sass. The framework is designed for ease of use, maintaining consistent HTML snippets across major versions to simplify upgrades.

web-framework

npm install bulma

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · BULMA

bulma

web-frameworkjavascriptv1.0.1

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

bulma.min.css

✓ import 'bulma/css/bulma.min.css';

This imports the compiled, minified CSS for direct use in a JavaScript/TypeScript project with a module bundler. For HTML, link the file directly.

bulma.sass

✓ @import 'bulma/bulma.sass';

✗ @import 'bulma';

This is the entry point for customizing Bulma via Sass variables and compiling your own CSS. Requires a Sass preprocessor (like Dart Sass) in your build chain. The `wrong` example might not resolve correctly depending on Sass loader configuration.

elements/button.sass

✓ @import 'bulma/sass/elements/button.sass';

✗ @import 'bulma/elements/button';

For a modular approach, import specific Sass partials to reduce final CSS size. Ensure your Sass loader's include paths are configured correctly to resolve `bulma/`.

Demonstrates how to integrate Bulma's CSS into a modern TypeScript project using a module bundler, either by importing the pre-compiled CSS or by customizing and importing its Sass source files. It also includes a basic JS snippet to show dynamic content creation with Bulma classes.

import 'bulma/css/bulma.min.css'; // For custom Sass, create a file like `src/styles/custom-bulma.scss`: // $primary: #00d1b2; // A custom primary color // @import 'bulma/bulma.sass'; // Then, import it here instead of `bulma/css/bulma.min.css`: // import '../styles/custom-bulma.scss'; // This JavaScript demonstrates adding content that will be styled by Bulma. // Ensure your HTML has a basic structure for Bulma classes to apply. document.addEventListener('DOMContentLoaded', () => { const root = document.createElement('div'); root.className = 'section'; root.innerHTML = ` <div class="container"> <h2 class="title is-2">Dynamic Content</h2> <p class="content">This content was added dynamically using JavaScript, styled by Bulma.</p> <button class="button is-danger">Dynamic Button</button> <div class="columns is-mobile mt-4"> <div class="column is-half-mobile is-one-quarter-desktop"> <div class="box has-background-info-light">Column 1</div> </div> <div class="column is-half-mobile is-one-quarter-desktop"> <div class="box has-background-warning-light">Column 2</div> </div> </div> </div> `; document.body.appendChild(root); });

Debug

Known issues

breakingBulma v1.0.0 was a full rewrite of the framework using Dart Sass. While HTML markup remains consistent, projects extensively customizing Bulma via Sass should ensure their build pipeline uses Dart Sass and review custom Sass for compatibility.

fix

Migrate your Sass compiler to Dart Sass (e.g., `sass` npm package) and review your custom Sass for any breaking changes in Sass language features. The core HTML markup is unchanged, easing transition.

affects: >=1.0.0

breakingSass placeholders (e.g., `%control`, `%unselectable`) were moved from `utilities/mixins` to `utilities/extends` to fix duplicate imports.

fix

If directly importing Sass placeholders from `bulma/sass/utilities/mixins.sass`, update the import path to `bulma/sass/utilities/extends.sass`. Importing `bulma/sass/_all.sass` or `bulma/bulma.sass` does not require a change.

affects: >=0.9.2

deprecatedThe `base/helpers.sass` file and the `list` component (`components/list.sass`) were deprecated and removed.

fix

Replace imports of `bulma/sass/base/helpers.sass` with `bulma/sass/helpers/_all.sass`. The `list` component file has been deleted; migrate its usage to alternative Bulma components or custom CSS.

affects: >=0.9.0

gotchaBulma is a CSS-only framework and does not include any JavaScript. Interactive components (e.g., dropdowns, modals, navigation toggles) require a separate JavaScript implementation.

fix

Integrate your preferred JavaScript library or write custom JavaScript to handle the interactive behavior of Bulma components. Bulma focuses solely on styling.

affects: >=0.9.0

gotchaOlder 1.x versions (prior to 1.0.3) might have shown Sass 1.80 deprecation warnings related to global built-in functions.

fix

Upgrade to Bulma `1.0.3` or newer to resolve Sass 1.80 deprecation warnings.

affects: 1.0.0 - 1.0.2

gotchaHelper classes might have been missing prefixes in earlier 1.x versions (prior to 1.0.3).

fix

Ensure you are using Bulma `1.0.3` or newer to correctly apply prefixes to helper classes.

affects: 1.0.0 - 1.0.2

Errors

Common errors & fixes

Error: File to import not found or unreadable: bulma/sass/utilities/mixins.sass

Attempting to import Sass placeholders from the deprecated `utilities/mixins` path after Bulma v0.9.2.

fix

Change `@import 'bulma/sass/utilities/mixins.sass';` to `@import 'bulma/sass/utilities/extends.sass';` for placeholders, or rely on importing `bulma/bulma.sass` directly.

Error: @use rules must be written at the top of the file. (Dart Sass)

Using an outdated Sass compiler or incorrect syntax when trying to compile Bulma's Dart Sass-based source files after v1.0.0.

fix

Ensure your project uses a recent version of Dart Sass (the `sass` npm package) for compilation and review your custom Sass files for any syntax incompatibilities.

Module not found: Error: Can't resolve 'bulma/css/bulma.css'

Your module bundler (e.g., Webpack, Rollup) cannot locate the Bulma CSS file within `node_modules`.

fix

Verify `npm install bulma` completed successfully. Ensure your bundler configuration includes appropriate loaders (e.g., `css-loader` and `style-loader` for Webpack) and path resolvers to locate files within `node_modules`.

Deprecation Warning: This module is deprecated: please use 'sass/helpers/_all.sass' instead.

You are importing the deprecated `base/helpers.sass` file, which was superseded in Bulma v0.9.0.

fix

Update your Sass imports from `@import 'bulma/sass/base/helpers.sass';` to `@import 'bulma/sass/helpers/_all.sass';`.

Upgrade

Version history

1.0.1latest on npm

Audit

Dependencies

sassoptionalRequired to compile Bulma's Sass source files for customization; typically a build or dev dependency.

Agent activity

12 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/jgthms/bulma ↗

packagehttps://www.npmjs.com/package/bulma ↗

homepagehttps://bulma.io ↗