General Utility Placeholders

These are single responsibility placeholders which are to be extended to help reduce duplication in our Sass.

Micro Clearfix to clear floats.

http://nicolasgallagher.com/micro-clearfix-hack/

%clearfix

Enable inline block as far back as IE7.

%inline-block

Remove iOS and OSX defaults.

%webkit-appearance-reset

Hide text in order to replace with a background image.

%image-replacement

Visually hide using clip - still available to Screen Readers.

Can also be applied using .accessibility

%visually-hide

Show an element after it has been hidden using %visually-hide.

%visually-show

Apply to a pseudo element to give it content.

%empty-generated-content

Apply to a pseudo element to give it content and absolute positioning.

%empty-abs-generated-content

Hide using opacity.

%invisible

Show using opacity - to cancel %invisible.

%opaque

Split long words over multiple lines. Useful for hyperlinks.

The same as applying .break-text

%prevent-text-breakouts

Truncate single line text and cap it with an ellipsis.

%truncate-text

Cancels out the default font-smoothing: antialiased effect.

It makes the characters bolder and works well on small type.

%subpixel-text