One for the Road: More Tasty Bourbon Mixins

This article is the second part of my exploration into mixins from the Bourbon Sass library. Among them you’ll find useful examples which will speed up your workflow and minimize your Sass code.

Another List Of Goodies

We’ll be getting a taste of the following eight mixins:

• Inline Block mixin
• Position mixin
• Triangle mixin
• Clearfix mixin
• Button mixin
• Size mixin
• HiDPI media query mixin
• Retina Image mixin

As with the previous tutorial, the examples below don’t necessarily represent best design practices, but are chosen for exploring the basic functionality of these mixins.

Inline Block Mixin

Paragraphs, by default, display as block elements.

HTML:

  <p class='paragraphs-behave-like-blocks'>
    Yada yada yada
  </p>

  <p class='paragraphs-behave-like-blocks'>
    Yada yada yada
  </p>

Block-level elements, such as paragraphs, automatically create a new row in the layout.

This mixin comes in handy if you want to change the default display behaviour of elements to inline-block. It not only sets display: inline-block but also takes care of quirks and legacy support for IE7.

Learn more about display on designshack.net.

Sass: These blocks have float-like behaviour, through inline-block.

.paragraphs-behave-like-blocks
  +inline-block
  background-color: tomato

//  SCSS syntax
//  .paragraphs-behave-like-blocks {
      @include inline-block;
//  }

Take a look at the generated CSS output. Who wants to handle nasty stuff like that anyway?

CSS output:

.paragraphs-behave-like-blocks {
  display: inline-block;
  vertical-align: baseline;
  zoom: 1;
  *display: inline;
  *vertical-align: auto;
  background-color: tomato;
}

Set to display: inline-block, the paragraphs get displayed inline, but retain their block-level characteristics.

Attention! Notice the whitespace between the block elements. If you were using float to achieve the same layout, you wouldn’t see any whitespace. It’s a kind of default whitespace, present in the HTML, which doesn’t go away by setting margins to 0px. Instead, you need to remove any character gaps in the markup itself, as demonstrated in this pen:

Position Mixin

This mixin is a shorthand for writing something like the following:

Sass:

.some-element
  position: relative
  top: 0px
  left: 100px

Sass:

.some-element
  +position(relative, 0px 0 0 100px)
                    //top right bottom left

// SCSS syntax
   .some-element
//   @include position(relative, 0px 0 0 100px);

That’s it. No magic, but still super useful. Keeping stylesheets simple and readable pays off over time.

Triangle Mixin

Want to use CSS triangles without fiddling around? There’s certainly no need to use images for the job. It’s easy as pie with this mixin.

Sass:

.triangle
  +triangle(25px, tomato, down)
         // size, color, direction

// SCSS syntax
   .triangle {
     @include triangle(25px, tomato, down);
// }

The third parameter defines the direction. Options for this mixin include:

• down
• up
• left

• right

• up-right
• up-left
• down-right
• down-left

You can even define a second color if you need a background color for your triangle.

Clearfix Mixin

Containers which have floated elements within them experience the zero-height container problem—in essence the container element deflates to zero pixels if all its elements inside are floated and taken out of the container’s flow. Essentially, there’s nothing left to fill the container.

The clearfix mixin takes care of this when applied to the container/wrapper element. The best thing about this is that it doesn’t require addional “empty” markup to accomodate the clearfix. It keeps things semantic, separating concerns, by just adding the clearfix in your stylesheets. Take a look at this very simple example:

HTML:

  <div class='grey-wrapper'>
    <div class='logos'>

Sass:

$light-grey: #D4D4D4

.grey-wrapper
  background-color: $light-grey
  +clearfix
  .logos
    float: right
    +background-image(url("bourbon-logo@2x.png"), url("thoughtbot.png"))
    background-position: center top, top left
    background-repeat: repeat-y, repeat-x
    height: 220px
    width: 50%

// SCSS syntax
// .grey-wrapper {
     @include clearfix;
     background-color: $light-grey;
     .logos {
       float: right;
       @include background-image(url("bourbon-logo@2x.png"), url("thoughtbot.png"));
       background-position: center top, top left;
       background-repeat: repeat-y, repeat-x;
       height: 220px;
       width: 50%;
     }
// } 

In the example above, the grey container expands to hold the floated logos within it. However, when clearfix isn’t used:

If you take a look at the source code it becomes clear how this micro clearfix works:

Sass: Bourbon source code

@mixin clearfix {
  &:after {
    content:"";
    display:table;
    clear:both;
  }
}

This mixin uses the :after pseudo element to place an empty string at the very end of the container. In doing so it mimics content after the logo and tricks the browser into expanding the grey container to surround other elements inside.

Button Mixin

Need high quality buttons out of the box?

Standard Button

HTML:

  <div class='super-duper-button'>Super duper button</div>

Sass:

$light-blue: #2485F1

.super-duper-button
  +button($light-blue)

// SCSS syntax
// .super-duper-button {
     @include button($light-blue);
// }

That’s it! Simple and semantically clean buttons. They even come with great looking subtle hover effects. And there are two more options:

Pill Button

HTML:

  <div class='super-duper-button'>Super duper pill button</div>

$dark-pink: #6B32D1

.super-duper-button
  +button(pill, $dark-pink)

// SCSS syntax
// .super-duper-button {
     @include button(pill, $dark-pink);
// }

Shiny Button

HTML:

  <div class='super-duper-button'>Super duper shiny button</div>

Sass:

$acceptance-green: #43C914

.super-duper-button
  +button(shiny, $acceptance-green)

// SCSS syntax
// .super-duper-button {
     @include button(shiny, $acceptance-green);
// }

Attention! Please note that the text on the buttons automatically changes its color depending on the lightness of the base-color of the button. That way the mixin provides better contrast and readability. Awesome!

Sass:

$light-grey: #DEDEDE

.super-duper-button
  +button(shiny, $light-grey)

// SCSS syntax
// .super-duper-button {
     @include button(shiny, $light-grey);
// }

Size Mixin

Do you ever need to define width and height in one declaration? With Bourbon, here’s all you need to do:

Sass:

.small-article
  +size(300, 400)

// SCSS syntax
// .small-article {
     @include size(300, 400);
// }

CSS output:

.small-article {
  width: 300px;
  height: 400px;
}

You can provide pixel values or just numerical values. You can use auto for these values as well. If you provide only one size, Bourbon assumes you want a square.

Sass:

.square
  +size(25px)

// SCSS syntax
// .square {
     @include size(25px);
// }

HiDPI Mixin

If you want to quickly generate completely vendor-prefixed media queries for detecting HiDPI (“Retina”) devices, this mixin comes in handy.

Begin by providing a target device pixel ratio and declarations that change if the media query kicks in. The default ratio is 1.3.

Sass HiDPI-media-query:

.image
  width: 150px
  +hidpi(1.5)
    width: 200px

// SCSS syntax
// .image {
     width: 150px;
     +hidpi(1.5) {
       width: 200px;
     }
// }

CSS output:

.image {
  width: 150px;

  @media only screen and (-webkit-min-device-pixel-ratio: 1.5),
    only screen and (min--moz-device-pixel-ratio: 1.5),
    only screen and (-o-min-device-pixel-ratio: 1.5/1),
    only screen and (min-resolution: 144dpi),
    only screen and (min-resolution: 1.5dppx) {

    width: 200px;
  }
}

Pretty cool! It slims down repetitive code quite a bit.

Retina Image Mixin

Depending on the pixel density of the device displaying your designs, you can provide images with the appropriate bitmap resolution. This fine mixin provides a retina background-image or a non-retina background-image—depending on the result of the mixin’s internal HiDPI-media-query checking the device for its pixel density.

If I’m not mistaken, as a bonus, it will serve only one of the images to avoid downloading both—which is especially advantageous for cellular networks. If all the above is gobbledygook to you, I’d recommend starting with this fantastic article on Smashing Magazine.

Sass:

.logo
  +retina-image(logo-icon, 50px, 30px)

// SCSS syntax
// .logo {
     @include retina-image(logo-icon, 50px, 30px);
// }

The CSS output helps explain its functionality:

.logo {
  background-image: url(logo-icon.png);
}

@media only screen and (-webkit-min-device-pixel-ratio: 1.3),
       only screen and (min--moz-device-pixel-ratio: 1.3),
       only screen and (-o-min-device-pixel-ratio: 1.3 / 1),
       only screen and (min-resolution: 125dpi),
       only screen and (min-resolution: 1.3dppx) {
  .logo {
    background-image: url(logo-icon_2x.png);
    background-size: 50px 30px;
  }
}

The default of a device pixel ratio of 1.3 targets Apple “Retina” devices (which have a ratio of 2) as well as devices with pixel ratios as “low” as 1.3.

This mixin expects a .png as the standard extension for all images. Per default, it also expects a _2x.png extension to the filename of your retina-image. You can overwrite both defaults by providing another retina-filename and a standard extension, like so:

Sass:

.logo
  +retina-image(logo-icon, 50px, 30px,
                $extension: jpg,
                $retina-filename: HiDPI-logo-icon,
                $retina-suffix: _retina )

// SCSS syntax
// .logo {
     @include retina-image(logo-icon, 50px, 30px,
                $extension: jpg,
                $retina-filename: HiDPI-logo-icon,
                $retina-suffix: _retina );
// }

CSS output:

.logo {
  background-image: url(logo-icon.jpg);
}

@media only screen and (-webkit-min-device-pixel-ratio: 1.3),
       only screen and (min--moz-device-pixel-ratio: 1.3),
       only screen and (-o-min-device-pixel-ratio: 1.3 / 1),
       only screen and (min-resolution: 125dpi),
       only screen and (min-resolution: 1.3dppx) {
  .logo {
    background-image: url(HiDPI-logo-icon_retina.jpg);
    background-size: 50px 30px;
  }
}

Cheers!

That’s all we’ll cover in terms of Bourbon mixins. In the next tutorial we’ll take a look at Bourbon’s functions.