Build .pixel-perfect
sites with Bootscore

// SCSS Variables Example
// Override default Bootstrap values

$primary: #FF0000;
$font-family-sans-serif: 'Inter', sans-serif;
$border-radius: 1rem;

// Adjust container widths
$container-max-widths: (
  sm:   600px,
  md:   900px,
  lg:   1200px,
  xl:   1340px,
  xxl:  1620px
);

// Disable dark mode and change navbar color
$enable-dark-mode:    false;
$navbar-light-color:  #339900;

// Custom Utilities Example
// Add extra rounded sizes

$utilities: map-merge(
  $utilities,
  (
    "rounded": (
      responsive: true,
      property: border-radius,
      class: rounded,
      values: (
        null: var(--#{$prefix}border-radius),
        0: 0,
        lg: var(--#{$prefix}border-radius-lg),
        xl: var(--#{$prefix}border-radius-xl)
      )
    )
  )
);

// Custom SCSS Example
// Responsive body style
@include media-breakpoint-up(md) {
  body {
    color: var(--#{$prefix}success);
    background-color: var(--#{$prefix}light);
  }
}

// Custom button
.btn-red {
  @include button-variant(#ef4444, #ef4444);
}

// Extend Bootstrap button
.plugin-button-class {
  @extend .btn;
  @extend .btn-primary;
}

// Change container class in a single file
function change_container_in_single_file($string, $location) {
  if ($location == 'header') {
    return "container-fluid";
  }
  return $string;
}
add_filter('bootscore/class/container', 'change_container_in_single_file', 10, 2);

// Change all header buttons
function header_button_class() {
  return "btn btn-light";
}
add_filter('bootscore/class/header/button', 'header_button_class', 10, 2);
// Change nav-toggler icon
function change_nav_toggler_icon() {
  return '<i class="fa-solid fa-ellipsis-vertical"></i>';
}
add_filter('bootscore/icon/menu', 'change_nav_toggler_icon');

// Add an alert message before the #masthead on frontpage
function add_alert_before_masthead() {
  if (is_front_page() || is_home()) {
    echo '<div class="alert alert-danger" role="alert">This is an important message!</div>';
  }
}
add_action('bootscore_before_masthead', 'add_alert_before_masthead');

// Open a div after #masthead
function open_div_after_masthead() {
  echo '<div class="bg-success text-danger">';
}
add_action('bootscore_after_masthead', 'open_div_after_masthead');

// Close div before footer
function close_div_before_footer() {
  echo '</div>';
}
add_action('bootscore_before_footer', 'close_div_before_footer');