Core

variables

hf-generate-base

$hf-generate-base: $hf-generate !default;

Description

Controls whether styles in this file (base) are generated.

Type

Boolean

Author

Benjamin Fleming

[private] -hf-default-font-size

$-hf-default-font-size: 16px;

Description

Defines the browser default font size for the web document.

Type

Number

Used by

[function] hf-convert
[mixin] hf-media

Author

Benjamin Fleming

hf-generate

$hf-generate: true !default;

Description

Controls whether styles in the framework are generated. This is useful if you only intend on using the functions, mixins, placeholders, and variables.

Type

Boolean

Author

Benjamin Fleming

hf-prefixes

$hf-prefixes: (
	'module': '',
	'utility': '\\+',
	'parameter': '-',
	'state': 'is-',
	'feature': 'has-',
	'featureless': 'no-'
) !default;

Description

Defines the class prefixes for different types of style definitions.

Type

Map

Map structure

Map keyName	Map keyDescription	Map keyType	Map keyValue
`module`	—none	`String`	—none
`utility`	—none	`String`	`\+`
`parameter`	—none	`String`	`-`
`value`	—none	`String`	`-`
`state`	—none	`String`	`is-`
`feature`	—none	`String`	`has-`
`featureless`	—none	`String`	`no-`

Used by

[function] hf-name
[function] hf-selector

Author

Benjamin Fleming

hf-font-size

$hf-font-size: 16px !default;

Description

Defines the base font size for the web document.

Type

Number

Used by

[function] hf-convert

Author

Benjamin Fleming

hf-max-width

$hf-max-width: 1280px !default;

Description

Defines the maximum width for responsive modules to consider. On the contrary this does not determine the maximum width of the site.

Type

Number

Author

Benjamin Fleming

hf-sizes

$hf-sizes: (
	'sm': 0.5em,
	'md':   1em,
	'lg':   2em
) !default;

Description

Defines the different sizes to be used.

Type

Map

Map structure

Map keyName	Map keyDescription	Map keyType	Map keyValue
`sm`	—none	`Number`	`0.5em`
`md`	—none	`Number`	`1em`
`lg`	—none	`Number`	`2em`

Used by

[function] hf-size

Author

Benjamin Fleming

hf-gutters

$hf-gutters: (
	'sm': 0.5em,
	'md':   1em,
	'lg':   2em
) !default;

Description

Defines the different gutters to be used.

Type

Map

Map structure

Map keyName	Map keyDescription	Map keyType	Map keyValue
`sm`	—none	`Number`	`0.5em`
`md`	—none	`Number`	`1em`
`lg`	—none	`Number`	`2em`

Used by

[function] hf-gutter

Author

Benjamin Fleming

hf-divisions

$hf-divisions: (
	'12': (12 / 12 * 100%),
	'11': (11 / 12 * 100%),
	'10': (10 / 12 * 100%),
	 '9': ( 9 / 12 * 100%),
	 '8': ( 8 / 12 * 100%),
	 '7': ( 7 / 12 * 100%),
	 '6': ( 6 / 12 * 100%),
	 '5': ( 5 / 12 * 100%),
	 '4': ( 4 / 12 * 100%),
	 '3': ( 3 / 12 * 100%),
	 '2': ( 2 / 12 * 100%),
	 '1': ( 1 / 12 * 100%)
) !default;

Description

Defines the different divisions to be used.

Type

Map

Map structure

Map keyName	Map keyDescription	Map keyType	Map keyValue
`12`	—none	`Number`	`100%`
`11`	—none	`Number`	`91.67%`
`10`	—none	`Number`	`83.33%`
`9`	—none	`Number`	`75%`
`8`	—none	`Number`	`66.67%`
`7`	—none	`Number`	`58.33%`
`6`	—none	`Number`	`50%`
`5`	—none	`Number`	`41.67%`
`4`	—none	`Number`	`33.33%`
`3`	—none	`Number`	`25%`
`2`	—none	`Number`	`16.67%`
`1`	—none	`Number`	`8.33%`

Used by

[function] hf-division

Author

Benjamin Fleming

hf-breakpoints

$hf-breakpoints: (
	'mobl':    0px,
	'tabl':  640px,
	'desk': 1080px
) !default;

Description

Defines the different breakpoints to be used. Breakpoints are to be taken as anything at or above the labels value.

Type

Map

Map structure

Map keyName	Map keyDescription	Map keyType	Map keyValue
`mobl`	—none	`Number`	`0px`
`tabl`	—none	`Number`	`640px`
`desk`	—none	`Number`	`1080px`

Used by

[function] hf-breakpoint
[mixin] hf-media
[mixin] hf-breakpoint
[mixin] hf-responsive

Author

Benjamin Fleming

functions

[private] -hf-slice

@function -hf-slice($list, $start: 1, $length: length($list)) { ... }

Description

Slices a list All error checking is removed as being only a helper function for this file appropriate checking is done in context.

Parameters

parameterName	parameterDescription	parameterType	parameterDefault value
`$list`	—none	`List`	—none
`$start`	—none	`Number`	`1`
`$length`	—none	`Number`	`length($list)`

Returns

List

Used by

[function] -hf-test
[function] -hf-assert-lines

Author

Hugo Giraudel

[private] -hf-test

@function -hf-test($value, $as) { ... }

Description

Tests if the value's type matches This is a recursive helper method for the actual test function below.

Parameters

parameterName	parameterDescription	parameterType	parameterDefault value
`$value`	—none	`Any`	—none
`$as`	—none	`List`	—none

Returns

Boolean

Throws

{$as-type} is not a string

Requires

[function] -hf-slice

Used by

[function] hf-test
[mixin] hf-assert

Author

Benjamin Fleming

[private] -hf-assert-lines

@function -hf-assert-lines($as, $plural: false) { ... }

Description

Generates all assertion messages for a given test (I find it pretty funny that this error printing function is twice as large as the actual test function)

Parameters

parameterName	parameterDescription	parameterType	parameterDefault value
`$as`	—none	`List`	—none
`$plural`	—none	`Boolean`	`false`

Returns

List

Requires

[function] -hf-slice

Used by

[mixin] hf-assert

Author

Benjamin Fleming

hf-test

@function hf-test($value, $as) { ... }

Description

Tests a value's type against a list of types

Parameters

parameterName	parameterDescription	parameterType	parameterDefault value
`$value`	—none	`Any`	—none
`$as`	—none	`List` or `String`	—none

Returns

Boolean

Requires

[function] -hf-test

Author

Benjamin Fleming

mixins

hf-assert

@mixin hf-assert($value, $as) { ... }

Description

Asserts a value's type against a list of types

Parameters

parameterName	parameterDescription	parameterType	parameterDefault value
`$value`	—none	`Any`	—none
`$as`	—none	`List` or `String`	—none

Output

An error only if the test fails.

Requires

[function] -hf-test
[function] -hf-assert-lines

Author

Benjamin Fleming

Core → Components

mixins

hf-button

@mixin hf-button($font-size: 1em, $padding: 0, $border-width: 0, $line-height: 1, $multiline: false) { ... }

Description

A mixin for styling buttons

Parameters

parameterName	parameterDescription	parameterType	parameterDefault value
`$font-size`	—none	`Number`	`1em`
`$padding`	—none	`Number` or `List`	`0`
`$border-width`	—none	`Number` or `List`	`0`
`$line-height`	—none	`Number`	`1`
`$multiline`	—none	`Boolean`	`false`

Requires

[mixin] hf-textbox

Author

Benjamin Fleming

hf-field

@mixin hf-field($font-size: 1em, $padding: 0, $border-width: 0, $line-height: 1) { ... }

Description

A mixin for styling input, select and textarea elements

Parameters

parameterName	parameterDescription	parameterType	parameterDefault value
`$font-size`	—none	`Number`	`1em`
`$padding`	—none	`Number` or `List`	`0`
`$border-width`	—none	`Number` or `List`	`0`
`$line-height`	—none	`Number`	`1`

Requires

[mixin] hf-textbox

Author

Benjamin Fleming

hf-icon

@mixin hf-icon($size: $hf-icon-size, $font: $hf-icon-font, $sprite: $hf-icon-sprite) { ... }

Description

Turns an element into an icon module

Parameters

parameterName	parameterDescription	parameterType	parameterDefault value
`$size`	—none	`Number`	`$hf-icon-size`
`$font`	—none	`String` or `Boolean`	`$hf-icon-font`
`$sprite`	—none	`String` or `Boolean`	`$hf-icon-sprite`

Requires

[variable] hf-icon-size
[variable] hf-icon-font
[variable] hf-icon-sprite

Author

Benjamin Fleming

hf-icon-type

@mixin hf-icon-type($value) { ... }

Description

Adds a specific icon type to an icon module

Parameters

parameterName	parameterDescription	parameterType	parameterDefault value
`$value`	—none	`List` or `String` or `Number`	—none

Throws

Pseudo selector #{$pseudo} is neither

Author

Benjamin Fleming

variables

hf-generate-icon

$hf-generate-icon: $hf-generate !default;

Description

Controls whether styles in this file (icon) are generated.

Type

Boolean

Author

Benjamin Fleming

hf-icon-selector

$hf-icon-selector: hf-module('icon') !default;

Description

The icon module selector

Type

String

Author

Benjamin Fleming

hf-icon-font

$hf-icon-font: false !default;

Description

The name of the icon font, if applicable

Type

String or Boolean

Used by

[mixin] hf-icon

Author

Benjamin Fleming

hf-icon-sprite

$hf-icon-sprite: false !default;

Description

The path to the icon sprite sheet, if applicable

Type

String or Boolean

Used by

[mixin] hf-icon

Author

Benjamin Fleming

hf-icon-size

$hf-icon-size: $hf-font-size !default;

Description

The default size of the icon

Type

Number

Used by

[mixin] hf-icon

Author

Benjamin Fleming

hf-icons

$hf-icons: false !default;

Description

Map of icons name and value. If the value is a string of length one, that is treated as a font character. If the value is a string of more than length one, that is treated as a image file. If the value is a number or list of numbers, that is treated as a sprite image position.

Type

Map

Author

Benjamin Fleming

Core → Functions

functions

hf-name

@function hf-name($type, $name, $as-selector: true) { ... }

Description

Creates a usable class name from a prefix and a name.

Parameters

parameterName	parameterDescription	parameterType	parameterDefault value
`$type`	The prefix type. The value is retrieved from the $hf-prefixes map.	`String`	—none
`$name`	The name of the class to be prefixed.	`String`	—none
`$as-selector`	Whether to return it as a usable selector, or just the name.	`Boolean`	`true`

Returns

String —

The prefixed class name

Requires

[variable] hf-prefixes

Used by

[function] hf-selector
[function] hf-module
[function] hf-utility
[function] hf-parameter
[function] hf-state
[function] hf-feature
[function] hf-featureless

Author

Benjamin Fleming

hf-selector

@function hf-selector($type, $names) { ... }

Description

Creates a hydro selector using the set prefixes and a multidimensional list of names.

Parameters

parameterName	parameterDescription	parameterType	parameterDefault value
`$type`	If a string, the prefix is retrieved from the `$hf-prefixes` map. If a list (of size 2), the first value is treated as a selector string, and the second prefix type. This allows prefixing entire selectors.	`String` or `List`	—none
`$names`	Each name passed is prefixed and separated by a comma. If a name is also a list each item of that is prefixed and joined together.	`String` or `List`	—none

Returns

String —

Selector

Requires

[variable] hf-prefixes
[function] hf-name

Used by

[mixin] hf-selector
[mixin] hf-module
[mixin] hf-utility
[mixin] hf-parameter
[mixin] hf-state
[mixin] hf-feature
[mixin] hf-featureless

Author

Benjamin Fleming

hf-module

@function hf-module($name) { ... }

Description

Creates a module class name.

Parameters

parameterName	parameterDescription	parameterType	parameterDefault value
`$name`	The name of the module.	`String`	—none

Returns

String —

The module class name

Requires

[function] hf-name

Author

Benjamin Fleming

hf-utility

@function hf-utility($name) { ... }

Description

Creates a utility class name.

Parameters

parameterName	parameterDescription	parameterType	parameterDefault value
`$name`	The name of the utility.	`String`	—none

Returns

String —

The utility class name

Requires

[function] hf-name

Author

Benjamin Fleming

hf-parameter

@function hf-parameter($name) { ... }

Description

Creates a parameter class name.

Parameters

parameterName	parameterDescription	parameterType	parameterDefault value
`$name`	The name of the parameter.	`String`	—none

Returns

String —

The parameter class name

Requires

[function] hf-name

Author

Benjamin Fleming

hf-state

@function hf-state($name) { ... }

Description

Creates a state class name.

Parameters

parameterName	parameterDescription	parameterType	parameterDefault value
`$name`	The name of the state.	`String`	—none

Returns

String —

The state class name

Requires

[function] hf-name

Author

Benjamin Fleming

hf-feature

@function hf-feature($name) { ... }

Description

Creates a feature class name.

Parameters

parameterName	parameterDescription	parameterType	parameterDefault value
`$name`	The name of the feature.	`String`	—none

Returns

String —

The feature class name

Requires

[function] hf-name

Author

Benjamin Fleming

hf-featureless

@function hf-featureless($name) { ... }

Description

Creates a featureless class name.

Parameters

parameterName	parameterDescription	parameterType	parameterDefault value
`$name`	The name of the feature.	`String`	—none

Returns

String —

The featureless class name

Requires

[function] hf-name

Author

Benjamin Fleming

hf-size

@function hf-size($type) { ... }

Description

Gets a sizes value. Just a readable wrapper for map-get() on $hf-sizes.

Parameters

parameterName	parameterDescription	parameterType	parameterDefault value
`$type`	The size type	`String`	—none

Returns

Number

Requires

[variable] hf-sizes

Author

Benjamin Fleming

hf-breakpoint

@function hf-breakpoint($type) { ... }

Description

Gets a breakpoints value. Just a readable wrapper for map-get() on $hf-breakpoints.

Parameters

parameterName	parameterDescription	parameterType	parameterDefault value
`$type`	The breakpoint type	`String`	—none

Returns

Number

Requires

[variable] hf-breakpoints

Author

Benjamin Fleming

hf-gutter

@function hf-gutter($type) { ... }

Description

Gets a gutters value. Just a readable wrapper for map-get() on $hf-gutters.

Parameters

parameterName	parameterDescription	parameterType	parameterDefault value
`$type`	The gutter type	`String`	—none

Returns

Number

Requires

[variable] hf-gutters

Author

Benjamin Fleming

hf-division

@function hf-division($type) { ... }

Description

Gets a divisions value. Just a readable wrapper for map-get() on $hf-divisions.

Parameters

parameterName	parameterDescription	parameterType	parameterDefault value
`$type`	The division type	`String`	—none

Returns

Number

Requires

[variable] hf-divisions

Author

Benjamin Fleming

hf-shorthand

@function hf-shorthand($list, $key) { ... }

Description

Returns the value from a shorthand CSS list associated with the key.

Parameters

parameterName	parameterDescription	parameterType	parameterDefault value
`$list`	—none	`List` or `Map`	—none
`$key`	Valid keys: top, topleft, right, topright, bottom, bottomright, left, bottomleft	`String`	—none

Returns

Any type

Throws

Cannot return #{inspect($key)} item from an empty list
{inspect($key)} is neither top/topleft, right/topright, bottom/bottomright or left/bottomleft

Used by

[function] top
[function] right
[function] bottom
[function] left
[mixin] hf-textbox

Author

Benjamin Fleming

hf-flatten

@function hf-flatten($list, $separator: auto) { ... }

Description

Flatten a multi-dimensional list into a single dimension list.

Parameters

parameterName	parameterDescription	parameterType	parameterDefault value
`$list`	—none	`Any`	—none
`$separator`	—none	`String`	`auto`

Returns

List

Throws

{inspect($separator)} is not a valid separator

Used by

[function] hf-sum

Author

Benjamin Fleming

hf-sort

@function hf-sort($list, $direction: asc, $separator: auto, $keys: false) { ... }

Description

Insertion sort for sorting comparison-based values.

Parameters

parameterName	parameterDescription	parameterType	parameterDefault value
`$list`	—none	`List` or `Map`	—none
`$direction`	—none	`String`	`asc`
`$separator`	—none	`String`	`auto`
`$keys`	When sorting a map, whether to sort by it's keys (or it's values)	`Boolean`	`false`

Returns

List or Map

Throws

{inspect($list)} is not a list
{inspect($direction)} is not a valid direction
{inspect($x)} and #{inspect($y)} are incomparable values

Used by

[mixin] hf-responsive

Author

Benjamin Fleming

top

@function top($list) { ... }

Description

Returns the "top" value of a list. Useful to extract individual side values from CSS short-hand lists like paddings.

Parameters

parameterName	parameterDescription	parameterType	parameterDefault value
`$list`	—none	`List` or `Map`	—none

Returns

Any type

Requires

[function] hf-shorthand

Author

Benjamin Fleming

right

@function right($list) { ... }

Description

Returns the "right" value of a list. Useful to extract individual side values from CSS short-hand lists like paddings.

Parameters

parameterName	parameterDescription	parameterType	parameterDefault value
`$list`	—none	`List` or `Map`	—none

Returns

Any type

Requires

[function] hf-shorthand

Author

Benjamin Fleming

bottom

@function bottom($list) { ... }

Description

Returns the "bottom" value of a list. Useful to extract individual side values from CSS short-hand lists like paddings.

Parameters

parameterName	parameterDescription	parameterType	parameterDefault value
`$list`	—none	`List` or `Map`	—none

Returns

Any type

Requires

[function] hf-shorthand

Author

Benjamin Fleming

left

@function left($list) { ... }

Description

Returns the "left" value of a list. Useful to extract individual side values from CSS short-hand lists like paddings.

Parameters

parameterName	parameterDescription	parameterType	parameterDefault value
`$list`	—none	`List` or `Map`	—none

Returns

Any type

Requires

[function] hf-shorthand

Author

Benjamin Fleming

[private] -hf-absolute-unit

@function -hf-absolute-unit($value) { ... }

Description

Checks if a unit is absolute.

Parameters

parameterName	parameterDescription	parameterType	parameterDefault value
`$value`	The number or unit (as a string) to check.	`Number` or `String`	—none

Returns

Boolean

Requires

[variable] hf-number-absolute-units

Used by

[function] -hf-unit-normalize
[function] hf-unit-type
[function] hf-convert

Author

Benjamin Fleming

[private] -hf-relative-unit

@function -hf-relative-unit($value) { ... }

Description

Checks if a unit is relative.

Parameters

parameterName	parameterDescription	parameterType	parameterDefault value
`$value`	The number or unit (as a string) to check.	`Number` or `String`	—none

Returns

Boolean

Requires

[variable] hf-number-relative-units

Used by

[function] -hf-unit-normalize
[function] hf-unit-type
[function] hf-convert

Author

Benjamin Fleming

[private] -hf-unit-normalize

@function -hf-unit-normalize($value) { ... }

Description

Converts a number into a normalized value. Used for conversion.

Parameters

parameterName	parameterDescription	parameterType	parameterDefault value
`$value`	The number to normalize	`Number`	—none

Returns

Number —

The normalized number

Example

-hf-unit-normalize(1.5pt) // Outputs 2

Requires

[variable] hf-number-absolute-units
[variable] hf-number-relative-units
[function] -hf-absolute-unit
[function] -hf-relative-unit

Used by

[function] hf-convert

Author

Benjamin Fleming

hf-unit-type

@function hf-unit-type($value) { ... }

Description

Gets the unit type

Parameters

parameterName	parameterDescription	parameterType	parameterDefault value
`$value`	The number or unit (as a string) to check.	`Number` or `String`	—none

Returns

String —

absolute, relative or other

Requires

[function] -hf-relative-unit
[function] -hf-absolute-unit

Author

Benjamin Fleming

hf-precision

@function hf-precision($value, $decimals: $hf-number-precision, $type: round) { ... }

Description

Round a number to specified number of decimal places

Parameters

parameterName	parameterDescription	parameterType	parameterDefault value
`$value`	The number to round	`Number`	—none
`$decimals`	The number of decimals to round to	`Number`	`$hf-number-precision`
`$type`	[round \| ceil \| floor] The rounding type	`String`	`round`

Returns

Number —

The rounded number

Throws

{$value} is not a number.
{$decimals} is not a non-negative number.
{$type} is not a valid type

Requires

[variable] hf-number-precision

Used by

[function] hf-convert

Author

Benjamin Fleming

hf-convert

@function hf-convert($value, $unit, $factor: null) { ... }

Description

Convert a number to another unit. TODO Only convert REM units to the base font size factor

Parameters

parameterName	parameterDescription	parameterType	parameterDefault value
`$value`	The number (or list or map of numbers) to convert	`Number` or `List` or `Map`	—none
`$unit`	The unit to convert the number to	`String`	—none
`$factor`	The number to convert against (when converting between absolute and relative values) This is defaulted to the global font size set in the settings file.	`Number`	`null`

Returns

Number or List or Map —

The converted number (or list or map of numbers)

Example

hf-convert(0.5em, '%') // Outputs 50%
hf-convert(32px, em, 16px) // Outputs 2em

Throws

{inspect($value)} is not a valid type
{inspect($unit)} is not a valid unit
{inspect($value)} does not have a valid unit

Requires

[variable] hf-font-size
[variable] hf-number-absolute-units
[variable] hf-number-relative-units
[variable] -hf-default-font-size
[function] hf-precision
[function] -hf-absolute-unit
[function] -hf-relative-unit
[function] -hf-unit-normalize

Used by

[function] hf-sum
[function] px
[function] em
[function] rem
[function] percent
[function] decimal
[mixin] hf-media

Author

Benjamin Fleming

hf-sum

@function hf-sum($format, $values) { ... }

Description

Sum a list of values, either converting them all to a single unit or outputting them as a CSS3 calc() value.

Parameters

parameterName	parameterDescription	parameterType	parameterDefault value
`$format`	—none	`Number` or `String` or `Map`	—none
`$values`	—none	`Number`	—none

Returns

Number or String

Example

hf-sum(2px, 5px, -1px) // Outputs 6px
hf-sum(10px, -2em, 50%) // Outputs calc(10px - 2em + 50%)
hf-sum('em', 8px, 1em, 50%) // Outputs 2em (given that $hf-font-size is 16px)
hf-sum(('%': 8px), 16px, 24px, 1.5em) // Outputs 650%

Throws

No numbers were passed
{inspect($format)} is an invalid format
{inspect($item)} is not a number

Requires

[function] hf-flatten
[function] hf-convert

Used by

[mixin] hf-textbox

Author

Benjamin Fleming

px

@function px($value, $factor: null) { ... }

Description

Converts a number (or list of numbers) to pixels.

Parameters

parameterName	parameterDescription	parameterType	parameterDefault value
`$value`	The number (or list or map of numbers) to convert	`Number` or `List` or `Map`	—none
`$factor`	The number to convert against (when converting between absolute and relative values) This is defaulted to the global font size set in the settings file.	`Number`	`null`

Returns

Number or List or Map —

The converted number (or list or map of numbers) in pixels

Requires

[function] hf-convert

Author

Benjamin Fleming

em

@function em($value, $factor: null) { ... }

Description

Converts a number (or list of numbers) to EM's.

Parameters

parameterName	parameterDescription	parameterType	parameterDefault value
`$value`	The number (or list or map of numbers) to convert	`Number` or `List` or `Map`	—none
`$factor`	The number to convert against (when converting between absolute and relative values) This is defaulted to the global font size set in the settings file.	`Number`	`null`

Returns

Number or List or Map —

The converted number (or list or map of numbers) in EM's

Requires

[function] hf-convert

Author

Benjamin Fleming

rem

@function rem($value, $factor: null) { ... }

Description

Converts a number (or list of numbers) to relative EM's.

Parameters

parameterName	parameterDescription	parameterType	parameterDefault value
`$value`	The number (or list or map of numbers) to convert	`Number` or `List` or `Map`	—none
`$factor`	The number to convert against (when converting between absolute and relative values) This is defaulted to the global font size set in the settings file.	`Number`	`null`

Returns

Number or List or Map —

The converted number (or list or map of numbers) in relative EM's

Requires

[function] hf-convert

Author

Benjamin Fleming

percent

@function percent($value, $factor: null) { ... }

Description

Converts a number (or list of numbers) to a percentage.

Parameters

parameterName	parameterDescription	parameterType	parameterDefault value
`$value`	The number (or list or map of numbers) to convert	`Number` or `List` or `Map`	—none
`$factor`	The number to convert against (when converting between absolute and relative values) This is defaulted to the global font size set in the settings file.	`Number`	`null`

Returns

Number or List or Map —

The converted number (or list or map of numbers) as a percentage

Requires

[function] hf-convert

Author

Benjamin Fleming

decimal

@function decimal($value, $factor: null) { ... }

Description

Converts a number (or list of numbers) to a decimal.

Parameters

parameterName	parameterDescription	parameterType	parameterDefault value
`$value`	The number (or list or map of numbers) to convert	`Number` or `List` or `Map`	—none
`$factor`	The number to convert against (when converting between absolute and relative values) This is defaulted to the global font size set in the settings file.	`Number`	`null`

Returns

Number or List or Map —

The converted number (or list or map of numbers) as a decimal

Requires

[function] hf-convert

Author

Benjamin Fleming

hf-str-replace

@function hf-str-replace($string, $search, $replace) { ... }

Description

Replaces all occurrences of a substring with another in a string

Parameters

parameterName	parameterDescription	parameterType	parameterDefault value
`$string`	Initial string	`String`	—none
`$search`	Substring to replace	`String`	—none
`$replace`	('') - New value	`String`	—none

Returns

String —

Updated string

Author

Hugo Giraudel

variables

hf-number-precision

$hf-number-precision: 5 !default;

Description

The number of decimals to round/ceil/floor to

Type

Number

Used by

[function] hf-precision

Author

Benjamin Fleming

hf-number-absolute-units

$hf-number-absolute-units: (
	'px': 1px,
	'in': (1in / 96),
	'cm': (2.54cm / 96),
	'mm': (25.4mm / 96),
	'pt': (72pt / 96),
	'pc': (6pc / 96)
) !default;

Description

A map of absolute units and their relative values. Used when converting. Their ratios are related to a normalised absolute value (see -hf-unit-normalize). As an example, "1" (as a normalized absolute unit) is equivalent to "1px". To put it simply, each value in the map should be the equivalent to every other (1px = 0.75pt = 0.0625pc = ...)

Type

Map

Map structure

Map keyName	Map keyDescription	Map keyType	Map keyValue
`px`	—none	`Number`	`1px`
`in`	—none	`Number`	`0.0104in`
`cm`	—none	`Number`	`0.0265cm`
`mm`	—none	`Number`	`0.2646mm`
`pt`	—none	`Number`	`0.75pt`
`pc`	—none	`Number`	`0.0625pc`

Used by

[function] -hf-absolute-unit
[function] -hf-unit-normalize
[function] hf-convert

Author

Benjamin Fleming

hf-number-relative-units

$hf-number-relative-units: (
	'': 1,
	'%': 100%,
	'em': 1em,
	'rem': 1rem,
	'vw': 100vw,
	'vh': 100vh,
	'vmin': 100vmin,
	'vmax': 100vmax,
	'deg': 360deg,
	'rad': 6.2832rad,
	'grad': 400grad,
	'turn': 1turn
) !default;

Description

A map of relative units and their relative values. Used when converting. Their ratios are related to a normalised relative value (see -hf-unit-normalize). As an example, "1" (as a normalized relative unit) is equivalent to "1em". To put it simply, each value in the map should be the equivalent to every other (1em = 100% = 360deg = ...)

Type

Map

Map structure

Map keyName	Map keyDescription	Map keyType	Map keyValue
`[1]`	—none	`Number`	—none
`%`	—none	`Number`	`100%`
`em`	—none	`Number`	`1em`
`rem`	—none	`Number`	`1rem`
`vw`	—none	`Number`	`100vw`
`vh`	—none	`Number`	`100vh`
`vmin`	—none	`Number`	`100vmin`
`vmax`	—none	`Number`	`100vmax`
`deg`	—none	`Number`	`360deg`
`rad`	—none	`Number`	`6.2832rad`
`grad`	—none	`Number`	`400grad`
`turn`	—none	`Number`	`1turn`

Used by

[function] -hf-relative-unit
[function] -hf-unit-normalize
[function] hf-convert

Author

Benjamin Fleming

Core → Libraries

variables

hf-generate-normalize

$hf-generate-normalize: $hf-generate !default;

Description

Controls whether styles in this file (normalize) are generated.

Type

Boolean

Authors

Nicolas Gallagher
Jonathan Neal

Core → Structures

variables

hf-generate-alignbox

$hf-generate-alignbox: $hf-generate !default;

Description

Controls whether styles in this file (alignbox) are generated.

Type

Boolean

Author

Benjamin Fleming

hf-alignbox-selector

$hf-alignbox-selector: hf-module('alignbox') !default;

Description

The alignbox module selector

Type

String

Author

Benjamin Fleming

hf-alignbox-box-selector

$hf-alignbox-box-selector: hf-module('box') !default;

Description

The alignbox box module selector

Type

String

Author

Benjamin Fleming

hf-generate-bar

$hf-generate-bar: $hf-generate !default;

Description

Controls whether styles in this file (bar) are generated.

Type

Boolean

Author

Benjamin Fleming

hf-bar-selector

$hf-bar-selector: hf-module('bar') !default;

Description

The bar module selector

Type

String

Author

Benjamin Fleming

hf-bar-item-selector

$hf-bar-item-selector: hf-module('item') !default;

Description

The bar item module selector

Type

String

Author

Benjamin Fleming

hf-generate-columns

$hf-generate-columns: $hf-generate !default;

Description

Controls whether styles in this file (columns) are generated.

Type

Boolean

Author

Benjamin Fleming

hf-columns-selector

$hf-columns-selector: hf-module('columns') !default;

Description

The columns module selector

Type

String

Author

Benjamin Fleming

hf-column-selector

$hf-column-selector: hf-module('column') !default;

Description

The column module selector

Type

String

Author

Benjamin Fleming

hf-generate-container

$hf-generate-container: $hf-generate !default;

Description

Controls whether styles in this file (container) are generated.

Type

Boolean

Author

Benjamin Fleming

hf-container-selector

$hf-container-selector: hf-module('container') !default;

Description

The container module selector

Type

String

Author

Benjamin Fleming

hf-generate-grid

$hf-generate-grid: $hf-generate !default;

Description

Controls whether styles in this file (grid) are generated.

Type

Boolean

Author

Benjamin Fleming

hf-grids

$hf-grids: 8 !default;

Description

Number of grid options for cells in a row at maximum width

Type

Number

Author

Benjamin Fleming

hf-grid-cell-contract

$hf-grid-cell-contract: 0% !default;

Description

How much can the cells contract before wrapping

Type

Number

Author

Benjamin Fleming

hf-grid-selector

$hf-grid-selector: hf-module('grid') !default;

Description

The grid module selector

Type

String

Author

Benjamin Fleming

hf-grid-cell-selector

$hf-grid-cell-selector: hf-module('cell') !default;

Description

The grid cell module selector

Type

String

Author

Benjamin Fleming

hf-generate-ratiobox

$hf-generate-ratiobox: $hf-generate !default;

Description

Controls whether styles in this file (ratiobox) are generated.

Type

Boolean

Author

Benjamin Fleming

hf-ratiobox-selector

$hf-ratiobox-selector: hf-module('ratiobox') !default;

Description

The ratiobox module selector

Type

String

Author

Benjamin Fleming

hf-ratiobox-box-selector

$hf-ratiobox-box-selector: hf-module('box') !default;

Description

The ratiobox box module selector

Type

String

Author

Benjamin Fleming

hf-ratiobox-ratios

$hf-ratiobox-ratios: (1, 1) (5, 4) (4, 3) (3, 2) (16, 10) (5, 3) (16, 9) (1.85, 1) (2, 1) (2.39, 1) !default;

Description

A list of ratios

Type

List

Author

Benjamin Fleming

hf-ratiobox-invert

$hf-ratiobox-invert: false !default;

Description

Whether or not the inversions of each ratio should be made a parameter

Type

Boolean

Author

Benjamin Fleming

hf-structure-h-gap-property

$hf-structure-h-gap-property: border !default;

Description

Whether the horizontal gap is applied using borders (border) or paddings (padding).

Type

String

Author

Benjamin Fleming

hf-structure-child-selector

$hf-structure-child-selector: '*' !default;

Description

The selector for the structure child element.

Type

String

Author

Benjamin Fleming

mixins

hf-alignbox

@mixin hf-alignbox($h-align: center, $v-align: center) { ... }

Parameters

parameterName	parameterDescription	parameterType	parameterDefault value
`$h-align`	—none	`String`	`center`
`$v-align`	—none	`String`	`center`

Throws

{inspect($h-align)} is not a valid horizontal alignment
{inspect($h-align)} is not a valid vertical alignment

Requires

[mixin] hf-display-flex
[mixin] hf-flex-flow
[mixin] hf-justify-content
[mixin] hf-align-items

Author

Benjamin Fleming

hf-alignbox-box

@mixin hf-alignbox-box($fix: none) { ... }

Parameters

parameterName	parameterDescription	parameterType	parameterDefault value
`$fix`	—none	`String`	`none`

Author

Benjamin Fleming

hf-ratiobox

@mixin hf-ratiobox($x: 1, $y: 1) { ... }

Parameters

parameterName	parameterDescription	parameterType	parameterDefault value
`$x`	—none	`Number`	`1`
`$y`	—none	`Number`	`1`

Throws

{inspect($n)} is not a positive decimal greater than zero

Author

Benjamin Fleming

hf-ratiobox-box

@mixin hf-ratiobox-box() { ... }

Parameters

None.

Author

Benjamin Fleming

hf-structure

@mixin hf-structure($h-align: left, $v-align: left, $h-gap: 0, $v-gap: 0, $h-outer-gap: false, $v-outer-gap: false, $reversed: false, $h-gap-property: $hf-structure-h-gap-property, $child-selector: $hf-structure-child-selector) { ... }

Description

Turns an element into a structural module.

Parameters

parameterName	parameterDescription	parameterType	parameterDefault value
`$h-align`	Either left, right, center or justify	`String`	`left`
`$v-align`	Either top, bottom, center or fill	`String`	`left`
`$h-gap`	The horizontal spacing between children	`Number`	`0`
`$v-gap`	The vertical spacing between children	`Number`	`0`
`$h-outer-gap`	Whether to add an outside horizontal gap to the children. Uses the value set in $h-gap.	`Boolean`	`false`
`$v-outer-gap`	Whether to add an outside vertical gap to the children. Uses the value set in $v-gap.	`Boolean`	`false`
`$reversed`	Whether to reverse the order of the children.	`Boolean`	`false`
`$h-gap-property`	Whether the horizontal gap is applied using borders (border) or paddings (padding).	`String`	`$hf-structure-h-gap-property`
`$child-selector`	The selector for the structure child element.	`String`	`$hf-structure-child-selector`

Output

Styles for a structural module. Will output up to two more selectors - one for the child elements, and one for the after pseudo element if the horizontal gap is set to justify.

Requires

[mixin] hf-display-flex
[mixin] hf-flex-flow
[mixin] hf-justify-content
[mixin] hf-align-items

Author

Benjamin Fleming

Core → Utilities

variables

hf-generate-clearfix

$hf-generate-clearfix: $hf-generate !default;

Description

Controls whether styles in this file (clearfix) are generated.

Type

Boolean

Author

Benjamin Fleming

hf-generate-gutters

$hf-generate-gutters: $hf-generate !default;

Description

Controls whether styles in this file (gutters) are generated.

Type

Boolean

Author

Benjamin Fleming

hf-generate-size

$hf-generate-size: $hf-generate !default;

Description

Controls whether styles in this file (size) are generated.

Type

Boolean

Author

Benjamin Fleming

hf-generate-text

$hf-generate-text: $hf-generate !default;

Description

Controls whether styles in this file (text) are generated.

Type

Boolean

Author

Benjamin Fleming

hf-generate-visibility

$hf-generate-visibility: $hf-generate !default;

Description

Controls whether styles in this file (visibility) are generated.

Type

Boolean

Author

Benjamin Fleming

mixins

hf-clearfix

@mixin hf-clearfix() { ... }

Description

The clearfix mixin.

Parameters

None.

Output

Styles on the :before and :after pseudo selectors that handle float clearing.

Author

Benjamin Fleming

hf-display-flex

@mixin hf-display-flex() { ... }

Description

Set display to flex

Parameters

None.

Output

Multiple display properties with vendor prefixed values

Used by

[mixin] hf-alignbox
[mixin] hf-structure

Author

Benjamin Fleming

hf-display-inline-flex

@mixin hf-display-inline-flex() { ... }

Description

Set display to inline flex

Parameters

None.

Output

Multiple display properties with vendor prefixed values

Author

Benjamin Fleming

hf-flex-direction

@mixin hf-flex-direction($direction: row) { ... }

Description

Set the flex direction

Parameters

parameterName	parameterDescription	parameterType	parameterDefault value
`$direction`	—none	`String`	`row`

Output

Multiple vendor prefixed flex direction properties

Author

Benjamin Fleming

hf-flex-wrap

@mixin hf-flex-wrap($wrap: nowrap) { ... }

Description

Set the flex wrap

Parameters

parameterName	parameterDescription	parameterType	parameterDefault value
`$wrap`	—none	`String`	`nowrap`

Output

Multiple vendor prefixed flex wrap properties

Author

Benjamin Fleming

hf-flex-flow

@mixin hf-flex-flow($flow: row nowrap) { ... }

Description

Set the flex flow

Parameters

parameterName	parameterDescription	parameterType	parameterDefault value
`$flow`	—none	`String` or `List`	`row nowrap`

Output

Multiple vendor prefixed flex flow properties

Used by

[mixin] hf-alignbox
[mixin] hf-structure

Author

Benjamin Fleming

hf-order

@mixin hf-order($order: 0) { ... }

Description

Set the flex order

Parameters

parameterName	parameterDescription	parameterType	parameterDefault value
`$order`	—none	`Number`	`0`

Output

Multiple vendor prefixed flex order properties

Author

Benjamin Fleming

hf-flex-grow

@mixin hf-flex-grow($grow: 0) { ... }

Description

Set the flex grow

Parameters

parameterName	parameterDescription	parameterType	parameterDefault value
`$grow`	—none	`Number`	`0`

Output

Multiple vendor prefixed flex grow properties

Author

Benjamin Fleming

hf-flex-shrink

@mixin hf-flex-shrink($shrink: 1) { ... }

Description

Set the flex shrink

Parameters

parameterName	parameterDescription	parameterType	parameterDefault value
`$shrink`	—none	`Number`	`1`

Output

Multiple vendor prefixed flex shrink properties

Author

Benjamin Fleming

hf-flex-basis

@mixin hf-flex-basis($basis: auto) { ... }

Description

Set the flex basis

Parameters

parameterName	parameterDescription	parameterType	parameterDefault value
`$basis`	—none	`String`	`auto`

Output

Multiple vendor prefixed flex basis properties

Author

Benjamin Fleming

hf-flex

@mixin hf-flex($grow: 0, $shrink: null, $basis: null) { ... }

Description

Set the shorthand flex property

Parameters

parameterName	parameterDescription	parameterType	parameterDefault value
`$grow`	—none	`Number`	`0`
`$shrink`	—none	`Number`	`null`
`$basis`	—none	`String`	`null`

Output

Multiple vendor prefixed flex properties

Author

Benjamin Fleming

hf-justify-content

@mixin hf-justify-content($justify: flex-start) { ... }

Description

Set content justification

Parameters

parameterName	parameterDescription	parameterType	parameterDefault value
`$justify`	—none	`String`	`flex-start`

Output

Multiple vendor prefixed justify content properties

Used by

[mixin] hf-alignbox
[mixin] hf-structure

Author

Benjamin Fleming

hf-align-items

@mixin hf-align-items($align: stretch) { ... }

Description

Set item alignment

Parameters

parameterName	parameterDescription	parameterType	parameterDefault value
`$align`	—none	`String`	`stretch`

Output

Multiple vendor prefixed align items properties

Used by

[mixin] hf-alignbox
[mixin] hf-structure

Author

Benjamin Fleming

hf-align-self

@mixin hf-align-self($align: auto) { ... }

Description

Set self alignment

Parameters

parameterName	parameterDescription	parameterType	parameterDefault value
`$align`	—none	`String`	`auto`

Output

Multiple vendor prefixed align self properties

Author

Benjamin Fleming

hf-align-content

@mixin hf-align-content($align: stretch) { ... }

Description

Set content alignment

Parameters

parameterName	parameterDescription	parameterType	parameterDefault value
`$align`	—none	`String`	`stretch`

Output

Multiple vendor prefixed align content properties

Author

Benjamin Fleming

hf-media

@mixin hf-media($device: all, $from: null, $until: null, $property: width) { ... }

Description

Simple media query abstraction for expressive and maintainable media queries.

Parameters

parameterName	parameterDescription	parameterType	parameterDefault value
`$device`	—none	`String`	`all`
`$from`	—none	`Number` or `List` or `String`	`null`
`$until`	—none	`Number` or `List` or `String`	`null`
`$property`	—none	`String`	`width`

Content

This mixin allows extra content to be passed (through the @content directive). Role: Styles to go inside the media query

Output

Media query following the parameters passed

Throws

{inspect($value)} is not a valid value
{inspect($value)} is not a valid ratio list
{inspect($dim)} is not a valid ratio list value
{inspect($value)} is not a

Requires

[variable] hf-breakpoints
[variable] -hf-default-font-size
[function] hf-convert

Used by

[mixin] hf-from
[mixin] hf-until
[mixin] hf-breakpoint
[mixin] hf-responsive

Author

Benjamin Fleming

hf-from

@mixin hf-from($value, $property: width) { ... }

Description

Media query from a minimum value

Parameters

parameterName	parameterDescription	parameterType	parameterDefault value
`$value`	—none	`Number` or `List` or `String`	—none
`$property`	—none	`String`	`width`

Content

This mixin allows extra content to be passed (through the @content directive). Role: Styles to go inside the media query

Output

Media query following the parameters passed

Requires

[mixin] hf-media

Author

Benjamin Fleming

hf-until

@mixin hf-until($value, $property: width) { ... }

Description

Media query to a maximum value

Parameters

parameterName	parameterDescription	parameterType	parameterDefault value
`$value`	—none	`Number` or `List` or `String`	—none
`$property`	—none	`String`	`width`

Content

This mixin allows extra content to be passed (through the @content directive). Role: Styles to go inside the media query

Output

Media query following the parameters passed

Requires

[mixin] hf-media

Author

Benjamin Fleming

hf-breakpoint

@mixin hf-breakpoint($value, $direction: from, $property: width) { ... }

Description

Media query only at a certain breakpoint label

Parameters

parameterName	parameterDescription	parameterType	parameterDefault value
`$value`	—none	`String`	—none
`$direction`	—none	`String`	`from`
`$property`	—none	`String`	`width`

Content

This mixin allows extra content to be passed (through the @content directive). Role: Styles to go inside the media query

Output

Media query following the parameters passed

Throws

{inspect($breakpoint)} is not a valid breakpoint name
{inspect($direction)} is not a valid direction

Requires

[mixin] hf-media
[variable] hf-breakpoints

Author

Benjamin Fleming

hf-responsive

@mixin hf-responsive($map, $property: width, $direction: from) { ... }

Description

Shorthand media queries to be used within selectors

Parameters

parameterName	parameterDescription	parameterType	parameterDefault value
`$map`	—none	`Map`	—none
`$property`	—none	`String`	`width`
`$direction`	—none	`String`	`from`

Output

Set of media queries containing the properties passed

Example

@include hf-responsive((
    400px: (font-size: 1em, color: black),
    tab: (font-size: 2em, color: red),
    dsk: (font-size: 3em)
));

Throws

{inspect($break)} is not a valid breakpoint name
{inspect($break)} is not a number or valid breakpoint name
{inspect($direction)} is not a valid direction

Requires

[mixin] hf-media
[function] hf-sort
[variable] hf-breakpoints

Author

Benjamin Fleming

hf-selector

@mixin hf-selector($type, $names) { ... }

Description

A mixin wrapper for the hf-selector function.

Parameters

parameterName	parameterDescription	parameterType	parameterDefault value
`$type`	If a string, the prefix is retrieved from the `$hf-prefixes` map. If a list (of size 2), the first value is treated as a selector string, and the second prefix type. This allows prefixing entire selectors.	`String` or `List`	—none
`$names`	Each name passed is prefixed and separated by a comma. If a name is also a list, each item of that is prefixed and joined together.	`List`	—none

Content

This mixin allows extra content to be passed (through the @content directive). Role: Styles for the selector

Output

The selector and the passed styles

Requires

[function] hf-selector

Author

Benjamin Fleming

hf-module

@mixin hf-module($names) { ... }

Description

An alias for passing 'module' as the type to the hf-selector mixin.

Parameters

parameterName	parameterDescription	parameterType	parameterDefault value
`$names`	Each name passed is prefixed and separated by a comma. If a name is also a list, each item of that is prefixed and joined together.	`List`	—none

Content

This mixin allows extra content to be passed (through the @content directive). Role: Styles for the module selector

Output

The module selector and the passed styles

Requires

[function] hf-selector

Author

Benjamin Fleming

hf-utility

@mixin hf-utility($names) { ... }

Description

An alias for passing 'utility' as the type to the hf-selector mixin.

Parameters

parameterName	parameterDescription	parameterType	parameterDefault value
`$names`	Each name passed is prefixed and separated by a comma. If a name is also a list, each item of that is prefixed and joined together.	`List`	—none

Content

This mixin allows extra content to be passed (through the @content directive). Role: Styles for the utility selector

Output

The utility selector and the passed styles

Requires

[function] hf-selector

Author

Benjamin Fleming

hf-parameter

@mixin hf-parameter($names) { ... }

Description

An alias for passing 'parameter' as the type to the hf-selector mixin.

Parameters

parameterName	parameterDescription	parameterType	parameterDefault value
`$names`	Each name passed is prefixed and separated by a comma. If a name is also a list, each item of that is prefixed and joined together.	`List`	—none

Content

This mixin allows extra content to be passed (through the @content directive). Role: Styles for the parameter selector

Output

The parameter selector and the passed styles

Requires

[function] hf-selector

Author

Benjamin Fleming

hf-state

@mixin hf-state($names) { ... }

Description

An alias for passing 'state' as the type to the hf-selector mixin.

Parameters

parameterName	parameterDescription	parameterType	parameterDefault value
`$names`	Each name passed is prefixed and separated by a comma. If a name is also a list, each item of that is prefixed and joined together.	`List`	—none

Content

This mixin allows extra content to be passed (through the @content directive). Role: Styles for the state selector

Output

The state selector and the passed styles

Requires

[function] hf-selector

Author

Benjamin Fleming

hf-feature

@mixin hf-feature($names) { ... }

Description

An alias for passing 'feature' as the type to the hf-selector mixin.

Parameters

parameterName	parameterDescription	parameterType	parameterDefault value
`$names`	Each name passed is prefixed and separated by a comma. If a name is also a list, each item of that is prefixed and joined together.	`List`	—none

Content

This mixin allows extra content to be passed (through the @content directive). Role: Styles for the feature selector

Output

The feature selector and the passed styles

Requires

[function] hf-selector

Author

Benjamin Fleming

hf-featureless

@mixin hf-featureless($names) { ... }

Description

An alias for passing 'featureless' as the type to the hf-selector mixin.

Parameters

parameterName	parameterDescription	parameterType	parameterDefault value
`$names`	Each name passed is prefixed and separated by a comma. If a name is also a list, each item of that is prefixed and joined together.	`List`	—none

Content

This mixin allows extra content to be passed (through the @content directive). Role: Styles for the featureless selector

Output

The featureless selector and the passed styles

Requires

[function] hf-selector

Author

Benjamin Fleming

hf-prefix

@mixin hf-prefix($attribute, $prefix, $multivalue: true, $selector: null) { ... }

Description

Shorthand for selecting a prefix value of an attribute. Typically used to select class prefixes. It is important to note that the prefix itself will be targeted.

Parameters

parameterName	parameterDescription	parameterType	parameterDefault value
`$attribute`	The attribute to select the prefix on. If a list is provided, the first item in the list is treated as the selector prefix, while the second is then assigned as the attribute.	`String` or `List`	—none
`$prefix`	The prefix to select.	`String`	—none
`$multivalue`	If the attribute can contain multiple space-separated values, such as the class attribute. As an example, this setting can be disabled when selecting on the ID attribute, as that can only contain one value.	`Boolean`	`true`
`$selector`	The prefix to the selector. This is so you can change how it's targeted, such as a child (>), sibling (+) or anything else. This setting overrides the attribute parameter, if that parameter is passed as a list.	`String`	`null`

Content

This mixin allows extra content to be passed (through the @content directive). Role: Styles for the prefix selector

Output

The prefix selector and the passed styles

Author

Benjamin Fleming

hf-suffix

@mixin hf-suffix($attribute, $suffix, $multivalue: true, $selector: null) { ... }

Description

Shorthand for selecting a suffix value of an attribute. Typically used to select class suffixes. It is important to note that the suffix itself will be targeted.

Parameters

parameterName	parameterDescription	parameterType	parameterDefault value
`$attribute`	The attribute to select the suffix on. If a list is provided, the first item in the list is treated as the selector prefix, while the second is then assigned as the attribute.	`String` or `List`	—none
`$suffix`	The suffix to select.	`String`	—none
`$multivalue`	If the attribute can contain multiple space-separated values, such as the class attribute. As an example, this setting can be disabled when selecting on the ID attribute, as that can only contain one value.	`Boolean`	`true`
`$selector`	The prefix to the selector. This is so you can change how it's targeted, such as a child (>), sibling (+) or anything else. This setting overrides the attribute parameter, if that parameter is passed as a list.	`String`	`null`

Content

This mixin allows extra content to be passed (through the @content directive). Role: Styles for the suffix selector

Output

The suffix selector and the passed styles

Author

Benjamin Fleming

hf-textbox

@mixin hf-textbox($font-size: 1em, $padding: 0, $border-width: 0, $line-height: 1, $multiline: false) { ... }

Description

Turns an element into a textbox

Parameters

parameterName	parameterDescription	parameterType	parameterDefault value
`$font-size`	—none	`Number`	`1em`
`$padding`	—none	`Number` or `List`	`0`
`$border-width`	—none	`Number` or `List`	`0`
`$line-height`	—none	`Number`	`1`
`$multiline`	—none	`Boolean`	`false`

Requires

[function] hf-shorthand
[function] hf-sum

Used by

[mixin] hf-button
[mixin] hf-field

Author

Benjamin Fleming

Theme

variables

hf-generate-base-theme

$hf-generate-base-theme: $hf-generate-base !default;

Description

Controls whether styles in this file (base) are generated.

Type

Boolean

Author

Benjamin Fleming

hf-colors

$hf-colors: (
	'white':         #fff,
	'black':         #000,

	'darker':        #111,
	'dark':          #333,
	'mid':           #777,
	'light':         #ccc,
	'lighter':       #eee,

	'primary-light': #c5cae9,
	'primary':       #3f51b5,
	'primary-dark':  #303f9f,

	'accent-light':  #ff80ab,
	'accent':        #ff4081,
	'accent-dark':   #f50057,

	'success':       #8bc34a,
	'info':          #2196f3,
	'warning':       #ff9800,
	'danger':        #f44336
) !default;

Description

The colors to use in your template.

Type

Map

Used by

[function] hf-color

Author

Benjamin Fleming

hf-fonts

$hf-fonts: (
	'primary': ('Helvetica', sans-serif)
) !default;

Description

The fonts to use in your template

Type

Map

Author

Benjamin Fleming

hf-font-weights

$hf-font-weights: (
	'primary': (
		'hairline': 100,
		'light':    300,
		'regular':  400,
		'semibold': 600,
		'bold':     700,
		'black':    900
	)
) !default;

Description

The weights for each font defined in $hf-fonts

Type

Map

Author

Benjamin Fleming

Theme → Functions

functions

hf-color

@function hf-color($name, $alpha) { ... }

Description

Retrieves the color from the color map setting.

Parameters

parameterName	parameterDescription	parameterType	parameterDefault value
`$name`	The name of the color	`String` or `Color`	—none
`$alpha`	The transparency of the color as a decimal	`Number`	—none

Returns

Color —

A CSS color

Throws

{inspect($name)} is not a valid color input

Requires

[variable] hf-colors

Author

Benjamin Fleming

Theme → Modules

variables

hf-generate-text-columns

$hf-generate-text-columns: $hf-generate !default;

Description

Controls whether styles in this file (text-columns) are generated.

Type

Boolean

Author

Benjamin Fleming

hf-text-columns-selector

$hf-text-columns-selector: hf-module('text-columns') !default;

Description

The text columns module selector

Type

String

Author

Benjamin Fleming

hf-text-columns

$hf-text-columns: 6 !default;

Description

The highest number of columns allowed

Type

Number

Author

Benjamin Fleming

Theme → Utilities

mixins

triangle

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

Description

Converts an element into a triangle using border hacks

Parameters

parameterName	parameterDescription	parameterType	parameterDefault value
`$direction`	Either top/up, topright/upright, right, bottomright/downright, bottom/down, bottomleft/downleft, left or topleft/upleft	`String`	—none
`$color`	The color of the arrow	`Color`	—none
`$size`	—none	`Number`	—none
`$point-size`	—none	`Number`	`$size`

Output

Border styles

Author

Benjamin Fleming

triangle-color

@mixin triangle-color($direction, $color) { ... }

Description

Sets the color of a triangle

Parameters

parameterName	parameterDescription	parameterType	parameterDefault value
`$direction`	Either top/up, topright/upright, right, bottomright/downright, bottom/down, bottomleft/downleft, left or topleft/upleft	`String`	—none
`$color`	The color of the arrow	`Color`	—none

Author

Benjamin Fleming

variables

hf-generate-style

$hf-generate-style: $hf-generate !default;

Description

Controls whether styles in this file (style) are generated.

Type

Boolean

Author

Benjamin Fleming

Core

variables

Description

Type

Author

[private] -hf-default-font-size

Description

Type

Used by

Author

Description

Type

Author

Description

Type

Map structure

Used by

Author

Description

Type

Used by

Author

Description

Type

Author

Description

Type

Map structure

Used by

Author

Description

Type

Map structure

Used by

Author

Description

Type

Map structure

Used by

Author

Description

Type

Map structure

Used by

Author

functions

[private] -hf-slice

Description

Parameters

Returns

Used by

Links

Author

[private] -hf-test

Description

Parameters

Returns

Throws

{$as-type} is not a string

Requires

Used by

Author

[private] -hf-assert-lines

Description

Parameters

Returns

Requires

Used by

Author

Description

Parameters

Returns

Requires

Author

mixins

Description

Parameters

Output

Requires

Author