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:
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:
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:
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:
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
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:
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
HTML:
Shiny Button
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!
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.