Route Planner and Route Optimizer

Customize with Modular Sass

Import only what you need and customize it

You can import only what you need from Bulma, and customize it with your own Sass values.

To achieve this:

  • set your own Sass variables
  • import bulma/sass/utilities
  • override Bulma’s variables by providing the with keyword with your own Sass map
  • if you need to, do the same for the bulma/sass/form folder
  • import the Bulma components you need with either @use or @forward
  • finally, import the Bulma themes from bulma/sass/themes
// Set your brand colors
$purple: #8a4d76;
$pink: #fa7c91;
$brown: #757763;
$beige-light: #d0d1cd;
$beige-lighter: #eff0eb;

// Override global Sass variables from the /utilities folder
@use "bulma/sass/utilities" with (
  $family-primary: '"Nunito", sans-serif',
  $grey-dark: $brown,
  $grey-light: $beige-light,
  $primary: $purple,
  $link: $pink,
  $control-border-width: 2px

// Override Sass variables from the /form folder
@use "bulma/sass/form" with (
  $input-shadow: none

// Import the components you need
@forward "bulma/sass/base";
@forward "bulma/sass/components/card";
@forward "bulma/sass/components/modal";
@forward "bulma/sass/components/navbar";
@forward "bulma/sass/elements/button";
@forward "bulma/sass/elements/icon";
@forward "bulma/sass/elements/content";
@forward "bulma/sass/elements/notification";
@forward "bulma/sass/elements/progress";
@forward "bulma/sass/elements/tag";
@forward "bulma/sass/layout/footer";

// Import the themes so that all CSS variables have a value
@forward "bulma/sass/themes";

// Import the Google Font
@import url(",700");

This allows you to override Bulma’s:

  • global variables from the utilities folder
  • form variables from the form folder

If you wanted to import a component and customize it, do the same when importing it:

@use "bulma/sass/elements/image" with (
  $dimensions: 20 40 80 160;

How to support Bulma

#native_company# #native_desc#