Mixins

UTILITY MIXINS

Clearfix

For clearing floats like a boss h5bp.com/q

Webkit-style focus

Center-align a block level element

IE7 inline-block

IE7 likes to collapse whitespace on either side of the inline-block elements. Ems because we're attempting to match the width of a space character. Left version is for form buttons, which typically come after other elements, and right version is for icons, which come before. Applying both is ok, but it will mean that space between those elements will be .6em (~2 space characters) in IE7, instead of the 1 space in other browsers.

Sizing shortcuts

Placeholder text

Text overflow

Requires inline-block or block for proper styling

CSS image replacement

Source: https://github.com/h5bp/html5-boilerplate/commit/aa0396eae757

FONTS

FORMS

Block level inputs

Mixin for form field states

CSS3 PROPERTIES

Border Radius

Single Corner Border Radius

Single Side Border Radius

Drop shadows

Transitions

Transformations

Backface visibility Prevent browsers from flickering when using CSS 3D transforms. Default value is visible, but can be changed to `hidden See git pull https://github.com/dannykeane/bootstrap.git backface-visibility for examples

Background clipping Heads up: FF 3.6 and under need "padding" instead of "padding-box"

Background sizing

Box sizing

User select For selecting text on the page

Resize anything

CSS3 Content Columns

Optional hyphenation

Opacity

BACKGROUNDS

Add an alphatransparency value to any background or border color (via Elyse Holladay)

Gradient Bar Colors for buttons and alerts

Gradients

Reset filters for IE

COMPONENT MIXINS

Horizontal dividers

Dividers (basically an hr) within dropdowns and nav lists

Button backgrounds

Vertically center elements in the navbar. Example: an element has a height of 30px, so write out .navbarVerticalAlign(30px); to calculate the appropriate top margin.

Grid System

Centered container element

Table columns

Make a Grid Use .makeRow and .makeColumn to assign semantic layouts grid system behavior

The Grid

@mixin clearfix {
  *zoom: 1;
  &:before,
  &:after {
    display: table;
    content: "";
    // Fixes Opera/contenteditable bug:
    // http://nicolasgallagher.com/micro-clearfix-hack/#comment-36952
    line-height: 0;
  }
  &:after {
    clear: both;
  }
}

@mixin tab-focus() {
  // Default
  outline: thin dotted #333;
  // Webkit
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px;
}

@mixin center-block() {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

@mixin ie7-inline-block() {
  *display: inline; // IE7 inline-block hack
  *zoom: 1;
}

@mixin ie7-restore-left-whitespace() {
  *margin-left: .3em;

  &:first-child {
    *margin-left: 0;
  }
}

@mixin ie7-restore-right-whitespace() {
  *margin-right: .3em;
}

@mixin size($height, $width) {
  width: $width;
  height: $height;
}
@mixin square($size) {
  @include size($size, $size);
}

@mixin placeholder($color: $placeholderText) {
  &:-moz-placeholder {
    color: $color;
  }
  &:-ms-input-placeholder {
    color: $color;
  }
  &::-webkit-input-placeholder {
    color: $color;
  }
}

@mixin text-overflow() {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@mixin hide-text {
  font: 0/0 a;
  color: transparent;
  text-shadow: none;
  background-color: transparent;
  border: 0;
}


@mixin font-family-serif() {
  font-family: $serifFontFamily;
}
@mixin font-family-sans-serif() {
  font-family: $sansFontFamily;
}
@mixin font-family-monospace() {
  font-family: $monoFontFamily;
}
@mixin font-shorthand($size: $baseFontSize, $weight: normal, $lineHeight: $baseLineHeight) {
  font-size: $size;
  font-weight: $weight;
  line-height: $lineHeight;
}
@mixin font-serif($size: $baseFontSize, $weight: normal, $lineHeight: $baseLineHeight) {
  @include font-family-serif();
  @include font-shorthand($size, $weight, $lineHeight);
}
@mixin font-sans-serif($size: $baseFontSize, $weight: normal, $lineHeight: $baseLineHeight) {
  @include font-family-sans-serif();
  @include font-shorthand($size, $weight, $lineHeight);
}
@mixin font-monospace($size: $baseFontSize, $weight: normal, $lineHeight: $baseLineHeight) {
  @include font-family-monospace();
  @include font-shorthand($size, $weight, $lineHeight);
}



@mixin input-block-level {
  display: block;
  width: 100%;
  min-height: 30px;                // Make inputs at least the height of their button counterpart
  @include box-sizing(border-box); // Makes inputs behave like true block-level elements
}



@mixin formFieldState($textColor: #555, $borderColor: #ccc, $backgroundColor: #f5f5f5) {
  // Set the text color
  > label,
  .help-block,
  .help-inline {
    color: $textColor;
  }
  // Style inputs accordingly
  .checkbox,
  .radio,
  input,
  select,
  textarea {
    color: $textColor;
    border-color: $borderColor;
    @include box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); // Redeclare so transitions work
    &:focus {
      border-color: darken($borderColor, 10%);
      // Write out in full since the lighten() function isn't easily escaped
      -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px lighten($borderColor, 20%);
         -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px lighten($borderColor, 20%);
              box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px lighten($borderColor, 20%);
    }
  }
  // Give a small background color for input-prepend/-append
  .input-prepend .add-on,
  .input-append .add-on {
    color: $textColor;
    background-color: $backgroundColor;
    border-color: $textColor;
  }
}




@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
          border-radius: $radius;
}

@mixin border-top-left-radius($radius) {
  -webkit-border-top-left-radius: $radius;
      -moz-border-radius-topleft: $radius;
          border-top-left-radius: $radius;
}
@mixin border-top-right-radius($radius) {
  -webkit-border-top-right-radius: $radius;
      -moz-border-radius-topright: $radius;
          border-top-right-radius: $radius;
}
@mixin border-bottom-right-radius($radius) {
  -webkit-border-bottom-right-radius: $radius;
      -moz-border-radius-bottomright: $radius;
          border-bottom-right-radius: $radius;
}
@mixin border-bottom-left-radius($radius) {
  -webkit-border-bottom-left-radius: $radius;
      -moz-border-radius-bottomleft: $radius;
          border-bottom-left-radius: $radius;
}

@mixin border-top-radius($radius) {
  @include border-top-right-radius($radius);
  @include border-top-left-radius($radius);
}
@mixin border-right-radius($radius) {
  @include border-top-right-radius($radius);
  @include border-bottom-right-radius($radius);
}
@mixin border-bottom-radius($radius) {
  @include border-bottom-right-radius($radius);
  @include border-bottom-left-radius($radius);
}
@mixin border-left-radius($radius) {
  @include border-top-left-radius($radius);
  @include border-bottom-left-radius($radius);
}

@mixin box-shadow($shadow) {
  -webkit-box-shadow: $shadow;
     -moz-box-shadow: $shadow;
          box-shadow: $shadow;
}

@mixin transition($transition) {
  -webkit-transition: $transition;
     -moz-transition: $transition;
       -o-transition: $transition;
          transition: $transition;
}

@mixin rotate($degrees) {
  -webkit-transform: rotate($degrees);
     -moz-transform: rotate($degrees);
      -ms-transform: rotate($degrees);
       -o-transform: rotate($degrees);
          transform: rotate($degrees);
}
@mixin scale($ratio) {
  -webkit-transform: scale($ratio);
     -moz-transform: scale($ratio);
      -ms-transform: scale($ratio);
       -o-transform: scale($ratio);
          transform: scale($ratio);
}
@mixin translate($x, $y) {
  -webkit-transform: translate($x, $y);
     -moz-transform: translate($x, $y);
      -ms-transform: translate($x, $y);
       -o-transform: translate($x, $y);
          transform: translate($x, $y);
}

@mixin skew($x, $y) {
  -webkit-transform: skew($x, $y);
     -moz-transform: skew($x, $y);
      -ms-transform: skew($x, $y);
       -o-transform: skew($x, $y);
          transform: skew($x, $y);
}

@mixin translate3d($x, $y, $z) {
  -webkit-transform: translate3d($x, $y, $z);
     -moz-transform: translate3d($x, $y, $z);
       -o-transform: translate3d($x, $y, $z);
          transform: translate3d($x, $y, $z);
}

@mixin backface-visibility($visibility){
  -webkit-backface-visibility: $visibility;
     -moz-backface-visibility: $visibility;
          backface-visibility: $visibility;
}

@mixin background-clip($clip) {
  -webkit-background-clip: $clip;
     -moz-background-clip: $clip;
          background-clip: $clip;
}

@mixin background-size($size) {
  -webkit-background-size: $size;
     -moz-background-size: $size;
       -o-background-size: $size;
          background-size: $size;
}


@mixin box-sizing($boxmodel) {
  -webkit-box-sizing: $boxmodel;
     -moz-box-sizing: $boxmodel;
          box-sizing: $boxmodel;
}

@mixin user-select($select) {
  -webkit-user-select: $select;
     -moz-user-select: $select;
      -ms-user-select: $select;
       -o-user-select: $select;
          user-select: $select;
}

@mixin resizable($direction) {
  resize: $direction; // Options: horizontal, vertical, both
  overflow: auto; // Safari fix
}

@mixin content-columns($columnCount, $columnGap: $gridGutterWidth) {
  -webkit-column-count: $columnCount;
     -moz-column-count: $columnCount;
          column-count: $columnCount;
  -webkit-column-gap: $columnGap;
     -moz-column-gap: $columnGap;
          column-gap: $columnGap;
}

@mixin hyphens($mode: auto) {
  word-wrap: break-word;
  -webkit-hyphens: $mode;
     -moz-hyphens: $mode;
      -ms-hyphens: $mode;
       -o-hyphens: $mode;
          hyphens: $mode;
}

@mixin opacity($opacity) {
  opacity: $opacity / 100;
  filter: alpha(opacity=$opacity);
}




@mixin translucent-background($color: $white, $alpha: 1) {
  background-color: hsla(hue($color), saturation($color), lightness($color), $alpha);
}

@mixin translucent-border($color: $white, $alpha: 1) {
  border-color: hsla(hue($color), saturation($color), lightness($color), $alpha);
  @include background-clip(padding-box);
}

@mixin gradientBar($primaryColor, $secondaryColor, $textColor: #fff, $textShadow: 0 -1px 0 rgba(0,0,0,.25)) {
  color: $textColor;
  text-shadow: $textShadow;
  @include gradient-vertical($primaryColor, $secondaryColor);
  border-color: $secondaryColor $secondaryColor darken($secondaryColor, 15%);
  border-color: rgba(0,0,0,.1) rgba(0,0,0,.1) fade-in(rgba(0,0,0,.1), 0.15);
}

@mixin gradient-horizontal($startColor: #555, $endColor: #333) {
  background-color: $endColor;
  background-image: -moz-linear-gradient(left, $startColor, $endColor); // FF 3.6+
  background-image: -webkit-gradient(linear, 0 0, 100% 0, from($startColor), to($endColor)); // Safari 4+, Chrome 2+
  background-image: -webkit-linear-gradient(left, $startColor, $endColor); // Safari 5.1+, Chrome 10+
  background-image: -o-linear-gradient(left, $startColor, $endColor); // Opera 11.10
  background-image: linear-gradient(to right, $startColor, $endColor); // Standard, IE10
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{darken($startColor, 1%)}', endColorstr='#{darken($endColor, 1%)}', GradientType=1); // IE9 and down
}
@mixin gradient-vertical($startColor: #555, $endColor: #333) {
  background-color: mix($startColor, $endColor, 62.5%);
  background-image: -moz-linear-gradient(top, $startColor, $endColor); // FF 3.6+
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from($startColor), to($endColor)); // Safari 4+, Chrome 2+
  background-image: -webkit-linear-gradient(top, $startColor, $endColor); // Safari 5.1+, Chrome 10+
  background-image: -o-linear-gradient(top, $startColor, $endColor); // Opera 11.10
  background-image: linear-gradient(to bottom, $startColor, $endColor); // Standard, IE10
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{darken($startColor, 1%)}', endColorstr='#{darken($endColor, 1%)}', GradientType=0); // IE9 and down
}
@mixin gradient-directional($startColor: #555, $endColor: #333, $deg: 45deg) {
  background-color: $endColor;
  background-repeat: repeat-x;
  background-image: -moz-linear-gradient($deg, $startColor, $endColor); // FF 3.6+
  background-image: -webkit-linear-gradient($deg, $startColor, $endColor); // Safari 5.1+, Chrome 10+
  background-image: -o-linear-gradient($deg, $startColor, $endColor); // Opera 11.10
  background-image: linear-gradient($deg, $startColor, $endColor); // Standard, IE10
}
@mixin gradient-vertical-three-colors($startColor: #00b3ee, $midColor: #7a43b6, $colorStop: 50%, $endColor: #c3325f) {
  background-color: mix($midColor, $endColor, 80%);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from($startColor), color-stop($colorStop, $midColor), to($endColor));
  background-image: -webkit-linear-gradient($startColor, $midColor $colorStop, $endColor);
  background-image: -moz-linear-gradient(top, $startColor, $midColor $colorStop*100%, $endColor);
  background-image: -o-linear-gradient($startColor, $midColor $colorStop, $endColor);
  background-image: linear-gradient($startColor, $midColor $colorStop, $endColor);
  background-repeat: no-repeat;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{darken($startColor, 1%)}', endColorstr='#{darken($endColor, 1%)}', GradientType=0); // IE9 and down, gets no color-stop at all for proper fallback
}
@mixin gradient-radial($innerColor: #555, $outerColor: #333)  {
  background-color: $outerColor;
  background-image: -webkit-gradient(radial, center center, 0, center center, 460, from($innerColor), to($outerColor));
  background-image: -webkit-radial-gradient(circle, $innerColor, $outerColor);
  background-image: -moz-radial-gradient(circle, $innerColor, $outerColor);
  background-image: -o-radial-gradient(circle, $innerColor, $outerColor);
  background-repeat: no-repeat;
}
@mixin gradient-striped($color, $angle: 45deg) {
  background-color: $color;
  background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, rgba(255,255,255,.15)), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5, rgba(255,255,255,.15)), color-stop(.75, rgba(255,255,255,.15)), color-stop(.75, transparent), to(transparent));
  background-image: -webkit-linear-gradient($angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
  background-image: -moz-linear-gradient($angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
  background-image: -o-linear-gradient($angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
  background-image: linear-gradient($angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
}

@mixin gradient-reset-filter() {
  filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
}




@mixin nav-divider($top: #e5e5e5, $bottom: $white) {
  // IE7 needs a set width since we gave a height. Restricting just
  // to IE7 to keep the 1px left/right space in other browsers.
  // It is unclear where IE is getting the extra space that we need
  // to negative-margin away, but so it goes.
  *width: 100%;
  height: 1px;
  margin: (($baseLineHeight / 2) - 1) 1px; // 8px 1px
  *margin: -5px 0 5px;
  overflow: hidden;
  background-color: $top;
  border-bottom: 1px solid $bottom;
}

@mixin buttonBackground($startColor, $endColor, $textColor: #fff, $textShadow: 0 -1px 0 rgba(0,0,0,.25)) {
  // gradientBar will set the background to a pleasing blend of these, to support IE<=9
  @include gradientBar($startColor, $endColor, $textColor, $textShadow);
  *background-color: $endColor; /* Darken IE7 buttons by default so they stand out more given they won't have borders */
  @include gradient-reset-filter();

  // in these cases the gradient won't cover the background, so we override
  &:hover, &:active, &.active, &.disabled, &[disabled] {
    color: $textColor;
    background-color: $endColor;
    *background-color: darken($endColor, 5%);
  }

  // IE 7 + 8 can't handle box-shadow to show active, so we darken a bit ourselves
  &:active,
  &.active {
    background-color: darken($endColor, 10%) \9;
  }
}

@mixin navbarVerticalAlign($elementHeight) {
  margin-top: ($navbarHeight - $elementHeight) / 2;
}





@mixin container-fixed() {
  margin-right: auto;
  margin-left: auto;
  @include clearfix();
}

@mixin tableColumns($columnSpan: 1) {
  float: none; // undo default grid column styles
  width: (($gridColumnWidth) * $columnSpan) + ($gridGutterWidth * ($columnSpan - 1)) - 16; // 16 is total padding on left and right of table cells
  margin-left: 0; // undo default grid column styles
}

@mixin makeRow() {
  margin-left: $gridGutterWidth * -1;
  @include clearfix();
}
@mixin makeColumn($columns: 1, $offset: 0) {
  float: left;
  margin-left: ($gridColumnWidth * $offset) + ($gridGutterWidth * ($offset - 1)) + ($gridGutterWidth * 2);
  width: ($gridColumnWidth * $columns) + ($gridGutterWidth * ($columns - 1));
}

@mixin core-offset($columns, $columnWidth: $gridColumnWidth, $gutterWidth: $gridGutterWidth) {
  margin-left: ($columnWidth * $columns) + ($gutterWidth * ($columns + 1));
}

@mixin core-span($columns, $columnWidth: $gridColumnWidth, $gutterWidth: $gridGutterWidth) {
  width: ($columnWidth * $columns) + ($gutterWidth * ($columns - 1));
}

@mixin grid-core($columnWidth: $gridColumnWidth, $gutterWidth: $gridGutterWidth) {
  .row {
    margin-left: $gutterWidth * -1;
    @include clearfix();
  }

  [class*="span"] {
    float: left;
    margin-left: $gutterWidth;
  }

  // Set the container width, and override it for fixed navbars in media queries
  .container,
  .navbar-static-top .container,
  .navbar-fixed-top .container,
  .navbar-fixed-bottom .container {
    @include core-span($gridColumns, $columnWidth, $gutterWidth);
  }

  // generate .spanX and .offsetX
  $i: $gridColumns;
  @while $i > 0 {
    .span#{$i} { @include core-span($i, $columnWidth, $gutterWidth); }
    $i: $i - 1;
  }

  $i: $gridColumns;
  @while $i > 0 {
    .offset#{$i} { @include core-offset($i, $columnWidth, $gutterWidth); }
    $i: $i - 1;
  }
}

@mixin fluid-offset($columns, $columnWidth: $fluidGridColumnWidth, $gutterWidth: $fluidGridGutterWidth) {
  margin-left: ($columnWidth * $columns) + ($gutterWidth * ($columns - 1)) + ($gutterWidth * 2);
  *margin-left: ($columnWidth * $columns) + ($gutterWidth * ($columns - 1)) - (.5 / $gridRowWidth * 100px * 1%) + ($gutterWidth * 2) - (.5 / $gridRowWidth * 100px * 1%);
}

@mixin fluid-offset-first-child($columns, $columnWidth: $fluidGridColumnWidth, $gutterWidth: $fluidGridGutterWidth) {
  margin-left: ($columnWidth * $columns) + ($gutterWidth * ($columns - 1)) + $gutterWidth;
  *margin-left: ($columnWidth * $columns) + ($gutterWidth * ($columns - 1)) - (.5 / $gridRowWidth * 100px * 1%) + $gutterWidth - (.5 / $gridRowWidth * 100px * 1%);
}

@mixin fluid-span($columns, $columnWidth: $fluidGridColumnWidth, $gutterWidth: $fluidGridGutterWidth) {
  width: ($columnWidth * $columns) + ($gutterWidth * ($columns - 1));
  *width: ($columnWidth * $columns) + ($gutterWidth * ($columns - 1)) - (.5 / $gridRowWidth * 100px * 1%);
}

@mixin grid-fluid($columnWidth: $fluidGridColumnWidth, $gutterWidth: $fluidGridGutterWidth) {
  .row-fluid {
    width: 100%;
    @include clearfix();
    [class*="span"] {
      @include input-block-level();
      float: left;
      margin-left: $gutterWidth;
      *margin-left: $gutterWidth - (.5 / $gridRowWidth * 100px * 1%);
    }
    [class*="span"]:first-child {
      margin-left: 0;
    }

    // generate .spanX and .offsetX
    $i: $gridColumns;
    @while $i > 0 {
      .span#{$i} {
        @include fluid-span($i, $columnWidth, $gutterWidth);
      }
      .offset#{$i} {
        @include fluid-offset($i, $columnWidth, $gutterWidth);
      }
      .offset#{$i}:first-child {
        @include fluid-offset-first-child($i, $columnWidth, $gutterWidth);
      }
      $i: $i - 1;
    }
  }
}

@mixin input-span($columns, $columnWidth: $gridColumnWidth, $gutterWidth: $gridGutterWidth) {
  width: (($columnWidth) * $columns) + ($gutterWidth * ($columns - 1)) - 14;
}

@mixin grid-input($columnWidth: $gridColumnWidth, $gutterWidth: $gridGutterWidth) {
  input,
  textarea,
  .uneditable-input {
    margin-left: 0; // override margin-left from core grid system
  }

  // Space grid-sized controls properly if multiple per line
  .controls-row [class*="span"] + [class*="span"] {
    margin-left: $gutterWidth;
  }

  // generate .spanX
  $i: $gridColumns;
  @while $i > 0 {
    input.span#{$i},
    textarea.span#{$i},
    .uneditable-input.span#{$i} {
      @include input-span($i, $columnWidth, $gutterWidth);
    }
    $i: $i - 1;
  }
}