Bulma Modularity

Bulma is built with modularity in mind. Instead of importing the entire framework, you can pick and choose only the components you need. This results in smaller CSS files and better performance.

Understanding Bulma's File Structure

Bulma is organized into several main directories:

bulma/
├── sass/
│   ├── base/           # Basic styles
│   ├── components/     # UI components
│   ├── elements/       # Basic elements
│   ├── form/          # Form elements
│   ├── grid/          # Grid system
│   ├── helpers/       # Helper classes
│   └── utilities/     # Sass utilities
└── css/
    └── bulma.css      # Complete compiled version

Selective Importing with Sass

Import only the parts you need:

Basic Setup

// 1. First import utilities
@import "bulma/sass/utilities/_all.sass";

// 2. Import base styles
@import "bulma/sass/base/_all.sass";

// 3. Import specific elements
@import "bulma/sass/elements/button.sass";
@import "bulma/sass/elements/title.sass";
@import "bulma/sass/elements/container.sass";

// 4. Import specific components
@import "bulma/sass/components/navbar.sass";
@import "bulma/sass/components/card.sass";

Complete Modular Example

// Import utilities first (required)
@import "bulma/sass/utilities/initial-variables";
@import "bulma/sass/utilities/functions";
@import "bulma/sass/utilities/derived-variables";
@import "bulma/sass/utilities/mixins";
@import "bulma/sass/utilities/controls";

// Import base styles
@import "bulma/sass/base/minireset";
@import "bulma/sass/base/generic";
@import "bulma/sass/base/helpers";

// Import specific elements
@import "bulma/sass/elements/box";
@import "bulma/sass/elements/button";
@import "bulma/sass/elements/container";
@import "bulma/sass/elements/content";
@import "bulma/sass/elements/icon";
@import "bulma/sass/elements/image";
@import "bulma/sass/elements/notification";
@import "bulma/sass/elements/progress";
@import "bulma/sass/elements/table";
@import "bulma/sass/elements/tag";
@import "bulma/sass/elements/title";

// Import form elements
@import "bulma/sass/form/shared";
@import "bulma/sass/form/input-textarea";
@import "bulma/sass/form/checkbox-radio";
@import "bulma/sass/form/select";
@import "bulma/sass/form/file";
@import "bulma/sass/form/tools";

// Import components
@import "bulma/sass/components/breadcrumb";
@import "bulma/sass/components/card";
@import "bulma/sass/components/dropdown";
@import "bulma/sass/components/menu";
@import "bulma/sass/components/message";
@import "bulma/sass/components/modal";
@import "bulma/sass/components/navbar";
@import "bulma/sass/components/pagination";
@import "bulma/sass/components/panel";
@import "bulma/sass/components/tabs";

// Import grid and layout
@import "bulma/sass/grid/columns";
@import "bulma/sass/layout/hero";
@import "bulma/sass/layout/section";
@import "bulma/sass/layout/footer";

Benefits of Modular Approach

File Size Comparison

Practical Example: Blog Setup

For a simple blog, you might only need:

// Blog-specific imports
@import "bulma/sass/utilities/_all";
@import "bulma/sass/base/_all";
@import "bulma/sass/elements/title";
@import "bulma/sass/elements/content";
@import "bulma/sass/elements/button";
@import "bulma/sass/components/navbar";
@import "bulma/sass/components/card";
@import "bulma/sass/layout/section";
@import "bulma/sass/layout/hero";

Best Practices

• Always import utilities first
• Import base styles after utilities
• Group imports by category for better organization
• Remove unused imports regularly
• Use Sass variables for consistent theming

Up next: Customizing Bulma with Sass Variables