[private] _breakpoint-get-property-value-string

@function _breakpoint-get-property-value-string($list) { ... }

Parameters

Returns

Used by

• [mixin] _breakpoint-queries
• [mixin] _breakpoint-queries

Author

• Calvin Davis

[private] _breakpoint-is-property-value-pair

@function _breakpoint-is-property-value-pair($list) { ... }

Parameters

Returns

Used by

• [mixin] _breakpoint-queries

Author

• Calvin Davis

[private] _breakpoint-queries

@mixin _breakpoint-queries($queries) { ... }

Parameters

Requires

• [function] _breakpoint-is-property-value-pair
• [function] _breakpoint-get-property-value-string
• [function] _breakpoint-get-property-value-string

Used by

• [mixin] breakpoint
• [mixin] breakpoint
• [mixin] breakpoint
• [mixin] breakpoint

Author

• Calvin Davis

breakpoint

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

Parameters

Example

$mobile: max-width 560px;
$tablet: 561px 1024px;
$desktop: 1025px;

body {
	@include breakpoint($mobile) {
		font-size: 14px;
	}

	@include breakpoint($tablet) {
		font-size: 16px;
	}

	@include breakpoint($desktop) {
		font-size: 18px;
	}
}

@media (max-width: 560px) {
	body {
		font-size: 14px;
	}
}

@media (min-width: 561px) and (max-width: 1024px) {
	body {
		font-size: 16px;
	}
}

@media (min-width: 1025px) {
	body {
		font-size: 18px;
	}
}

Requires

• [mixin] _breakpoint-queries
• [mixin] _breakpoint-queries
• [mixin] _breakpoint-queries
• [mixin] _breakpoint-queries

Author

• Calvin Davis

absolute

@mixin absolute($values: ()) { ... }

Description

Parameters

Requires

• [mixin] position

Used by

• [mixin] absolute-top-left

Author

• Calvin Davis

absolute-top-left

@mixin absolute-top-left($top: 0, $left: $top) { ... }

Description

Parameters

Requires

• [mixin] absolute

Used by

• [mixin] absolute-fill

Author

• Calvin Davis

absolute-fill

@mixin absolute-fill() { ... }

Description

Parameters

None.

Requires

• [mixin] absolute-top-left
• [mixin] size

Author

• Calvin Davis

child-margins-x

@mixin child-margins-x($margin: 0) { ... }

Description

Parameters

Author

• Calvin Davis

child-margins-y

@mixin child-margins-y($margin: 0) { ... }

Description

Parameters

Author

• Calvin Davis

fixed

@mixin fixed($values: ()) { ... }

Description

Parameters

Requires

• [mixin] position

Used by

• [mixin] fixed-top-left

Author

• Calvin Davis

fixed-top-left

@mixin fixed-top-left($top: 0, $left: $top) { ... }

Description

Parameters

Requires

• [mixin] fixed

Used by

• [mixin] fixed-fill

Author

• Calvin Davis

fixed-fill

@mixin fixed-fill() { ... }

Description

Parameters

None.

Requires

• [mixin] fixed-top-left
• [mixin] size

Author

• Calvin Davis

flex

@mixin flex($justify-content, $align-items, $flex-wrap, $flex-direction) { ... }

Description

Parameters

Author

• Zed Barker-Flower

position

@mixin position($position, $values: ()) { ... }

Description

Parameters

Requires

• [function] to-trbl

Used by

• [mixin] absolute
• [mixin] fixed

Author

• Calvin Davis

columns

@function columns($columns, $column-count) { ... }

Description

Parameters

Author

• Mike Masey

to-trbl

@function to-trbl($values) { ... }

Description

Parameters

Returns

Example

to-trbl(1em)
// (1em 1em 1em 1em)

to-trbl(1em 0)
// (1em 0 1em 0)

to-trbl(1em 0 100px)
// (1em 0 100px 0)

to-trbl(1em 0 100px 50%)
// (1em 0 100px 50%)

Used by

• [mixin] position

Author

• Calvin Davis

gort-default-column-count

$gort-default-column-count: 24 !default;

Description

Author

• Mike Masey

[private] _font-face-content

@mixin _font-face-content($family, $path, $weight: null, $formats: $gort-default-font-face-formats) { ... }

Description

Parameters

Used by

• [mixin] font-face

Author

• Calvin Davis

font-face

@mixin font-face($family, $path, $weight: null, $formats: $gort-default-font-face-formats) { ... }

Description

Parameters

Requires

• [mixin] _font-face-content

Author

• Calvin Davis

font-sizing

@mixin font-sizing($font-size, $line-height, $letter-spacing: undefined) { ... }

Description

Parameters

Requires

• [function] rem
• [function] letter-spacing

Author

• Zed Barker-Flower

font

@mixin font($settings) { ... }

Parameters

Example

$font-h1: (
	font-family: (Arial, sans-serif),
	font-size: 2em,
	text-transform: uppercase
)

$font-h2: map-merge($font-h1, (
	font-size: 1.5em,
	font-style: italic
))

h1 {
	@include font($font-h1);
}

h2 {
	@include font($font-h2);
}

h1 {
	font-family: Arial, sans-serif;
	font-size: 2em;
	text-transform: uppercase;
}

h2 {
	font-family: Arial, sans-serif;
	font-size: 1.5em;
	font-style: italic;
	text-transform: uppercase;
}

Authors

• Tom (Alfie) Gaskill

• Calvin Davis

gort-default-font-face-formats

$gort-default-font-face-formats: (woff2: woff2, woff: woff) !default;

Description

Author

• Calvin Davis

letter-spacing

@function letter-spacing($px, $browser-context) { ... }

Description

Parameters

Used by

• [mixin] font-sizing

Author

• Mike Masey

align-center

@mixin align-center($axis: "xy", $position: null) { ... }

Description

Parameters

Example

.feeb {
	@include align-center;
}

.foo {
	@include align-center("x");
}

.bar {
	@include align-center("y", relative);
}

.foo-bar {
	@include align-center($position: absolute);
}

.feeb {
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.foo {
	left: 50%;
	transform: translateX(-50%);
}

.bar {
	position: relative;
	top: 50%;
	transform: translateY(-50%);
}

.foo-bar {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

Author

• Mike Masey

arrow

@mixin arrow($direction: "right", $width: 10px, $height: $width, $color: currentColor) { ... }

Description

Parameters

Requires

• [mixin] size

Links

• https://css-tricks.com/snippets/css/css-triangle/

Author

• Calvin Davis

aspect-ratio

@mixin aspect-ratio($ratio: 100%) { ... }

Description

Parameters

Links

• https://www.w3schools.com/howto/howto_css_aspect_ratio.asp

Author

• Tom (Alfie) Gaskill

audio-only

@mixin audio-only() { ... }

Description

Parameters

None.

Used by

• [mixin] audio-only-class

Authors

• Calvin Davis

• Mike Masey

audio-only-class

@mixin audio-only-class($selector: ".audio-only") { ... }

Description

Parameters

Requires

• [mixin] audio-only

Authors

• Calvin Davis

• Mike Masey

boost

@mixin boost($count: 1) { ... }

Description

Parameters

Example

.foo {
	@include boost() {
		color: red;
	}

	@include boost(2) {
		color: green;
	}
}

.foo.foo {
	color: red;
}

.foo.foo.foo {
	color: green;
}

Author

• Calvin Davis

clearfix

@mixin clearfix() { ... }

Description

Parameters

None.

Used by

• [mixin] clearfix-class

Links

• http://cssmojo.com/the-very-latest-clearfix-reloaded/

Author

• Calvin Davis

clearfix-class

@mixin clearfix-class($selector: ".clearfix") { ... }

Description

Parameters

Requires

• [mixin] clearfix

Author

• Calvin Davis

margin-x

@mixin margin-x($value: 0) { ... }

Description

Parameters

Requires

• [mixin] property-x

Author

• Calvin Davis

margin-y

@mixin margin-y($value: 0) { ... }

Parameters

Requires

• [mixin] property-y

Author

• Calvin Davis

normalize

@mixin normalize() { ... }

Description

Parameters

None.

Links

• https://necolas.github.io/normalize.css/

Author

• Calvin Davis

padding-x

@mixin padding-x($value: 0) { ... }

Description

Parameters

Requires

• [mixin] property-x

Author

• Calvin Davis

padding-y

@mixin padding-y($value: 0) { ... }

Parameters

Requires

• [mixin] property-y

Author

• Calvin Davis

property-multi

@mixin property-multi($property, $list, $value) { ... }

Description

Parameters

Used by

• [mixin] property-x
• [mixin] property-y

Author

• Calvin Davis

property-x

@mixin property-x($property, $value) { ... }

Description

Parameters

Requires

• [mixin] property-multi

Used by

• [mixin] margin-x
• [mixin] padding-x

Author

• Calvin Davis

property-y

@mixin property-y($property, $value) { ... }

Description

Parameters

Requires

• [mixin] property-multi

Used by

• [mixin] margin-y
• [mixin] padding-y

Author

• Calvin Davis

reset

@mixin reset() { ... }

Description

Parameters

None.

Authors

• Calvin Davis

• Tom (Alfie) Gaskill

• Mike Masey

size

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

Description

Parameters

Example

.square {
	@include size(1em);
}

.rectangle {
	@include size(2em, 1em);
}

.square {
	width: 1em;
	height: 1em;
}

.rectangle {
	width: 2em;
	height: 1em;
}

Used by

• [mixin] absolute-fill
• [mixin] fixed-fill
• [mixin] arrow

Author

• Calvin Davis

gort-default-base-font-size

$gort-default-base-font-size: 16 !default;

Description

Author

• Mike Masey

em

@function em($px, $browser-context: $gort-default-base-font-size) { ... }

Description

Parameters

Author

• Mike Masey

rem

@function rem($px, $browser-context: $gort-default-base-font-size) { ... }

Description

Parameters

Used by

• [mixin] font-sizing

Author

• Mike Masey