Customize with Sass

boodoo is developed mobile-first with a modular Sass architecture. Customization happens via variables, maps, and mixins, so you can change colors, spacing, typography, and more without touching core files.

Variables

Every Sass variable in boodoo includes the !default flag, meaning you can override them by assigning your own values before importing boodoo. Here's a typical boodoo.scss:

// 1. Include functions, variables and mixins first (if importing individual parts)
@import "node_modules/boodoo/scss/functions";
@import "node_modules/boodoo/scss/variables";
@import "node_modules/boodoo/scss/maps";
@import "node_modules/boodoo/scss/mixins";
@import "node_modules/boodoo/scss/mixins/utility-api";

// 2. Here add your own overrides
$boodoo-primary: #7952b3;
$boodoo-danger: #e83e8c;
$boodoo-border-radius: 0.375rem;

// 3. Optionally include any of boodoo's parts
@import "node_modules/boodoo/scss/root";
@import "node_modules/boodoo/scss/reboot";
@import "node_modules/boodoo/scss/grid";

Maps and loops

boodoo uses Sass maps for its color system, spacers, breakpoints, and the utility API. Override a map to change many classes at once. For example, add a new theme color and every .bg-*, .text-*, and button variant is generated for you:

$boodoo-theme-colors: map.merge($boodoo-theme-colors, (
  "turquoise": #20c997,
));

Customizing components

Generated button variants, badge, alert, and other components will all pick up the new color automatically.