oomph functions

functions

map-deep-get

@function map-deep-get($map, $keys...) { ... }

Description

Map deep get

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$map`	Map	`Map`	— none
`$keys`	Key chain	`Arglist`	— none

Example

Usage

property: map-deep-get($mapname, key);

Output

{*} - Desired value

Used by

[function] palette
[function] rwd-size

Author

Hugo Giraudel

palette

@function palette($pallete, $tone: base) { ... }

Description

palette() = A specific deep-getter: A deep get on a map called $palette

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$pallete`	— none		— none
`$tone`	— none		`base`

Example

Usage

color: palette(mono, white);

Output

color: #fff;

Throws

Palette #{$palette} does not exist.
There is no #{$tone} defined in your #{$palette} color map however, its being called in your theme.

Requires

[function] map-deep-get

Used by

[mixin] button
[mixin] button
[mixin] button
[mixin] button
[mixin] button
[mixin] button
[mixin] button
[mixin] button
[mixin] button
[mixin] button

Author

jcionci

bp

@function bp($size: 'base') { ... }

Description

bp() = A specific deep-getter: A deep get on a map called $breakpoints

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$size`	A key value	`String`	`'base'`

Example

Usage

bp(small)

Output

30em

Used by

[mixin] one-element-size

Author

jhogue

bppx

@function bppx($size: 'base') { ... }

Description

bppx() = A specific deep-getter: A deep get on a map called $breakpoints

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$size`	A key value	`String`	`'base'`

Example

Usage

bp(small)

Output

480px

Requires

[function] px

Author

jhogue

rwd-size

@function rwd-size($elem, $group: 'base') { ... }

Description

rwd-size() = A specific deep-getter: A deep get on a map called $type-sizes

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$elem`	A key value		— none
`$group`	A deep key value	`String`	`'base'`

Example

Usage

rwd-size(h1, small)

Output

Requires

[function] map-deep-get
[variable] type-sizes

Author

jhogue

px

@function px($value) { ... }

Description

px() = Change a unitless value to px

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$value`	Numeric value assumed to be pixels	`Float`	— none

Example

Usage

width: px(48);

Output

width: 48px;

Used by

[function] bppx
[mixin] rem

Author

jhogue

percent-color

@function percent-color($color, $percent, $background: white) { ... }

Description

percent-color() = Emulate the way Adobe Illustrator allows percentages of defined global colors

Parameters

parameter Name	parameter Description	parameter Default value
`$color`	A color as Hex, RGB or HSL. Percent as numeric	— none
`$percent`	Optional background color for mixing function	— none
`$background`	— none	`white`

Example

Usage

background-color: percent-color(#666, 50%);

Output

background-color: #ccc;

Author

Oomph, Inc. UX Engineers

mixins

button

@mixin button($type: default) { ... }

Description

Generate styles for a button.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$type`	Accepts: null (default), primary, secondary		`default`

Example

@include button()

Output

A compiled set of button styles including idle and hover

Requires

[mixin] touch-hover
[mixin] touch-hover
[mixin] touch-hover
[mixin] touch-hover
[mixin] touch-hover
[mixin] touch-hover
[function] palette
[function] palette
[function] palette
[function] palette
[function] palette
[function] palette
[function] palette
[function] palette
[function] palette
[function] palette

Author

The Oomph Team

General

variables

type-sizes

$type-sizes: (

  // 1.125 typographic scale base 16
  // scss-lint:disable DeclarationOrder
  base: (
    micro: 14,
    base: 16,
    h4: 18,
    h3: 20,
    h2: 22,
    h1: 24,
    kilo: 27,
    mega: 30,
    giga: 33
  ),

  // 1.25 typographic scale base 18
  // scss-lint:disable DeclarationOrder
  x-large: (
    micro: 14,
    base: 18,
    h4: 22,
    h3: 27,
    h2: 33,
    h1: 41,
    kilo: 51,
    mega: 63,
    giga: 78,
  ),
);

Description

Typographic Scales Map List as unitless pixels, use SASS function to convert to whatever you want

Use the same $key names as the corresponding breakpoint in layout/_breakpoints.scss $breakpoints

Used by

[function] rwd-size
[function] one-type-size
[mixin] one-element-size

functions

one-type-size

@function one-type-size($Breakpoint, $Element) { ... }

Description

Deep getter to go into the $type-sizes array

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$Breakpoint`	map key name	`String`	— none
`$Element`	name [base]	`String`	— none

Example

Usage

font-size: px(one-type-size('x-large', 'h1'));

Output

font-size: 31px;

Throws

A list named $type-sizes is undefined. [Function one-type-size()]

Requires

[variable] type-sizes

Used by

[mixin] one-element-size
[mixin] one-element-size

Author

jhogue

mixins

one-element-size

@mixin one-element-size($Element) { ... }

Description

Use fluid-units() to output all sizes for a typographic element

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$Element`	name [base]	`String`	— none

Example

Usage

@include one-element-size(h1);

Output

h1 {
  font-size: 1.9375em;
}
@media (min-width: 30em) {
  h1 {
    font-size: calc(1.9375em + 0.8125 * (100vw - 30em) / 55);
  }
}
@media (min-width: 85em) {
  h1 {
    font-size: calc(1.9375em + 0.8125 * 1em);
  }
}

Throws

A list named $type-sizes is undefined. [Mixin one-element-size()]
A list named $breakpoints is undefined. [Mixin one-element-size()]
Your $type-sizes map key

Requires

[function] one-type-size
[function] one-type-size
[variable] type-sizes
[function] bp
[mixin] fluid-units

Author

jhogue

fluid-units

@mixin fluid-units($properties, $min-value, $max-value, $min-vw, $max-vw) { ... }

Description

fluid-units() = Set a minimum value, maximum value, and use calc() to fluidly go from one to the other in between

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$properties`	List one or multiple properties to assign values to	`List`	— none
`$min-value`	— none	`String`	— none
`$max-value`	Min/Max values for the measurement. The same units should be used (px, em, rem)	`String`	— none
`$min-vw`	— none	`String`	— none
`$max-vw`	Min/Max viewport width. Which viewport "locks" should the fluid measurements start and end at?	`String`	— none

Example

Usage

.element {
  @include fluid-unit(padding-top padding-bottom, 1em, 4em, em(480), em(1200));
}

Output

.element {
  padding-top: 1em;
  padding-bottom: 1em;
}
@media (min-width: 38.75em) {
  .element {
    padding-top: calc(1em + 3 * (100vw - 38.75em) / 46.25);
    padding-bottom: calc(1em + 3 * (100vw - 38.75em) / 46.25);
  }
}
@media (min-width: 85em) {
  .element {
    padding-top: calc(1em + 3 * 1em);
    padding-bottom: calc(1em + 3 * 1em);
  }
}

Used by

[mixin] one-element-size

Author

Indrek Paas @indrekpaas

list-reset

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

Description

list-reset() = Remove the margin, padding, and bullets from lists

Parameters

None.

Example

Usage

ul {
  @include list-reset();
}

Output

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

Author

jcionci

rem

@mixin rem($valid, $value) { ... }

Description

rem() = Provide rem and px fallback for any property

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$valid`	css property The property to calculate px and rem for	`String`	— none
`$value`	The value, assumed ot be pixels	`Numeric`	— none

Example

Usage

@include rem('padding-top', 32)

Output

padding-top: 32px;
padding-top: 2rem;

Requires

[function] px

Used by

[mixin] rem-fontsize

Author

jhogue

rem-fontsize

@mixin rem-fontsize() { ... }

Description

Alias of rem() for font-size only

Parameters

None.

Requires

[mixin] rem

javascript-listener

@mixin javascript-listener($content) { ... }

Description

javascript-listener() = Provide a method for passing parameters to JS

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$content`	— none	`String`	— none

Example

Usage

@include javascript-listener('action-hook')

Output

body:after {
  content: 'action-hook',
  display: none;
  speak: none;
}

Author

jhogue

writing-mode

@mixin writing-mode($mode) { ... }

Description

writing-mode() = Bourbon-style helper to output vendor-prefixed rulesets

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$mode`	Expects valid writing-mode values	`String`	— none

Example

Usage

@include writing-mode(vertical-rl);

Output

-webkit-writing-mode: vertical-rl;
writing-mode: vertical-rl;

Author

jhogue

icon

@mixin icon($icon, $position: before, $color: inherit) { ... }

Description

icon() = Set a font-family and use this mixin to simplify declaring properties to :before or :after elements

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$icon`	Expects a character value to be inserted into "content: ''"	`String`	— none
`$position`	— none	`String`	`before`
`$color`	— none	`Color`	`inherit`

Example

Usage

.element { @include icon('\f105', after); }

Author

jcionci

maintain-ratio

@mixin maintain-ratio($Ratio: 1 1) { ... }

Description

maintain-ratio() = Helper mixin that calculates a percentage padding value to "fix" the proportions of a container to an aspect ratio

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$Ratio`	— none	`List`	`1 1`

Example

Usage

@include maintain-ratio(16 9)

Output

width: 100%;
height: 0;
padding-bottom: 56.25%;

Used by

[mixin] proportional-container

Author

jhogue

proportional-container

@mixin proportional-container($Ratio: 1 1) { ... }

Description

proportional-container() = Sets a container to "crop" an element to a fixed aspect ratio

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$Ratio`	— none	`List`	`1 1`

Example

Usage

@include proportional-container(16 9)

Output

position: relative;
overflow: hidden;
z-index: 1;
height: 0;
padding-bottom: 56.25%;
width: 100%

Requires

[mixin] maintain-ratio

Author

jhogue

image-cover

@mixin image-cover($center: '100% auto') { ... }

Description

image-cover() = Sets a container to "crop" an element to a fixed aspect ratio

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$center`	Accepts '100% auto' (width height), 'auto 100%' (width height), or 'contain'	`String`	`'100% auto'`

Example

Usage

@include image-cover(auto 100%)

Throws

Keyword #{$center} for mixin

Author

jhogue

show

@mixin show($display: block) { ... }

Description

show/hide() = Provide a more complete show/hide option over using display: none

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$display`	valid display property	`String`	`block`

Example

Usage

@include show()

Output

display: block;
visibility: visible;

Author

jhogue

hide

@mixin hide() { ... }

Parameters

None.

Example

UsAGE

@include hide()

Output

display: none;
visibility: hidden;

Author

jhogue

touch-hover

@mixin touch-hover($state, $disabled) { ... }

Description

touch-hover() = Provide an accesible hover for non-touch devices, turns it into the active state for mobile, and maintains a no-js fallback

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$state`	Which state is this element in? Accepts 'idle' or 'hover'	`String`	— none
`$disabled`	— none	`Boolean`	— none

Content

This mixin allows extra content to be passed (through the @content directive). Role: the @content directive is used

Example

Usage

.link {
 padding: .5em 1em; // Styles that do not change when interacting with this element

 @include touch-hover('idle') {
   color: black; // Styles for the :link and :visited states
 }
 @include touch-hover('hover') {
   color: red; // Styles for the :focus, :hover and :active states
 }

 &__disabled {
   @include touch-hover('hover', true) {
    color: silver; // All psuedo states are included
   }
 }
}

Output

.link {
  padding: .5em 1em;
}
.link,
.link:link,
.link:visited {
  color: black;
}
.no-js .link:hover,
.no-js .link:focus,
.js.no-touchevents .link:hover,
.js.no-touchevents .link:focus,
.js.touchevents .link:active {
  color: red;
}
.no-js .link__disabled,
.no-js .link__disabled:link,
.no-js .link__disabled:visited,
.no-js .link__disabled:hover,
.no-js .link__disabled:focus,
.js.no-touchevents .link__disabled,
.js.no-touchevents .link__disabled:link,
.js.no-touchevents .link__disabled:visited,
.js.no-touchevents .link__disabled:hover,
.js.no-touchevents .link__disabled:focus,
.js.touchevents .link__disabled,
.js.touchevents .link__disabled:active {
  cursor: default;
  color: silver;
}

Throws

First parameter expects
Second parameter must be true or false

Requires

[external] Modernizr.js — to get touchevent classes

Used by

[mixin] button
[mixin] button
[mixin] button
[mixin] button
[mixin] button
[mixin] button

Author

jhogue

oomph functions

functions

Description

Parameters

Example

Used by

Author

Description

Parameters

Example

Throws

Requires

Used by

Links

Author

Description

Parameters

Example

Used by

Author

Description

Parameters

Example

Requires

Author

Description

Parameters

Example

Requires

Author

Description

Parameters

Example

Used by

Author

Description

Parameters

Example

Links

Author

mixins

Description

Parameters

Example

Output

Requires

Author

General

variables

Description

Used by

functions

Description

Parameters

Example

Throws

Requires

Used by

Author

mixins

Description

Parameters

Example

Throws

Requires

Author

Description

Parameters

Example

Used by

Links

Author

Description

Parameters

Example

Author

Description

Parameters

Example

Requires