Last updated: May 12, 2015

Fuselage comes with some handy mixins right out of the box. This is how you use them.

button($color, [$text, $reverse, $hover])
➜ Creates a custom button.

$color color value required
Border color and text color. Also the fill color when hovered.
$text color value (white)
Text color when hovered.
$reverse boolean (false)
Inverts button to be filled by default and transparent when hovered.
$hover color value (transparent)
Hover color when $reversed: true.

clearfix()
➜ Applies clearfix styles

mq($media-size, [$media])
➜ Includes a media query based on a passed-in lower-bound.

$media-size value required
Media variable ($small, $medium, $large, $xlarge) or any other valid width value.
$media media type (screen)
Takes any valid media type (screen, print, etc.).
$color color value ($brand-primary)
Color variable ($brand-primary, $brand-secondary, $brand-tertiary, etc.) or any other valid color value.

responsive-table-setup([$namespace])
➜ Creates namespaced classes for responsive tables. Couple with mq() to create new responsive table breakpoints classes to go with them!

$namespace string (Null)
Media namespace ("small", "medium", "large", "xlarge") or any custom namespace.
NOTE: Passing nothing to this mixin will duplicate classes that already exist in Fuselage.
NOTE: Be sure to use UPPER BOUNDS, this is different than using width-setup().
Example SCSS
// Blackberry responsive tables. Super duper important.
@include mq(384px) {@include responsive-table-setup($namespace: "blackberry");}

// Creates class to be used with responsive tables for this media size (blackberry-responsive).
Example HTML
<table class="blackberry-responsive">
    ...
</table>

width-setup([$namespace])
➜ Creates width classes for a given namespace. Couple with mq() to create new breakpoints and responsive width classes to go with them!

$namespace string (Null)
Media namespace ("small", "medium", "large", "xlarge") or any custom namespace.
NOTE: Passing nothing to this mixin will duplicate classes that already exist in Fuselage.
Example SCSS
// Blackberry media query. Super duper important.
@include mq(384px) {@include width-setup($namespace: "blackberry");}

// Creates all width classes for this media size (halves, thirds, fourths, fifths, sixths, eighths, tenths, twelfths).
Example HTML
<div class="row">
    <div class="column blackberry-one-half">
        <!-- Stuff -->
    </div>
</div>