Advertisement
  1. Web Design
  2. Sass
Webdesign

One for the Road: More Tasty Bourbon Mixins

by
Difficulty:BeginnerLength:MediumLanguages:
This post is part of a series called Bourbon: the Connoisseurs’ Choice for Sass Mixins.
A Taste of Bourbon’s Delicious Mixins
Bourbon on the Rocks: Cool Functions to Improve Your Sass

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:

file

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.

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

CSS output:

file

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:

Sass:

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:

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

file
  • 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:

Sass:

file

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

file

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

Sass: Bourbon source code

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

file

HTML:

Sass:

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

file

HTML:

Shiny Button

file

HTML:

Sass:

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!

file

Sass:

Size Mixin

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

Sass:

CSS output:

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:

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:

CSS output:

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:

The CSS output helps explain its functionality:

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:

CSS output:

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.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.