{"id":10600,"library":"bulma","title":"Bulma CSS Framework","description":"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.","status":"active","version":"1.0.4","language":"javascript","source_language":"en","source_url":"https://github.com/jgthms/bulma","tags":["javascript","css","sass","scss","flexbox","grid","responsive","framework"],"install":[{"cmd":"npm install bulma","lang":"bash","label":"npm"},{"cmd":"yarn add bulma","lang":"bash","label":"yarn"},{"cmd":"pnpm add bulma","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required to compile Bulma's Sass source files for customization; typically a build or dev dependency.","package":"sass","optional":true}],"imports":[{"note":"This imports the compiled, minified CSS for direct use in a JavaScript/TypeScript project with a module bundler. For HTML, link the file directly.","symbol":"bulma.min.css","correct":"import 'bulma/css/bulma.min.css';"},{"note":"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.","wrong":"@import 'bulma';","symbol":"bulma.sass","correct":"@import 'bulma/bulma.sass';"},{"note":"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/`.","wrong":"@import 'bulma/elements/button';","symbol":"elements/button.sass","correct":"@import 'bulma/sass/elements/button.sass';"}],"quickstart":{"code":"import 'bulma/css/bulma.min.css';\n\n// For custom Sass, create a file like `src/styles/custom-bulma.scss`:\n// $primary: #00d1b2; // A custom primary color\n// @import 'bulma/bulma.sass';\n// Then, import it here instead of `bulma/css/bulma.min.css`:\n// import '../styles/custom-bulma.scss';\n\n// This JavaScript demonstrates adding content that will be styled by Bulma.\n// Ensure your HTML has a basic structure for Bulma classes to apply.\ndocument.addEventListener('DOMContentLoaded', () => {\n    const root = document.createElement('div');\n    root.className = 'section';\n    root.innerHTML = `\n        <div class=\"container\">\n            <h2 class=\"title is-2\">Dynamic Content</h2>\n            <p class=\"content\">This content was added dynamically using JavaScript, styled by Bulma.</p>\n            <button class=\"button is-danger\">Dynamic Button</button>\n            <div class=\"columns is-mobile mt-4\">\n                <div class=\"column is-half-mobile is-one-quarter-desktop\">\n                    <div class=\"box has-background-info-light\">Column 1</div>\n                </div>\n                <div class=\"column is-half-mobile is-one-quarter-desktop\">\n                    <div class=\"box has-background-warning-light\">Column 2</div>\n                </div>\n            </div>\n        </div>\n    `;\n    document.body.appendChild(root);\n});","lang":"typescript","description":"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."},"warnings":[{"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.","message":"Bulma 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.","severity":"breaking","affected_versions":">=1.0.0"},{"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.","message":"Sass placeholders (e.g., `%control`, `%unselectable`) were moved from `utilities/mixins` to `utilities/extends` to fix duplicate imports.","severity":"breaking","affected_versions":">=0.9.2"},{"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.","message":"The `base/helpers.sass` file and the `list` component (`components/list.sass`) were deprecated and removed.","severity":"deprecated","affected_versions":">=0.9.0"},{"fix":"Integrate your preferred JavaScript library or write custom JavaScript to handle the interactive behavior of Bulma components. Bulma focuses solely on styling.","message":"Bulma is a CSS-only framework and does not include any JavaScript. Interactive components (e.g., dropdowns, modals, navigation toggles) require a separate JavaScript implementation.","severity":"gotcha","affected_versions":">=0.9.0"},{"fix":"Upgrade to Bulma `1.0.3` or newer to resolve Sass 1.80 deprecation warnings.","message":"Older 1.x versions (prior to 1.0.3) might have shown Sass 1.80 deprecation warnings related to global built-in functions.","severity":"gotcha","affected_versions":"1.0.0 - 1.0.2"},{"fix":"Ensure you are using Bulma `1.0.3` or newer to correctly apply prefixes to helper classes.","message":"Helper classes might have been missing prefixes in earlier 1.x versions (prior to 1.0.3).","severity":"gotcha","affected_versions":"1.0.0 - 1.0.2"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"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.","cause":"Attempting to import Sass placeholders from the deprecated `utilities/mixins` path after Bulma v0.9.2.","error":"Error: File to import not found or unreadable: bulma/sass/utilities/mixins.sass"},{"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.","cause":"Using an outdated Sass compiler or incorrect syntax when trying to compile Bulma's Dart Sass-based source files after v1.0.0.","error":"Error: @use rules must be written at the top of the file. (Dart Sass)"},{"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`.","cause":"Your module bundler (e.g., Webpack, Rollup) cannot locate the Bulma CSS file within `node_modules`.","error":"Module not found: Error: Can't resolve 'bulma/css/bulma.css'"},{"fix":"Update your Sass imports from `@import 'bulma/sass/base/helpers.sass';` to `@import 'bulma/sass/helpers/_all.sass';`.","cause":"You are importing the deprecated `base/helpers.sass` file, which was superseded in Bulma v0.9.0.","error":"Deprecation Warning: This module is deprecated: please use 'sass/helpers/_all.sass' instead."}],"ecosystem":"npm"}