helpers

functions

is-true 

@function is-true($value) { ... }

Description

Returns truthiness of a value

Parameters

Name Description Type Default value
$value

The value to check the truthiness of

 Mixed —

Returns

The boonlean equivalent of the value

Bool

Used by

Author

  • Joey Hoer

adjust-hsl 

@function adjust-hsl($color, $h: 0, $s: 0, $l: 0, $a: 0) { ... }

Description

Adjust HSL(a) values This is a shorthand version of the adjust-color function

Parameters

Name Description Type Default value
$color

The color to adjust

 Color —
$h

The amount with which to adjust the hue

 Number 0
$s

The amount with which to adjust the saturation

 Number 0
$l

The amount with which to adjust the lightness

 Number 0
$a

The amount with which to adjust the alpha value

 Number 0

Returns

The adjusted color

Color

Author

  • Joey Hoer

tint 

@function tint($color, $percent) { ... }

Description

Add percentage of white to a color

Parameters

Name Description Type Default value
$color

The color to tint

 Color —
$percent

The amount at which to tint the color

 Number —

Returns

The tinted color

Color

Author

  • Joey Hoer

shade 

@function shade($color, $percent) { ... }

Description

Add percentage of black to a color

Parameters

Name Description Type Default value
$color

The color to shade

 Color —
$percent

The amount at which to shade the color

 Number —

Returns

The shaded color

Color

Author

  • Joey Hoer

em 

@function em($pixels, $base: $em-base) { ... }

Description

Convert pixels to ems

Parameters

Name Description Type Default value
$pixels

The pixel value(s) to be converted to ems

 Number, List —
$base

The base value

 Number $em-base

Returns

The em value(s)

Number, List

Requires

Author

  • Joey Hoer

rem 

@function rem($pixels) { ... }

Description

Convert pixels to rems

Parameters

Name Description Type Default value
$pixels

The pixel value(s) to be converted to rems

 Number, List —

Returns

The rem value(s)

Number, List

Requires

Used by

Author

  • Joey Hoer

in-list 

@function in-list($needle, $haystack) { ... }

Description

Checks if a value exists in a list

Parameters

Name Description Type Default value
$needle

The searched value

 Mixed —
$haystack

The list

 List —

Used by

Author

  • Joey Hoer

purge 

@function purge() { ... }

Description

Removes all false and null values from $list

Parameters

None.

Requires

Used by

Author

  • Joey Hoer

replace 

@function replace($list, $old, $value) { ... }

Description

Replace a value(s) in a list

Parameters

Name Description Type Default value
$list

The list to work on

 List —
$old

The value to be replaced

 Mixed —
$value

The value to replace with

 Mixed —

Requires

Used by

Author

  • Joey Hoer

remove 

@function remove($list, $old) { ... }

Description

Removes value(s) from a list

Parameters

Name Description Type Default value
$list

The list to work on

 List —
$old

The value to be removed

 Mixed —

Requires

Used by

Author

  • Joey Hoer

replace-nth 

@function replace-nth($list, $index, $value) { ... }

Description

Replace value at index

Parameters

Name Description Type Default value
$list

The list to work on

 List —
$index

The index of the item to be replaced

 Number —
$value

The value to replace with

 Mixed —

Requires

Used by

Author

  • Joey Hoer

remove-duplicates 

@function remove-duplicates($list, $recursive) { ... }

Description

Removes duplicate values from $list

Parameters

Name Description Type Default value
$list

The list to work on.

 List —
$recursive

If true, recursively search list

 Bool —

Returns

The list with elements remove

List

Used by

Author

  • Joey Hoer

unique 

@function unique() { ... }

Description

Alias of remove-duplicates

Parameters

None.

Requires

Used by

Author

  • Joey Hoer

list-walk 

@function list-walk($list, $callback, $args...) { ... }

Description

Applies the callback to the elements of the given list

Parameters

Name Description Type Default value
$list

A list to run through the callback function.

 List —
$callback

Callback function to run for each element in each list.

 String —
$args

Variable list of arguments to run through the callback function.

 Arglist —

Returns

A list containing all the elements of $list after applying the callback function to each one.

List

Used by

Author

  • Joey Hoer

single-out 

@function single-out($list) { ... }

Description

Return a single value if the list is only one element long, otherwise return the list

Parameters

Name Description Type Default value
$list

The list check for a single value

 List —

Returns

The first (only) value, if the list only contains one element, otherwise the list

List, Mixed

Used by

Author

  • Joey Hoer

is-empty 

@function is-empty($list) { ... }

Description

Tests whether a list is empty.

Parameters

Name Description Type Default value
$list

The list to run the test against

 List —

Returns

Bool

Example

is-empty(())
// true
is-empty(a)
// false

Author

  • Joey Hoer

map-search 

@function map-search($map, $value) { ... }

Description

Search a map

Parameters

Name Description Type Default value
$map

The map to search

 Map —
$value

The value to search for

 Mixed —

Returns

The value which is found

Mixed

Used by

Author

  • Joey Hoer

pow 

@function pow($base, $exponent) { ... }

Description

Takes base to the exponent power, that is, base^exponent. NOTE: This function is defined in Compass, this is a fallback.

Parameters

Name Description Type Default value
$base

The base number.

 Number —
$exponent

The exponent.

 Number —

Returns

The resulting number.

Number

Used by

Author

  • Joey Hoer

to-fixed 

@function to-fixed($num, $digits: 0) { ... }

Description

Round a number, keeping a specified number of decimals.

Parameters

Name Description Type Default value
$num

The number to be rounded.

 Number —
$digits

The number of digits to appear after the decimal point.

 Number 0

Returns

The rounded number, containing the set number of digits.

Number

Requires

Author

  • Joey Hoer

strip-unit 

@function strip-unit($num) { ... }

Description

Strip the unit off a number.

Parameters

Name Description Type Default value
$num

The number to remove units from.

 Number —

Returns

The number with unit stripped off.

Number

Used by

Author

  • Joey Hoer

opposite-of 

@function opposite-of($var, $opposites: null) { ... }

Description

Return the opposite of a value, or null if an opposite is not found

Parameters

Name Description Type Default value
$var

The value to find the opposite of

 Mixed —
$opposites

A map holding the association of values and their opposites

 Map null

Returns

The opposite value

String

Requires

Author

  • Joey Hoer

mixins

functions

_parse-wcs 

@function _parse-wcs($wcs, $defaults: null) { ... }

Description

Parse and order width, color, and style values NOTE: Sets default style to solid, if necessary.

Parameters

Name Description Type Default value
$wcs

The width, color, and style (in any order)

 List —
$defaults

A list of default width, color, and style values to inherit

 List null

Returns

The width, color, style

List

Requires

Used by

Author

  • Joey Hoer

_font-src 

@function _font-src($formats, $file-path, $font-family) { ... }

Description

Get a list of src values appropriate for use with @font-face

Parameters

Name Description Type Default value
$formats

A list of formats to include (by file extension)

 List —
$file-path

The path to the font file(s), including the basename of the file(s)

 String —
$font-family

The name of the font family (fragment identifier), required only if SVG font's are being used

 String —

Returns

A comma separated list of font sources

List

Used by

Author

  • Joey Hoer

outer-stroke 

@function outer-stroke($width, $color: currentColor, $softness: 0, $step-width: normal) { ... }

Description

Draw outer stroke around text

Parameters

Name Description Type Default value
$width

The width of the outer stroke

 Number —
$color

The color of the outer stroke. If not defined, the stroke color with match the current font color.

 Color currentColor
$softness

The softness of the stroke's edges

 Number 0
$step-width

The distance between each step

 Number normal

Returns

A list of text-shadow properties that will generate the outer stroke

List

Requires

Author

  • Joey Hoer

_sideOppositeTo 

@function _sideOppositeTo($side) { ... }

Description

Get the opposing side

Parameters

Name Description Type Default value
$side

The side.

 String —

Returns

The opposing side, or null if there is no opposing side

String, Null

Requires

Used by

Author

  • Joey Hoer

mixins

ad-infinitum 

@mixin ad-infinitum($push: padding, $pull: margin, $direction: horizontal, $content-box: true) { ... }

Description

Create a visual row that spans the full width of the viewport, while maintaining relative content width

NOTE: This mixin will overflow the parent container in the given direction. To prevent overflow scrolling, and other issues, a containing element must have overflow-*: hidden; set on the matching axis. In some cases, this may be done gloabally via the html, body elements, although that is generally not recomended; it is better to use a wrapper.

.wrapper {
   overflow-x: hidden;
}

Parameters

Name Description Type Default value
$push

The method to be used to push the content

 String padding
$pull

The method to be used to pull the content

 String margin
$direction

The direction in which to span ad inifinitum

 String horizontal
$content-box

Set box-sizing: content-box when set to true, only applicable when using $pull: position.

 Bool true

Requires

Author

  • Joey Hoer

ad-infinitum-pseudo 

@mixin ad-infinitum-pseudo() { ... }

Description

Create a visual row that spans the full width of the viewport, while maintaining relative content width using pseduo elements

Parameters

None.

Requires

Author

  • Joey Hoer

aspect-ratio 

@mixin aspect-ratio($ratio, $element: :after, $stretch: true, $overwrite: false) { ... }

Description

Give an element a fixed aspect ratio.

NOTE: Direct descendans will overflow the container and, thus, be hidden. It is recomended the there only be one direct descendant which is "stretched" over the container, allowing grandchildren to be positioned as normal. This is the default behavior.

Parameters

Name Description Type Default value
$ratio

The ratio of width to height. Photos and videos usually come in 4/3 or 16/9 ratios.

 Number —
$element

The element to use to create the aspect ratio.

 String :after
$stretch

If true, direct descendants will be stretched over the container

 Bool true
$overwrite

If true, only the bottom padding of the element will be printed. Used to overwrite an existing aspect ratio in responsive layouts

 Bool false

Requires

Author

  • Joey Hoer

border-radius 

@mixin border-radius($radius) { ... }

Description

Set border radius or radii

Passing null will prevent a rule from a being applied to the corresponding corner(s)

Parameters

Name Description Type Default value
$radius

The radius/radii to be set

 Number, List —

Requires

Used by

Author

  • Joey Hoer

border-top-radius 

@mixin border-top-radius($radius) { ... }

Description

Set the border top radii

Parameters

Name Description Type Default value
$radius

The radius to set for the top borders

 Number —

Requires

Author

  • Joey Hoer

border-right-radius 

@mixin border-right-radius($radius) { ... }

Description

Set the border right radii

Parameters

Name Description Type Default value
$radius

The radius to set for the right borders

 Number —

Requires

Author

  • Joey Hoer

border-bottom-radius 

@mixin border-bottom-radius($radius) { ... }

Description

Set the border bottom radii

Parameters

Name Description Type Default value
$radius

The radius to set for the bottom borders

 Number —

Requires

Author

  • Joey Hoer

border-left-radius 

@mixin border-left-radius($radius) { ... }

Description

Set the border left radii

Parameters

Name Description Type Default value
$radius

The radius to set for the left borders

 Number —

Requires

Author

  • Joey Hoer

border 

@mixin border($borders) { ... }

Description

Set border(s) Passing null will prevent a rule from a being applied to the corresponding side(s)

Parameters

Name Description Type Default value
$borders

The borders(s) to be set

 List —

Requires

Used by

Author

  • Joey Hoer

border-color 

@mixin border-color($color) { ... }

Description

Set border-color(s) Passing null will prevent a rule from a being applied to the corresponding side(s)

Parameters

Name Description Type Default value
$color

The border-color(s) to be set

 Number, List —

Requires

Author

  • Joey Hoer

border-style 

@mixin border-style($style) { ... }

Description

Set border-style(s) Passing null will prevent a rule from a being applied to the corresponding side(s)

Parameters

Name Description Type Default value
$style

The border-style(s) to be set

 Number, List —

Requires

Author

  • Joey Hoer

border-width 

@mixin border-width($width) { ... }

Description

Set border-width(s) Passing null will prevent a rule from a being applied to the corresponding side(s)

Parameters

Name Description Type Default value
$width

The border-width(s) to be set

 Number, List —

Requires

Author

  • Joey Hoer

center-float 

@mixin center-float($inner) { ... }

Description

Center elements in container horizontally. Useful for centering floated elements. NOTE: This must be applied to a wrapper of the floated elements' parent. For example:

  <div class="center"> <!-- Apply mixin to `.center` -->
    <ul>               <!-- This is `$inner` argument (e.g. `ul`) -->
      <li>One</li>     <!-- These elements are floated -->
      <li>Two</li>     <!-- These elements are floated -->
      <li>Three</li>   <!-- These elements are floated -->
    </ul>
   </div>

Parameters

Name Description Type Default value
$inner

The selector

 String —

Requires

Author

  • Joey Hoer

center-block 

@mixin center-block($max-width: null) { ... }

Description

Center an element using with auto margins.

Parameters

Name Description Type Default value
$max-width

A max-width value of the to-be-centered block.

 Number null

Requires

Author

  • Joey Hoer

center-transform 

@mixin center-transform($axis: both) { ... }

Description

Center an element without fixed dimensions, vertically, horizontally, or both ways. NOTE: This method uses position: absolute, so the element will be centered inside its positioning parent.

Parameters

Name Description Type Default value
$axis

Omit, or pass 'both' to center on both axes. Set to 'x' or 'y' to center on one axis only.

 String both

Requires

Author

  • Joey Hoer

center-absolute 

@mixin center-absolute($dimensions) { ... }

Description

Center an absolutely positioned element: horizontally, vertically, or both ways. NOTE: This method only works if the element-to-be-centered has a fixed dimension on the relevant axis

Parameters

Name Description Type Default value
$dimensions

A two-value list: the width and height of the element-to-be-centered (both optional). To bypass either and avoid centering in that dimension, pass n.

 List —

Requires

Author

  • Joey Hoer

center-table 

@mixin center-table($inner) { ... }

Description

Vertically center the content of an inner element with the table method. NOTE: This method requires a container and an inner element. The mixin applies to the container; the to-be-centered inner element is passed (by its selector) as an argument. Any to-be-centered element should be a direct descendant of the container.

Parameters

Name Description Type Default value
$inner

A CSS selector for the inner element. Wrap the selector in quotes.

 String —

Author

  • Joey Hoer

center-inline-block 

@mixin center-inline-block($inner) { ... }

Description

Vertically center an inner element with the inline-block method. NOTE: This method requires a container and an inner element. The mixin applies to the container; the to-be-centered inner element is passed (by its selector) as an argument. Any to-be-centered element should be a direct descendant of the container.

Parameters

Name Description Type Default value
$inner

A CSS selector for the inner element. Wrap the selector in quotes.

 String —

Author

  • Joey Hoer

ellipse 

@mixin ellipse($size: null) - The size (width, height) { ... }

Description

Draw a CSS ellipse

Parameters

Name Description Type Default value
$size

of the ellipse. A single value will make a circle.

 List, Number null) - The size (width, height

Requires

Used by

Author

  • Joey Hoer

circle 

@mixin circle($size: null) - The size (width, height) { ... }

Description

Draw a CSS circle

Parameters

Name Description Type Default value
$size

of the ellipse. A single, non-null value will make a circle.

 List, Number null) - The size (width, height

Requires

Author

  • Joey Hoer

obround 

@mixin obround($size: null) - The size (width, height) { ... }

Description

Draw a CSS obround

Parameters

Name Description Type Default value
$size

of the obround. A single, non-null value will make a circle.

 List, Number null) - The size (width, height

Requires

Author

  • Joey Hoer

clearfix 

@mixin clearfix() { ... }

Description

Clearfix: contain floats

For modern browsers

  1. The space content is one way to avoid an Opera bug when the contenteditable attribute is included anywhere else in the document. Otherwise it causes space to appear at the top and bottom of elements that receive the clearfix class.
  2. The use of table rather than block is only necessary if using :before to contain the top-margins of child elements.

Parameters

None.

Author

  • Joey Hoer

color-swap 

@mixin color-swap($off, $on, $duration: 0, $bg) { ... }

Description

Sets two color states. Assign text color and/or background color and optionally assign a transition. The "on" state subsumes :hover and :focus.

Parameters

Name Description Type Default value
$off

Color(s) for the "off" state. A list of two values will designate color and background-color. One value will be interpreted as color — unless the $bg argument, below, is set to true, in which case it will be background-color.

 Color, List —
$on

Color(s) for the "on" state (:hover and :focus). One or two values, interpreted the same as $off, above.

 Color, List —
$duration

The transition-duration between $off and $on states.

 Number 0
$bg

(false) Set to true if you want to pass a single color value for the $off and $on arguments, and you want that value interpreted as background-color. (By default, a single value will be intepreted as color.)

 Bool —

Requires

Author

  • Joey Hoer

faux-border 

@mixin faux-border($values) { ... }

Description

Draw a faux border, using box-shadow, that does not affect the deminsions of the element

Parameters

Name Description Type Default value
$values

A list of faux borders to draw. Each faux border may include up to three values: a width, a color, and an optional setting. The setting determines where the faux border will be drawn in relationship to the elements box model. If the setting is inset, it will be drawn inside the border-box, otherwise it will be drawn outside the border-box. Color defaults to currentColor, if not set.

 Mixed —

Author

  • Joey Hoer

font-face 

@mixin font-face($font-family, $file-path, $weight: normal, $style: normal, $formats: eot woff ttf svg) { ... }

Description

Create a bulletproof @font-face rule The order of @font-face rules matter. To ensure fonts load correctly, they must be declared in the following order: normal, bold, italic, bold+italic.

Parameters

Name Description Type Default value
$font-family

The name of the font family

 String —
$file-path

The path to the font file(s), including the basename of the file(s)

 String —
$weight

The font weight of the font face rule

 String normal
$style

The font style of the font face rule

 String normal
$formats

The font formats to be included in the font face rule

 List eot woff ttf svg

Requires

Author

  • Joey Hoer

hide-text 

@mixin hide-text($method: pseudo) { ... }

Description

Hide text using one of a number of methods

Parameters

Name Description Type Default value
$method

The method to use to hide the text. Possible values include pseudo, indent, and font.

 String pseudo

Requires

Author

  • Joey Hoer

hide-visually 

@mixin hide-visually($focusable: false) { ... }

Description

Hide only visually, but have it available for screenreaders

Parameters

Name Description Type Default value
$focusable

Allow the element to be focusable when navigated to via the keyboard. Default is false.

 Bool false

Links

Author

  • Joey Hoer

invisible 

@mixin invisible() { ... }

Description

Hide visually and from screenreaders, but maintain layout

Parameters

None.

Author

  • Joey Hoer

hidden 

@mixin hidden() { ... }

Description

Hide from both screenreaders and browsers

Parameters

None.

Links

Author

  • Joey Hoer

icons 

@mixin icons($icons, $prefix: 'icon-', $suffix: null) { ... }

Description

Create icons

Parameters

Name Description Type Default value
$icons

A map of icons identifiers where the map keys are the name of the icon/basename of the generated class name and the value is the content of the icon

 Map —
$prefix

The icon prefix. If a divider is desired, it should be included at the end of the string.

 String 'icon-'
$suffix

The icon suffix. If a divider is desired, it should be included at the beginning of the string.

 String null

Author

  • Joey Hoer

force-justify 

@mixin force-justify($selector: ':after') { ... }

Description

Ensure all rows are justified.

@param {string} $space-collaspe - Accepts either "extreme" or "none". Using "extreme" will set both the font-size and line-height to 0. Should not be used if element contains text nodes.

Parameters

Name Description Type Default value
$selector

The selector which specifies the element or psuedo-element to be used to force justification. This must be (:):after, :last-child, or an equivilent, as the last element in the conatiner is the only element able to force justification.

 String ':after'

Author

  • Joey Hoer

line-on-sides 

@mixin line-on-sides($padding, $both: true) { ... }

Description

Draws decorative lines on sides of the element. The element will be centered.

Parameters

Name Description Type Default value
$padding

The padding to be applied to the left and right of the element.

 Number —
$both

Defines how @content should be used. The default value, "true", will apply the content to both the :before and :after psuedo elements. If "false", the content will be applied to the element itself, allowing different values to be applied to :before and :after.

 Bool true

Author

  • Joey Hoer

list-unstyled 

@mixin list-unstyled($no-margin: true) { ... }

Description

Remove default styling from a list

Parameters

Name Description Type Default value
$no-margin

If true, top and bottom margins will be removed from the list.

 Bool true

Requires

Used by

Author

  • Joey Hoer

list-inline 

@mixin list-inline($no-margin: true) { ... }

Description

Inline list items

Parameters

Name Description Type Default value
$no-margin

If true, top and bottom margins will be removed from the list.

 Bool true

Requires

Author

  • Joey Hoer

list-float 

@mixin list-float($dir: left, $no-margin: true) { ... }

Description

Float list items

Parameters

Name Description Type Default value
$dir

The direction to float the list items

 String left
$no-margin

If true, top and bottom margins will be removed from the list.

 Bool true

Requires

Author

  • Joey Hoer

list-punctuated 

@mixin list-punctuated($divider: ', ', $display: inline, $no-margin: true) { ... }

Description

Punctuate list items

Parameters

Name Description Type Default value
$divider

The divider to punctuate the list with

 String ', '
$display

The display value to apply to the list items

 String inline
$no-margin

If true, top and bottom margins will be removed from the list.

 Bool true

Requires

Author

  • Joey Hoer

list-divided 

@mixin list-divided($no-margin: true) { ... }

Description

Divide list items with border

Parameters

Name Description Type Default value
$no-margin

If true, top and bottom margins will be removed from the list.

 Bool true

Requires

Author

  • Joey Hoer

list-number-nested 

@mixin list-number-nested() { ... }

Description

Create a numbered nested ordered list. For example:

  1. Thing One 1.1. Point One 1.2. Point Two

  2. Thing Two 2.1. Point Two NOTE: This should only be used on ordered lists

    @param {number} $depth - How deep the nesting should go @param {number} $counter-start (1) - The number at which the nesting should start @param {string} $counter-style (decimal) - The number at which the nesting should start. Must be a valid list-style-type as defined by the W3C. @param {string} $counter-seperator ('.') - The content that will sperate the sections of the counter @param {string} $counter-after ($counter-seperator) - The content to appear after the counter (e.g. the ')' in '1.1)')

    @link http://www.w3.org/TR/CSS21/generate.html#propdef-list-style-type

Parameters

None.

Author

  • Joey Hoer

margin 

@mixin margin($margin) { ... }

Description

Set margin(s) Passing null will prevent a rule from a being applied to the corresponding side(s)

Parameters

Name Description Type Default value
$margin

The margin(s) to be set

 Number, List —

Requires

Used by

Author

  • Joey Hoer

media 

@mixin media($query) { ... }

Description

The keyword from is an alias for the default media feature The keywords to and through are aliased to the opposite of the default media feature The keyword to is one less than the passed value, while depending upon wether it is greater than or less than the preceding

Parameters

Name Description Type Default value
$query

The media query

 List —

Requires

Author

  • Joey Hoer

hd 

@mixin hd($ratio: 1.3) { ... }

Description

Media query for high resoultion displays

Parameters

Name Description Type Default value
$ratio

The device pixel ratio for which the media query should target

 Number 1.3

Author

  • Joey Hoer

padding 

@mixin padding($padding) { ... }

Description

Set padding(s) Passing null will prevent a rule from a being applied to the corresponding side(s)

Parameters

Name Description Type Default value
$padding

The padding(s) to be set

 Number, List —

Requires

Used by

Author

  • Joey Hoer

coords 

@mixin coords($coords, $position) { ... }

Description

Set coordinate system offsets

Parameters

Name Description Type Default value
$coords

The coordinates, in top, right, bottom, left format. Parsed as other box model shorthand properties.

 Number, List —
$position

The position

 String —

Requires

Used by

Author

  • Joey Hoer

absolute 

@mixin absolute($coords) { ... }

Description

Absolutely position an element and assign its coordinates

Parameters

Name Description Type Default value
$coords

The coordinates, in top, right, bottom, left format. Parsed as other box model shorthand properties.

 Number, List —

Requires

Used by

Author

  • Joey Hoer

fixed 

@mixin fixed($number|list) { ... }

Description

Fixed position an element and assign its coordinates

Parameters

Name Description Type Default value
$number|list

$coords

 —

Requires

Author

  • Joey Hoer

relative 

@mixin relative($coords) { ... }

Description

Relatively position an element and assign its coordinates The coordinates for a relatively positioned element should only contain one non-auto value on each axis to prevent over-constraining the position, which may produce unexpected results. Passing a single value will define both top and left values.Passing two values will define thetopandleft` values respectively. Passing more than two values will rely on the default coordinate system.

Parameters

Name Description Type Default value
$coords

A list (top, left) or a number which defines both values

 Number, List —

Requires

Used by

Links

Author

  • Joey Hoer

stretch 

@mixin stretch($coords) { ... }

Description

Stretch an element over its positioning parent

Parameters

Name Description Type Default value
$coords

The coordinates, in top, right, bottom, left format. Parsed as other box model shorthand properties.

 Number, List —

Requires

Author

  • Joey Hoer

print-reset-color 

@mixin print-reset-color() { ... }

Description

Reset colors for faster, cleaner printing

Parameters

None.

Links

Author

  • Joey Hoer

print-links 

@mixin print-links() { ... }

Description

Print destinations for links

Underlines links, print's link URLs (excluding fragment identifiers and links using the javascript: pseudo protocol)

Parameters

None.

Author

  • Joey Hoer

print-abbrs 

@mixin print-abbrs() { ... }

Description

Print titles for abbreviations

Parameters

None.

Author

  • Joey Hoer

print-breaks 

@mixin print-breaks() { ... }

Description

Minimize akward page breaks

Parameters

None.

Requires

Author

  • Joey Hoer

print-tables 

@mixin print-tables() { ... }

Description

Attempt to ensure that table headers are displayed on every page, if a table span more the one page

Parameters

None.

Links

Author

  • Joey Hoer

print-media 

@mixin print-media() { ... }

Description

Contain images

Parameters

None.

Author

  • Joey Hoer

print-reset 

@mixin print-reset($exclude: false) { ... }

Description

Wrapper mixin for all print resets

Parameters

Name Description Type Default value
$exclude

The resets to exclude

 List false

Author

  • Joey Hoer

reset-border-box 

@mixin reset-border-box() { ... }

Description

Set border-box on everything, allowing for module inheritance

Parameters

None.

Author

  • Joey Hoer

reset-semanticize 

@mixin reset-semanticize() { ... }

Description

Make headers and <b> semantic, not presentational

Parameters

None.

Requires

Author

  • Joey Hoer

reset-vertical-alignment 

@mixin reset-vertical-alignment() { ... }

Description

Remove the gap between images, videos, audio and canvas and the bottom of their containers: h5bp.com/i/440

Parameters

None.

Requires

Author

  • Joey Hoer

reset-pointer 

@mixin reset-pointer() { ... }

Description

Make clickable form elements have a pointer

Parameters

None.

Author

  • Joey Hoer

reset-form 

@mixin reset-form() { ... }

Description

Reset form styling and constrain textarea resize

Parameters

None.

Author

  • Joey Hoer

reset-button 

@mixin reset-button() { ... }

Description

Reset default button styles

Parameters

None.

Requires

Author

  • Joey Hoer

reset-textfield 

@mixin reset-textfield() { ... }

Description

Reset default text fields

Parameters

None.

Requires

Author

  • Joey Hoer

reset-paragraph 

@mixin reset-paragraph() { ... }

Description

Some paragraph margins just get in the way

Parameters

None.

Author

  • Joey Hoer

reset-fluid 

@mixin reset-fluid() { ... }

Description

Make content fluid by default

Parameters

None.

Requires

Author

  • Joey Hoer

reset-figure 

@mixin reset-figure() { ... }

Description

Remove margins from figures

Parameters

None.

Author

  • Joey Hoer

reset-address 

@mixin reset-address() { ... }

Description

Reset address font-style

Parameters

None.

Author

  • Joey Hoer

reset 

@mixin reset($list) { ... }

Description

Print all the resets

Parameters

Name Description Type Default value
$list

$exclude (false) - A list of resets to be excluded

 —

Author

  • Joey Hoer

responsive-table 

@mixin responsive-table($headers) { ... }

Description

Create responsive tables where table headers label each "row" of table data Unless the content of each td is wrapped in a styling hook, a hack is needed to add left padding and/or a left border to the data. Add the following to the

Parameters

Name Description Type Default value
$headers

A list of headers, equivalent to the table headers (in order)

 List —

Author

  • Joey Hoer

reverse-italics 

@mixin reverse-italics($selectors: null) { ... }

Description

Italicize a section of text while de-italicizing those elements that would normally be italicized — such as <em>, <cite>, and <i>.

Parameters

Name Description Type Default value
$selectors

A list of CSS selectors that will not be italicized

 String, List null

Author

  • Joey Hoer

size 

@mixin size($width, $height: $width) { ... }

Description

Sets the size of an element (width and height)

Parameters

Name Description Type Default value
$width

The width

 Number —
$height

The height

 Number $width

Used by

Author

  • Joey Hoer

sticky-footer 

@mixin sticky-footer($wrapper: body, $footer: footer) { ... }

Description

Create a fluid sticky footer

Parameters

Name Description Type Default value
$wrapper

The wrapper in which the footer is contained

 Selector body
$footer

The footer element

 Selector footer

Requires

Links

Author

  • Joey Hoer

table 

@mixin table($td: null) - Selector(s, $tr: null) - Selector(s, $thead: null) - Selector(s, $tfoot: null) - Selector(s, $tbody: null) - Selector(s, $layout: auto) { ... }

Description

Quickly create CSS table layouts

Parameters

Name Description Type Default value
$td

of table cells

 String, List null) - Selector(s
$tr

of table rows

 String, List null) - Selector(s
$thead

of table header groups

 String, List null) - Selector(s
$tfoot

of table footer groups

 String, List null) - Selector(s
$tbody

of table row groups

 String, List null) - Selector(s
$layout

The value of the table's layout property

 String, List auto

Used by

Author

  • Joey Hoer

text-space-collapse 

@mixin text-space-collapse($method) { ... }

Description

Collapse whitespace between inline block elements

Parameters

Name Description Type Default value
$method

'font-size' - The method to use for collapsing space. There are two methods that may be used: "font-family" (default) and "font-size".

  • The "font-family" method uses a custom font family, "blank", that replaces the default space character with a zero width character. This allows the current font-size to cascade, however the font-family must be reset on all direct descendants.
  • The "font-size" method sets the font-size to zero. This prevents font-size from cascading, and it affects the value of an em for the element. The font-size must be reset on all direct descendants. This should generally be set to a rem value.
 String —

Author

  • Joey Hoer

_trbl 

@mixin _trbl($trbl, $property: '') { ... }

Description

Prints top, right, bottom, left values for a given property.

As with other CSS properties, if there is only one component value, it applies to all sides. If there are two values, the top and bottom paddings are set to the first value and the right and left paddings are set to the second. If there are three values, the top is set to the first value, the left and right are set to the second, and the bottom is set to the third. If there are four values, they apply to the top, right, bottom, and left, respectively.

NOTE: Passing null for a value will disable rule creation for the corresponding side(s)

Parameters

Name Description Type Default value
$trbl

A list of TRBL (top, right, bottom, left) values.

 List —
$property

The property.

 String ''

Requires

Used by

Author

  • Joey Hoer

triangle 

@mixin triangle($direction, $size, $color: currentColor) { ... }

Description

Draw a CSS trangle

Parameters

Name Description Type Default value
$direction

The direction which the triangle should point. Accepts "up", "down", "left", "right".

 String —
$size

The size of the triangle. Accepts up to two values. If only one value is passed an equilateral triangle will be drawn. If two values are passed, the first value defines the base and the second value defines the height of the triangle.

 Number, List —
$color

The color of the triangle. Defaults to currentColor

 Color currentColor

Requires

Author

  • Joey Hoer

truncate 

@mixin truncate() { ... }

Description

Truncate text to a single line, clipped with an ellipsis.

Parameters

None.

Author

  • Joey Hoer

underline 

@mixin underline($height, $color, $location: 0.12em) { ... }

Description

Draw a customizable underline

Parameters

Name Description Type Default value
$height

The height of the underline

 Number —
$color

The color of the underline

 Color —
$location

The location on the vertical axis where the line should be drawn (offset from the bottom)

 Number 0.12em

Author

  • Joey Hoer

selectors

functions

class-prefix 

@function class-prefix($prefix) { ... }

Description

Generate class prefix selector

Parameters

Name Description Type Default value
$prefix

The class prefix

 String —

Author

  • Joey Hoer

class-suffix 

@function class-suffix($suffix) { ... }

Description

Generate class suffix selector

Parameters

Name Description Type Default value
$suffix

The class suffix

 String —

Author

  • Joey Hoer

headers 

@function headers($from: null, $through: null) { ... }

Description

Get a list of header selectors Will return all header selectors by default

Parameters

Name Description Type Default value
$from

The header index to start with

 Number null
$through

The header index to end with

 Number null

Returns

A list of header selectors

List

Used by

Author

  • Joey Hoer

attribute-selectors 

@function attribute-selectors($exclude: ()) { ... }

Description

Get a list of input type selectors Will return all input type selectors by default

Parameters

Name Description Type Default value
$exclude

The types to exclude

 List ()

Returns

A list of input type selectors

List

Requires

Used by

Author

  • Joey Hoer

text-inputs 

@function text-inputs($exclude: ()) { ... }

Description

Get a list of text-based input selectors Will return all text-based input selectors by default

Parameters

Name Description Type Default value
$exclude

The types to exclude

 List ()

Returns

A list of text-based input selectors

List

Requires

Used by

Author

  • Joey Hoer

button-inputs 

@function button-inputs($exclude: ()) { ... }

Description

Get a list of button-based input selectors Will return all button-based input selectors by default

Parameters

Name Description Type Default value
$exclude

The types to exclude

 List ()

Returns

A list of button-based input selectors

List

Requires

Used by

Author

  • Joey Hoer

media-elements 

@function media-elements() { ... }

Description

Get a list of media elements Will return all media element selectors by default

Parameters

None.

Returns

A list of media element selectors

List

Requires

Used by

Author

  • Joey Hoer

selected 

@function selected($active: false) { ... }

Description

Apply rules to :hover and :focus (and, optionally, :active) states. More friendly for touchscreens, keyboard navigators, etc.; account for the various means of targeting elements.

Parameters

Name Description Type Default value
$active

Declare whether or not to target the :active state

 Bool false

Returns

A list of "selected" psuedo classes

List

Requires

Used by

Author

  • Joey Hoer

grid

mixins

grid-float 

@mixin grid-float() { ... }

Parameters

None.

Author

  • Joey Hoer

set-gutter 

@mixin set-gutter() { ... }

Parameters

None.

Author

  • Joey Hoer

grid-container 

@mixin grid-container() { ... }

Description

Contain floated grid Grids with fixed width gutter should specify a gutter width Grids with fluid (percentage based) gutters need not specify gutter width

Parameters

None.

Author

  • Joey Hoer

grid-span-columns 

@mixin grid-span-columns() { ... }

Parameters

None.

Author

  • Joey Hoer

omega 

@mixin omega() { ... }

Description

Remove last column's gutter

Parameters

None.

Requires

Author

  • Joey Hoer

nth-child 

@mixin nth-child() { ... }

Description

Remove nth-child's gutter

Parameters

None.

Used by

Author

  • Joey Hoer