Doghouse UiKit

9.1 #Mixins.duk-animation--grow duk-animation-grow

Add keyframes for a grow element.

Source: scss/tools/_animation.scss, line 16

9.2 #Mixins.duk-animation--line-loader duk-animation--line-loader

Add keyframes for a Youtube style "line-loader".

Source: scss/tools/_animation.scss, line 28

9.3 #Mixins.duk-animation--spin duk-animation--spin

Add keyframes for a spinning element.

Source: scss/tools/_animation.scss, line 4

9.4 #Mixins.duk-at-breakpoint duk-at-breakpoint

A wrapper for state based breakpoints.

Use state based breakpoints to normalise a state rather than a size. Example Update $duk-base-breakpoint-states to include states where a number of things might change. Eg. desktop-header, sidebar-visible, etc. This means you can easily change when that state occurs.

Parameters:

$name

Breakpoint name
$breakpoints

Breakpoint map

Source: scss/tools/_breakpoint.scss, line 18

9.5 #Mixins.duk-bg-color duk-bg-color

Set a background color from $duk-bg-colors.

Parameters:

$color-name

The key that represents the color in the color map.
$bg-colors

A map of the background colors.

Source: scss/tools/_background.scss, line 18

9.6 #Mixins.duk-bg-color-alpha duk-bg-color-alpha

Set a background color alpha from $duk-bg-colors.

Parameters:

$color-name

The key that represents the color in the color map.
$alpha

Transparency value in percent 100% is opaque 0% is transparent.
$bg-colors

A map of the background colors.

Source: scss/tools/_background.scss, line 30

9.7 #Mixins.duk-bg-scale-crop duk-bg-scale-crop

Add properties to compliment a background image that is using a CSS scale and crop. It sets disables repeat, sets position to centered and background size is cover. Width and height of the image needs to be managed elsewhere. Or via duk-responsive-aspect-ratio().

Parameters:

$image

Optional image url.

Source: scss/tools/_background.scss, line 43

9.8 #Mixins.duk-blockquote duk-blockquote

Block quote text helper. Provides a nice default style for block quotes.

Parameters:

$color-key

Text and border color. see $duk-font-colors
$gutter

Vertical margin and left padding applied.

Source: scss/tools/_typography.scss, line 200

9.9 #Mixins.duk-border-color duk-border-color

Set a border color from $duk-border-colors.

Parameters:

$color-name

The key that represents the color in the color map.
$border-colors

A map of the border colors.

Source: scss/tools/_border.scss, line 34

9.10 #Mixins.duk-border-color-alpha duk-border-color-alpha

Set a border color alpha from $duk-border-colors.

Parameters:

$color-name

The key that represents the color in the color map.
$alpha

Transparency value in percent 100% is opaque 0% is transparent.
$border-colors

A map of the border colors.

Source: scss/tools/_border.scss, line 46

9.11 #Mixins.duk-border-radius duk-border-radius

Set a border radius from $duk-border-radii to apply rounded corners.

Parameters:

$radius-type

The key that represents the radius in the radius map.
$direction

applies effect to selected corners. Accepted options: 'all', 'top', 'bottom', 'left', 'right'
$border-radii

A map of the border radii.

Source: scss/tools/_border.scss, line 71

9.12 #Mixins.duk-breadcrumb duk-breadcrumb

Apply breadcrumb styles.

Parameters:

$delimiter

The character used to split crumbs

Source: scss/tools/_breadcrumb.scss, line 10

9.13 #Mixins.duk-button duk-button

Base button mixin

Parameters:

$button-settings

A map that contains the button appearance settings.

Source: scss/tools/_button.scss, line 27

9.14 #Mixins.duk-button-apply-style duk-button-apply-style

Apply styles to all possible button types. Includes a, button, input[type="button"], input[type="reset"] and input[type="submit"]. Ideal usage is with a button set.

Source: scss/tools/_button.scss, line 108

9.15 #Mixins.duk-button-group duk-button-group

A group of buttons that sit flush against each other.

Parameters:

$button-selector

The selector for the button
$button-settings

The button appearance settings (used only for border radius).

Source: scss/tools/_button.scss, line 124

9.16 #Mixins.duk-button-size duk-button-size

Change the size of a button. Most of the time you can do this with simply changing the font size as padding is relative and line height uses golden ratio.

Parameters:

$padding

The button padding
$font-size

The button font size
$border-radius

The button radius
$line-height

The button line height (default $duk-base-line-height)

Source: scss/tools/_button.scss, line 8

9.17 #Mixins.duk-button-variant duk-button-variant

Apply variant to button based on colors. The text color will be automatically calculated.

Parameters:

$background

Background color
$border

Border color
$hover-background

Hover background color (defaults to 7.5% darker)
$hover-border

Hover border color (defaults to 7.5% darker)
$active-background

Active background color (defaults to 12% darker)
$active-border

Active border color (defaults to 12% darker)

Source: scss/tools/_button.scss, line 71

9.18 #Mixins.duk-clearfix duk-clearfix

Clear floats in an element.

Source: scss/tools/_clearfix.scss, line 4

9.19 #Mixins.duk-container duk-container

Creates a container with constraints.

Parameters:

$size-name

The key that represents the size in the container map.
$container-sizes

A map of the container sizes.

Source: scss/tools/_layout.scss, line 6

9.20 #Mixins.duk-feature-detect--msie duk-feature-detect--msie

This targets IE10+ browsers via feature detection with -ms-high-contrast

Source: scss/tools/_feature-detect.scss, line 6

9.21 #Mixins.duk-flex-grid duk-flex-grid

Wrapper that contains grid items

Source: scss/tools/_flex-grid.scss, line 4

9.22 #Mixins.duk-flex-grid-col-count duk-flex-grid-col-count

Define the column count in a grid. Applies to grid item.

Parameters:

$columns

The count of columns
$gutter

The horizontal gutter between grid items (default 1.5%).

Source: scss/tools/_flex-grid.scss, line 15

9.23 #Mixins.duk-flex-grid-gutter duk-flex-grid-gutter

Adds a gutter to each column in a flex grid whilst ensuring the edges of the grid are not indented. It does this by setting a negative margin on parent to offset the grid item padding. Using the $gutter on duk-flex-grid-col-count is a better way to achieve this.

Parameters:

$gutter-size

The size of the gutter.
$child-selector

The selector for the grid columns.

Source: scss/tools/_flex-grid.scss, line 59

9.24 #Mixins.duk-flex-grid-responsive duk-flex-grid-responsive

Responsive Flex grid. Should be applied to the direct wrapper of the grid columns. Example:

ul {
  @include duk-flex-grid-responsive((small: 1, medium: 2, large: 3));
}

Parameters:

$grid-map

A SASS map with the keys defining the breakpoint and the values defining the column count. Eg. (medium: 2, large: 3, x-large: 4)
$gutter

Gutter applied between grid items (default 1.5%).

Source: scss/tools/_flex-grid.scss, line 28

9.25 #Mixins.duk-flyout duk-flyout

Flyout wrapper. Flyouts are pieces of content that fly out of a parent when said parent is hovered.

NOTE: Consider touch screens where this becomes quite useless.

Parameters:

$flyout-content-selector

The selector of the child content element
$direction

Where the flyout appears. top, bottom, left, right (default is bottom).

Source: scss/tools/_flyout.scss, line 7

9.26 #Mixins.duk-font-color duk-font-color

Set a font color from $duk-base-font-sizes.

Parameters:

$color-name

The key that represents the color in the color map.
$important

Should be !important true/false (defaults to false).
$font-colors

A map of the font colors.

Source: scss/tools/_typography.scss, line 84

9.27 #Mixins.duk-font-include duk-font-include($var)

Import an external font or load a map of local font-face variants.

$font-variants: (
  'tt_commons': (
    path : '../../fonts/tt_commons',
    formats: ('woff', 'woff2', 'eot'),
    variants: (
      ('tt_commons_regular-webfont', 400, normal),
      ('tt_commons_medium-webfont', 500, normal),
      ('tt_commons_bold-webfont', 700, normal),
    ),
  ),
);

@include duk-font-include('https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@400;600;700;900&display=swap');
@include duk-font-include($font-variants)

Parameters:

$var

An external resource to import (eg: google font).
A map of font variants.

Source: scss/tools/_typography.scss, line 142

9.28 #Mixins.duk-font-load duk-font-load

Include a font face.

Parameters:

$name

The name of the font family.
$path

Path of the font folder.
$filename

Filename for the font, expects 3 files with extensions: eot, woff, ttf.
$weight

Weight of the font face (default normal).
$style

Style of the font. Eg normal, italic (default normal).
$formats

A map of font extensions and their format value.

Source: scss/tools/_typography.scss, line 102

9.29 #Mixins.duk-font-size duk-font-size

Set a font size and line height from $duk-base-font-sizes.

Parameters:

$size

The key that represents the size in the sizes map.
$font-sizes

A map of the font sizes. Each value contains a map with size and height.

Source: scss/tools/_typography.scss, line 47

9.30 #Mixins.duk-font-weight duk-font-weight

Set a font weight from $duk-base-font-weights

Parameters:

$weight

The key that represents the font weight.
$font-weights

A map of the font weights.

Source: scss/tools/_typography.scss, line 60

9.31 #Mixins.duk-form-element-large duk-form-element-large

Large form elements such as textareas and multiple select.

Example making all form controls have red text:

@include duk-form-element-large { color: red; }

Source: scss/tools/_form.scss, line 40

9.32 #Mixins.duk-form-element-text duk-form-element-text

Form element base. Includes select, textarea and all text fields.

Example making all form controls have red text:

@include duk-form-element-text { color: red; }

Source: scss/tools/_form.scss, line 6

9.33 #Mixins.duk-form-normalize duk-form-normalize

Normalize form elements so a base form both looks not bad and is consistent between browsers.

Parameters:

$element-settings

Settings for a base form element, applied via duk-form-element-text()

Source: scss/tools/_form.scss, line 58

9.34 #Mixins.duk-gutter-horizontal duk-gutter-horizontal

Apply a gutter to the left and right.

Parameters:

$size

Size of the gutter.
$type

Is the gutter 'margin' or 'padding' (default margin)

Source: scss/tools/_gutter.scss, line 26

9.35 #Mixins.duk-gutter-responsive duk-gutter-responsive

Apply a responsive gutter based on a map.

Gutters generally should be responsive as you want more whitespace on larger screens. This mixin allows you to add a gutter per breakpoint via a map so the gutter can grow with screen size.

Parameters:

$gutter-map

The map of breakpoints to gutter size. Eg (small: 10px, large: 15px, xx-large: 30px). Uses duk-susy-breakpoint.
$direction

Is gutter 'vertical' or 'horizontal'
$type

Is the gutter 'margin' or 'padding'

Source: scss/tools/_gutter.scss, line 45

9.36 #Mixins.duk-gutter-vertical duk-gutter-vertical

Apply a gutter to the top and bottom.

Parameters:

$size

Size of the gutter.
$type

Is the gutter 'margin' or 'padding' (default margin)

Source: scss/tools/_gutter.scss, line 7

9.37 #Mixins.duk-heading duk-heading

Apply style to a single heading tag.

Parameters:

$tag

The heading tag to apply the style to

Source: scss/tools/_typography.scss, line 32

9.38 #Mixins.duk-headings duk-headings

Apply styles to all headings.

Source: scss/tools/_typography.scss, line 19

9.39 #Mixins.duk-hr duk-hr

Style a <hr> element.

Parameters:

$color

The color of the hr.

Source: scss/tools/_typography.scss, line 186

9.40 #Mixins.duk-icon duk-icon

Adds the css for a specific icon.

Parameters:

$icon-name

Name of the icon code. If ommited then icon font/size/etc is still returned.
$set-name

Name of the set, (defaults to duk)
$pseudo

The pseudo selector, eg before / after (defaults to before)

Source: scss/tools/_icon.scss, line 57

9.41 #Mixins.duk-icon-font-load duk-icon-font-load

Adds the icon font-face to the css. Adding this means each page will load the icon font adding overhead, use sparingly.

Parameters:

$set-name

Name of the set, (defaults to duk)

Source: scss/tools/_icon.scss, line 41

9.42 #Mixins.duk-icon-generate-classes duk-icon-generate-classes

Generates all icon css for a set. This generates a lot of classes.

Parameters:

$set-name

Name of the set, (defaults to duk)
$namespace

Prefix for icons generated (defaults to duk-)

Source: scss/tools/_icon.scss, line 122

9.43 #Mixins.duk-icon-square-button duk-icon-square-button

Generate a square button/element with an icon vertically centered inside. Would generally apply to an a tag that contains a child i tag that represents the icon.

Parameters:

$size

The width and height of the button.
$icon-name

Optional icon to include
$set-name

Icon set to use

Source: scss/tools/_icon.scss, line 92

9.44 #Mixins.duk-loader--grow duk-spinner--grow

A spinning grow loader.

Parameters:

$size

The size of the spinner

Source: scss/tools/_loader.scss, line 22

9.45 #Mixins.duk-loader--line duk-spinner--line

A youtube style line loader.

Parameters:

$size

The height

Source: scss/tools/_loader.scss, line 40

9.46 #Mixins.duk-loader--spin duk-loader--spin

A spinning border loader.

Parameters:

$size

The size of the spinner

Source: scss/tools/_loader.scss, line 4

9.47 #Mixins.duk-message-base duk-message-base

Base for a message callout.

Parameters:

$gutter

message padding/margin bottom.

Source: scss/tools/_messages.scss, line 6

9.48 #Mixins.duk-message-colors duk-message-colors

Apply colors to a message callout.

Parameters:

$base-color

The base message color, see duk-palette-element()
$link-color

The link color, see duk-palette-font-color-state()

Source: scss/tools/_messages.scss, line 20

9.49 #Mixins.duk-nav--dropdown duk-nav--dropdown

Turns a unordered list into a dropdown menu.

Source: scss/tools/_nav.scss, line 31

9.50 #Mixins.duk-nav--horizontal duk-nav--horizontal

Uses flex to create a horizontal nav menu. Apply to a ul or nav element.

Source: scss/tools/_nav.scss, line 4

9.51 #Mixins.duk-nav--pills duk-nav--pills

Create "pill" nav, commonly used for tags and categories. Sets max border raduis to a tags.

Source: scss/tools/_nav.scss, line 58

9.52 #Mixins.duk-nav--tabs duk-nav--tabs

Create "tab" nav, commonly used for sub tasks or groupings

Parameters:

$tab-settings

Appearance for tabs, see $duk-base-nav-tabs

Source: scss/tools/_nav.scss, line 74

9.53 #Mixins.duk-nav--vertical duk-nav--vertical

Uses flex to create a nav menu. Apply to a ul or nav element.

Source: scss/tools/_nav.scss, line 21

9.54 #Mixins.duk-overlay duk-overlay

Wrapper for overlay element

Parameters:

$overlay-area-selector

Selector to use for overlay content

Source: scss/tools/_overlay.scss, line 11

9.55 #Mixins.duk-overlayarea duk-overlayarea

Overlay area that displays on hover.

Source: scss/tools/_overlay.scss, line 30

9.56 #Mixins.duk-overlayarea-content duk-overlayarea-content

Overlay area content horizontally and vertically aligned.

Source: scss/tools/_overlay.scss, line 46

9.57 #Mixins.duk-palette-element duk-palette-element

Apply a palette to an element

This allows defining border/background/text colors by only providing a single color.

Parameters:

$base-color

Border color and if no background/font color set, will be the base for those colors.
$background-color

Override the background color. If not set will use 10% lighter than border.
$font-color

Override the font color. If not set will use 50% darker than border.
$heading-color

Override the heading color. If not set will use 80% darker than border.

Source: scss/tools/_palette.scss, line 17

9.58 #Mixins.duk-palette-font-color-state duk-palette-font-color-state

Apply a palette to font color states. Ideal for links

Parameters:

$base-color

Font color, will be the base for those colors.
$hover-color

Override the hover color. If not set will use 20% darker than base.
$active-color

Override the active color. If not set will use 30% darker than base.
$focus-color

Override the focus color. If not set will use 30% darker than base.

Source: scss/tools/_palette.scss, line 43

9.59 #Mixins.duk-position duk-position

This mixin provides an easy way to position an element.

Example:

Position an element absolutely 50% from the top and 1em from the left: @include duk-position(absolute, top 50% left 1em);

This generates the CSS:

 position: absolute;
 top: 50%;
 left: 1em;

Parameters:

$position

The type of positioning, e.g absolute, relative.
$args

The direction and amount, e.g top 1em left 5em.

Source: scss/tools/_position.scss, line 8

9.60 #Mixins.duk-position-absolute duk-position-absolute

This mixin provides an easy way to absolutely position an element. It is a wrapper for @mixin duk-position.

Parameters:

$args

The direction and amount, e.g top 1em left 5em.

Source: scss/tools/_position.scss, line 40

9.61 #Mixins.duk-position-fixed duk-position-fixed

This mixin provides an easy way to fixed position an element. It is a wrapper for @mixin duk-position.

Parameters:

$args

The direction and amount, e.g top 1em left 5em.

Source: scss/tools/_position.scss, line 64

9.62 #Mixins.duk-position-relative duk-position-relative

This mixin provides an easy way to relatively position an element. It is a wrapper for @mixin duk-position.

Parameters:

$args

The direction and amount, e.g top 1em left 5em.

Source: scss/tools/_position.scss, line 52

9.63 #Mixins.duk-progress-bar duk-progress-bar

A progress bar.

Parameters:

$size

The height of the
$border-color

The color of the border.
$color

The color of the progress bar (defaults to currentColor).
$bar-selector

The progress bar element (defaults to > *).

Source: scss/tools/_progress.scss, line 4

9.64 #Mixins.duk-reset-appearance duk-reset-appearance

Reset appearance properties on an element.

Source: scss/tools/_reset.scss, line 26

9.65 #Mixins.duk-reset-edges duk-reset-edges

Reset all padding and margins to zero on an element.

Source: scss/tools/_reset.scss, line 4

9.66 #Mixins.duk-reset-list duk-reset-list

Reset padding, margin, list-style on a ordered/unordered list.

Source: scss/tools/_reset.scss, line 14

9.67 #Mixins.duk-responsive-aspect-ratio duk-responsive-aspect-ratio

Make and element that has a responsive aspect ratio (eg. square, 16:9). To create a square set x/y to 1.

Parameters:

$x

Horizontal aspect (integer)
$y

Vertical aspect (integer)
$content-selector

The child element that contains the content.

Source: scss/tools/_responsive-aspect-ratio.scss, line 6

9.68 #Mixins.duk-responsive-video-iframe duk-responsive-video-iframe

Make iframe videos responsive and retain a 16:9 aspect ratio

Source: scss/tools/_responsive-aspect-ratio.scss, line 31

9.69 #Mixins.duk-shadow duk-shadow

Return shadow style.

Example: @include duk-shadow('default', '0 0px 8px 0', 0.5);

Parameters:

$color-name

The key that represents the color in the color map.
$size

The size of the shadow (defaults to 1px)
$type

The type of shadow (defaults to solid).
$shadow-colors

A map of the shadow colors.

Source: scss/tools/_shadow.scss, line 18

9.70 #Mixins.duk-shadow-style duk-shadow-style

Apply a shadow style from the shadow map.

Example: @include duk-shadow-style('1');

Parameters:

$style-name

The key that represents the style in the shadow map.

Source: scss/tools/_shadow.scss, line 34

9.71 #Mixins.duk-sidebar-slideout duk-sidebar-slideout

Creates a slideout sidebar, this should be applied to the wrapper that contains only the content element to slide out.

Parameters:

$content-selector

The content element to slide out (eg 'nav').
$align

Does it slide out from the left or right (defaults to left).
$max-width

The max width of the slideout content (defaults to 400px).
$speed

The speed of the slideout

Source: scss/tools/_sidebar.scss, line 7

9.72 #Mixins.duk-sidebar-slideout--open duk-sidebar-slideout--open

Applies the 'open' styles for a slideout sidebar, should be called on the same element as duk-sidebar-slideout() and use the same $content-selector and $align.

Parameters:

$content-selector

The content element to slide out (eg 'nav').
$align

Does it slide out from the left or right (defaults to left).

Source: scss/tools/_sidebar.scss, line 37

9.73 #Mixins.duk-sidebar-slideout--reset duk-sidebar-slideout--reset

Resets all properties ued by duk-sidebar-slideout(), this is useful to apply at a larger breakpoint where the nav menu goes form say a sidebar to horizontal.

Parameters: