Bulma Customization

Bulma is highly customizable through Sass variables. You can easily change colors, fonts, spacing, and more to match your brand identity.

Setting Up Custom Variables

Create a custom Sass file to override default variables:

// custom.scss
// 1. Import Bulma utilities first
@import "bulma/sass/utilities/initial-variables";
@import "bulma/sass/utilities/functions";

// 2. Define your custom variables
$primary: #ff3860;
$success: #23d160;
$warning: #ffdd57;
$danger: #ff3860;
$dark: #363636;

// Custom colors
$custom-colors: (
  "twitter": (#1da1f2, #0d8bd9),
  "github": (#333, #222)
);

// Typography
$family-sans-serif: "Inter", "Segoe UI", Roboto, sans-serif;
$family-monospace: "Fira Code", monospace;

// Spacing
$gap: 32px;
$tablet: 768px;
$desktop: 1024px;

// 3. Import the rest of Bulma
@import "bulma/sass/utilities/derived-variables";
@import "bulma/sass/utilities/mixins";
@import "bulma/sass/utilities/controls";

// 4. Merge custom colors
$colors: mergeColorMaps($colors, $custom-colors);

// 5. Import the rest of Bulma
@import "bulma";

Color Customization

Bulma provides a comprehensive color system:

Primary Colors

// Change primary colors
$primary: #00d1b2;
$info: #3273dc;
$success: #23d160;
$warning: #ffdd57;
$danger: #ff3860;
$light: #f5f5f5;
$dark: #363636;

Custom Color Palette

// Add custom colors
$custom-colors: (
  "purple": ($purple, $purple-dark),
  "orange": ($orange, $orange-dark),
  "twitter": (#1da1f2, #0d8bd9),
  "github": (#333, #222),
  "linkedin": (#0077b5, #00629c)
);

// Merge with existing colors
$colors: mergeColorMaps($colors, $custom-colors);

Typography Customization

// Font families
$family-sans-serif: "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
$family-monospace: "Fira Code", "Consolas", "Monaco", monospace;

// Font sizes
$size-1: 3rem;    // h1
$size-2: 2.5rem;  // h2
$size-3: 2rem;    // h3
$size-4: 1.5rem;  // h4
$size-5: 1.25rem; // h5
$size-6: 1rem;    // h6
$size-7: 0.75rem; // small

// Font weights
$weight-light: 300;
$weight-normal: 400;
$weight-medium: 500;
$weight-semibold: 600;
$weight-bold: 700;

Spacing and Sizing

// Responsive breakpoints
$gap: 32px;
$tablet: 768px;
$desktop: 1024px;
$widescreen: 1216px;
$fullhd: 1408px;

// Container max widths
$container-offset: 32px;
$container-max-width: $fullhd;

// Spacing scale
$spacing-shortcuts: ("margin": "m", "padding": "p");
$spacing-directions: ("top": "t", "right": "r", "bottom": "b", "left": "l");
$spacing-horizontal: "x";
$spacing-vertical: "y";
$spacing-values: ("0": 0, "1": 0.25rem, "2": 0.5rem, "3": 0.75rem, "4": 1rem, "5": 1.5rem, "6": 3rem);

Component Customization

Buttons

// Button customization
$button-color: $white;
$button-background-color: $primary;
$button-border-color: $primary;
$button-hover-color: $white;
$button-hover-border-color: $primary-dark;
$button-focus-color: $white;
$button-active-color: $white;

// Button sizes
$button-padding-vertical: 0.5em;
$button-padding-horizontal: 1em;

Navbar

// Navbar customization
$navbar-height: 4rem;
$navbar-item-color: $text;
$navbar-item-hover-color: $primary;
$navbar-item-hover-background-color: $white-bis;
$navbar-dropdown-arrow: $primary;

Cards

// Card customization
$card-color: $text;
$card-background-color: $white;
$card-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1);
$card-header-shadow: 0 1px 2px rgba($black, 0.1);
$card-footer-border-top: 1px solid $border;

Creating a Dark Theme

// Dark theme variables
$dark-bg: #1a1a1a;
$dark-text: #e0e0e0;
$dark-border: #333;

$scheme-main: $dark-bg;
$scheme-main-bis: #242424;
$scheme-main-ter: #2d2d2d;
$background: $dark-bg;
$border: $dark-border;
$text: $dark-text;
$text-strong: #ffffff;

// Import Bulma after custom variables
@import "bulma";

Utility Classes Customization

// Custom utility classes
$radius: 0.5rem;
$radius-small: 0.25rem;
$radius-medium: 0.75rem;
$radius-large: 1rem;

// Shadows
$shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
$shadow-medium: 0 4px 8px rgba(0, 0, 0, 0.12);
$shadow-large: 0 8px 16px rgba(0, 0, 0, 0.15);

Complete Customization Example

// _custom-variables.scss
@import "bulma/sass/utilities/initial-variables";
@import "bulma/sass/utilities/functions";

// Brand colors
$primary: #667eea;
$primary-dark: #5a6fd8;
$secondary: #764ba2;

// Custom colors
$custom-colors: (
  "gradient": (linear-gradient(135deg, $primary 0%, $secondary 100%), $primary-dark),
  "discord": (#7289da, #5b73c4)
);

// Typography
$family-sans-serif: "Poppins", sans-serif;
$body-size: 16px;

// Layout
$gap: 24px;
$radius: 8px;

// Components
$navbar-height: 5rem;
$button-padding-vertical: 0.75em;
$button-padding-horizontal: 1.5em;

@import "bulma/sass/utilities/derived-variables";
$colors: mergeColorMaps($colors, $custom-colors);
@import "bulma";

Best Practices

• Create a separate file for custom variables
• Use meaningful variable names
• Maintain color contrast for accessibility
• Test your theme on multiple devices
• Document your custom variables

Up next: Bulma Columns - Flexible Grid System