How to create themed Bootstrap components with Sass

Cameron

January 20th, 2016

Bootstrap is an essential tool for designers and front-end developers. It is packed with a variety of useful components, including grid systems and CSS styles, that can be easily extended and customized. When using Bootstrap, we often run into a situation in which we would like to use our own branding or theme variations instead of what Bootstrap offers by default. In this article, we’ll look at how to leverage Bootstrap with Sass to approach creating and extending themed Bootstrap components.

Bootstrap Variants

Bootstrap offers six different variations of components, which are based on different types of states an application might be in. For example, you may have a .label-default or .label-primary, which would be two different types, or you might have an .alert-success, which would be based on the state of the application. Depending on the application you’re building, you may or may not need these variations. Let’s look at how you might use these variants in Sass.

Theme Variables

With the Sass version of Bootstrap, you can customize variables, leverage component partials, and extend existing mixins to create variations that fit your website or application’s brand. To get started with a custom theme, let’s open the _variables.scss partial and find the variables that begin with $brand. Here we can customize our color palette to fit our brand and even utilize Sass functions like darken($color, $amount) or lighten($color, $amount) to adjust the percentage of color lightness. Let’s change these values to the following:

$brand-primary: darken(#5733B7, 6.5%);
$brand-success: #3C9514;
$brand-info: #C88ED9;
$brand-warning: #E1D241;
$brand-danger: #C84D17;

Buttons

One of the most important elements on our webpage that helps to denote our brand is the button. Let’s customize our buttons using the Sass variables and variant mixins included with Bootstrap. First we can decide what variables we’ll need for each variant. By default Bootstrap gives you the color, background, and border. Let’s change the defaults to something that fits our buttons:

$btn-default-color: #5733B7;
$btn-default-bg: #ffffff;
$btn-default-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2);

With our variables in place, let’s open up _buttons.scss and go to the Alternate buttons section. Here we can see that each class defines a button variation and uses Bootstrap’s button-variant mixin. Since we’ve modified the variables we’ll be using for our buttons, let’s also change the button-variant mixin arguments within mixins/_buttons.scss.

@mixin button-variant($color, $background, $shadow) {
 color: $color;
 background-color: $background;
  box-shadow: $shadow;
 &:hover,
 &:focus,
 &.focus,
 &:active,
 &.active,
 .open > &.dropdown-toggle {
  color: $color;
  background-color: darken($background, 10%);
 }
 &:active,
 &.active,
 .open > &.dropdown-toggle {
 background-image: none;
}
}

Now we can use our new button-variant to create custom buttons that fit our theme:

.btn-default {
@include button-variant($btn-default-color, $btndefault-
bg, $btn-default-box-shadow);
}

Forms

Another common set of elements that you might want to customize are form inputs. Bootstrap has a shared .form-control class that can be modified for this purpose and a few different mixins that help you to style the sizes and validation states. Let’s take a look at a few ways you might create themed form elements.

First, in _forms.scss, let’s remove the border-radius, box-shadow, and border from .form-control. Remember, good design doesn’t always need to add something, and often is about removing what’s not needed. This class’s styles will be shared across all our form elements.

.form-control {
  display: block;
  width: 100%;
  height: $input-height-base;
  padding: $padding-base-vertical $padding-basehorizontal;
  font-size: $font-size-base;
  line-height: $line-height-base;
  color: $input-color;
  background-color: $input-bg;
  background-image: none;
  @include transition(border-color ease-in-out .15s,
  box-shadow ease-in-out .15s);
  @include form-control-focus;
  // Placeholder
  @include placeholder;
  &[disabled],
  &[readonly],
  fieldset[disabled] & {
  background-color: $input-bg-disabled;
  opacity: 1;
  }
  &[disabled],
  fieldset[disabled] & {
  cursor: $cursor-disabled;
  }
}

Next, let’s look at adjusting two mixins for our forms in mixins/_forms.scss. Here we’ll remove the box-shadow from each input’s :focused state and the border-radius from each input’s size.

@mixin form-control-focus($color: $input-border-focus) {
 &:focus {
  border-color: $color;
  outline: 0;
  }
}
@mixin input-size($parent, $input-height, $paddingvertical,
$padding-horizontal, $font-size, $line-height)
{
  #{$parent} {
  height: $input-height;
  padding: $padding-vertical $padding-horizontal;
  font-size: $font-size;
  line-height: $line-height;
}
  select#{$parent} {
  height: $input-height;
  line-height: $input-height;
}
  textarea#{$parent},
  select[multiple]#{$parent} {
  height: auto;
 }
}

Conclusion

Leveraging variables and mixins in Sass will help to speed up your design workflow and make future changes simple. Whether you’re building a marketing site or full style guide for a web application, using Sass with Bootstrap can give you the power and flexibility to create custom, themed components.

About the author

Cameron is a freelance web designer, developer, and consultant based in Brooklyn, NY. Whether he’s shipping a new MVP feature for an early-stage startup or harnessing the power of cutting-edge technologies with a digital agency, his specialities in UX, Agile, and Front-end Development unlock the possibilities that help his clients thrive. He blogs about design, development, and entrepreneurship and is often tweeting something clever at @cameronjroe.

Start Thinking in CSS

Get started with the fundamentals of web design. Download this free tutorial and get to know CSS.
comments powered by Disqus