Inline Block Mixin

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.

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:

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:

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.

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!

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.

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: