Base Align

css

.align-baseline

.align-baseline { ... }

Author

  • Basscss@v8

.align-top

.align-top { ... }

Author

  • Basscss@v8

.align-middle

.align-middle { ... }

Author

  • Basscss@v8

.align-bottom

.align-bottom { ... }

Author

  • Basscss@v8

Base Border

variables

base-border-width

$base-border-width: 1px !default;

Author

  • Basscss@v8

base-border-radius

$base-border-radius: 3px !default;

Author

  • Basscss@v8

css

.border

.border { ... }

Author

  • Basscss@v8

.border-none

.border-none { ... }

Author

  • Basscss@v8

.border-top

.border-top { ... }

Author

  • Basscss@v8

.border-right

.border-right { ... }

Author

  • Basscss@v8

.border-bottom

.border-bottom { ... }

Author

  • Basscss@v8

.border-left

.border-left { ... }

Author

  • Basscss@v8

.rounded

.rounded { ... }

Author

  • Basscss@v8

.circle

.circle { ... }

Author

  • Basscss@v8

.not-rounded

.not-rounded { ... }

Author

  • Basscss@v8

.rounded-top

.rounded-top { ... }

Author

  • Basscss@v8

.rounded-right

.rounded-right { ... }

Author

  • Basscss@v8

.rounded-bottom

.rounded-bottom { ... }

Author

  • Basscss@v8

.rounded-left

.rounded-left { ... }

Author

  • Basscss@v8

base:cursor

css

.cursor-pointer

.cursor-pointer { ... }

Author

  • Michael Becker

.cursor-help

.cursor-help { ... }

Author

  • Michael Becker

.cursor-copy

.cursor-copy { ... }

Author

  • Michael Becker

.cursor-copy

.cursor-copy { ... }

Author

  • Michael Becker

.cursor-wait

.cursor-wait { ... }

Author

  • Michael Becker

.cursor-progress

.cursor-progress { ... }

Author

  • Michael Becker

.cursor-not-allowed

.cursor-not-allowed { ... }

Author

  • Michael Becker

.cursor-none

.cursor-none { ... }

Author

  • Michael Becker

Base Flexbox

css

.flex

.flex { ... }

Author

  • Basscss@v8, Michael Becker

.inline-flex

.inline-flex { ... }

Author

  • Basscss@v8, Michael Becker

.#{$class-flex-xs}

.#{$class-flex-xs} { ... }

Description

for bp-xs

Author

  • Basscss@v8, Michael Becker

.#{$class-flex-sm}

.#{$class-flex-sm} { ... }

Description

for bp-sm

Author

  • Basscss@v8, Michael Becker

.#{$class-flex-md}

.#{$class-flex-md} { ... }

Description

for bp-md

Author

  • Basscss@v8, Michael Becker

.#{$class-flex-lg}

.#{$class-flex-lg} { ... }

Description

for bp-lg

Author

  • Basscss@v8, Michael Becker

.#{$class-flex-xl}

.#{$class-flex-xl} { ... }

Description

for bp-xl

Author

  • Basscss@v8, Michael Becker

.flex-column

.flex-column { ... }

Author

  • Basscss@v8, Michael Becker

.flex-wrap

.flex-wrap { ... }

Author

  • Basscss@v8, Michael Becker

.flex-nowrap

.flex-nowrap { ... }

Author

  • Basscss@v8, Michael Becker

.flex-wrap-reverse

.flex-wrap-reverse { ... }

Author

  • Basscss@v8, Michael Becker

.shrink-0x

.shrink-0x { ... }

Author

  • Basscss@v8, Michael Becker

.shrink-1x

.shrink-1x { ... }

Author

  • Basscss@v8, Michael Becker

.shrink-2x

.shrink-2x { ... }

Author

  • Basscss@v8, Michael Becker

.shrink-3x

.shrink-3x { ... }

Author

  • Basscss@v8, Michael Becker

.grow-1x

.grow-1x { ... }

Author

  • Basscss@v8, Michael Becker

.grow-2x

.grow-2x { ... }

Author

  • Basscss@v8, Michael Becker

.grow-3x

.grow-3x { ... }

Author

  • Basscss@v8, Michael Becker

.items-start

.items-start { ... }

Author

  • Basscss@v8, Michael Becker

.items-end

.items-end { ... }

Author

  • Basscss@v8, Michael Becker

.items-center

.items-center { ... }

Author

  • Basscss@v8, Michael Becker

.items-baseline

.items-baseline { ... }

Author

  • Basscss@v8, Michael Becker

.items-stretch

.items-stretch { ... }

Author

  • Basscss@v8, Michael Becker

.self-start

.self-start { ... }

Author

  • Basscss@v8, Michael Becker

.self-end

.self-end { ... }

Author

  • Basscss@v8, Michael Becker

.self-center

.self-center { ... }

Author

  • Basscss@v8, Michael Becker

.self-baseline

.self-baseline { ... }

Author

  • Basscss@v8, Michael Becker

.self-stretch

.self-stretch { ... }

Author

  • Basscss@v8, Michael Becker

.justify-start

.justify-start { ... }

Author

  • Basscss@v8, Michael Becker

.justify-end

.justify-end { ... }

Author

  • Basscss@v8, Michael Becker

.justify-center

.justify-center { ... }

Author

  • Basscss@v8, Michael Becker

.justify-between

.justify-between { ... }

Author

  • Basscss@v8, Michael Becker

.justify-around

.justify-around { ... }

Author

  • Basscss@v8, Michael Becker

.justify-evenly

.justify-evenly { ... }

Author

  • Basscss@v8, Michael Becker

.content-start

.content-start { ... }

Author

  • Basscss@v8, Michael Becker

.content-end

.content-end { ... }

Author

  • Basscss@v8, Michael Becker

.content-center

.content-center { ... }

Author

  • Basscss@v8, Michael Becker

.content-between

.content-between { ... }

Author

  • Basscss@v8, Michael Becker

.content-around

.content-around { ... }

Author

  • Basscss@v8, Michael Becker

.content-stretch

.content-stretch { ... }

Author

  • Basscss@v8, Michael Becker

.flex-auto

.flex-auto { ... }

Description

Flex Auto position [a] Fix for Chrome 44 bug. https://code.google.com/p/chromium/issues/detail?id=506893 */

Author

  • Basscss@v8, Michael Becker

.flex-none

.flex-none { ... }

Author

  • Basscss@v8, Michael Becker

.order-0

.order-0 { ... }

Author

  • Basscss@v8, Michael Becker

.order-1

.order-1 { ... }

Author

  • Basscss@v8, Michael Becker

.order-2

.order-2 { ... }

Author

  • Basscss@v8, Michael Becker

.order-3

.order-3 { ... }

Author

  • Basscss@v8, Michael Becker

.order-last

.order-last { ... }

Author

  • Basscss@v8, Michael Becker

variables

class-flex-xs

$class-flex-xs: flex-xs !default;

Author

  • Basscss@v8, Michael Becker

class-flex-sm

$class-flex-sm: flex-sm !default;

Author

  • Basscss@v8, Michael Becker

class-flex-md

$class-flex-md: flex-md !default;

Author

  • Basscss@v8, Michael Becker

class-flex-lg

$class-flex-lg: flex-lg !default;

Author

  • Basscss@v8, Michael Becker

class-flex-xl

$class-flex-xl: flex-xl !default;

Author

  • Basscss@v8, Michael Becker

Base Hide

css

.hide, .sr-only

.hide, .sr-only { ... }

Author

  • Basscss@v8

.#{$class-hide-xs}

.#{$class-hide-xs} { ... }

Description

for bp-xs

Author

  • Basscss@v8

.#{$class-hide-sm}

.#{$class-hide-sm} { ... }

Description

for bp-sm

Author

  • Basscss@v8

.#{$class-hide-md}

.#{$class-hide-md} { ... }

Description

for bp-md

Author

  • Basscss@v8

.#{$class-hide-lg}

.#{$class-hide-lg} { ... }

Description

for bp-lg

Author

  • Basscss@v8

.#{$class-hide-xl}

.#{$class-hide-xl} { ... }

Description

for bp-xl

Author

  • Basscss@v8

.display-none

.display-none { ... }

Author

  • Basscss@v8

variables

class-hide-xs

$class-hide-xs: hide-xs !default;

Author

  • Basscss@v8

class-hide-sm

$class-hide-sm: hide-sm !default;

Author

  • Basscss@v8

class-hide-md

$class-hide-md: hide-md !default;

Author

  • Basscss@v8

class-hide-lg

$class-hide-lg: hide-lg !default;

Author

  • Basscss@v8

class-hide-xl

$class-hide-xl: hide-xl !default;

Author

  • Basscss@v8

Base Layout

css

.inline

.inline { ... }

Author

  • Basscss@v8

.block

.block { ... }

Author

  • Basscss@v8

.inline-block

.inline-block { ... }

Author

  • Basscss@v8

.table

.table { ... }

Author

  • Basscss@v8

.table-cell

.table-cell { ... }

Author

  • Basscss@v8

.overflow-hidden

.overflow-hidden { ... }

Author

  • Basscss@v8

.overflow-scroll

.overflow-scroll { ... }

Author

  • Basscss@v8

.overflow-visible

.overflow-visible { ... }

Author

  • Basscss@v8

.overflow-auto

.overflow-auto { ... }

Author

  • Basscss@v8

.clearfix

.clearfix { ... }

Description

correct sizing for the parent node when the children are using float: left|right

Author

  • Basscss@v8

.left

.left { ... }

Author

  • Basscss@v8

.right

.right { ... }

Author

  • Basscss@v8

.fit

.fit { ... }

Author

  • Basscss@v8

.img-fit-w

.img-fit-w { ... }

Author

  • Basscss@v8

.img-fit-h

.img-fit-h { ... }

Author

  • Basscss@v8

.border-box

.border-box { ... }

Author

  • Basscss@v8

Base Position

variables

base-z1

$base-z1: 1 !default;

Author

  • Basscss@v8, Michael Becker

base-z2

$base-z2: 2 !default;

Author

  • Basscss@v8, Michael Becker

base-z3

$base-z3: 3 !default;

Author

  • Basscss@v8, Michael Becker

base-z4

$base-z4: 4 !default;

Author

  • Basscss@v8, Michael Becker

css

.relative

.relative { ... }

Author

  • Basscss@v8, Michael Becker

.absolute

.absolute { ... }

Author

  • Basscss@v8, Michael Becker

.fixed

.fixed { ... }

Author

  • Basscss@v8, Michael Becker

.sticky

.sticky { ... }

Author

  • Basscss@v8, Michael Becker

.top-0

.top-0 { ... }

Author

  • Basscss@v8, Michael Becker

.right-0

.right-0 { ... }

Author

  • Basscss@v8, Michael Becker

.bottom-0

.bottom-0 { ... }

Author

  • Basscss@v8, Michael Becker

.left-0

.left-0 { ... }

Author

  • Basscss@v8, Michael Becker

.inset

.inset { ... }

Author

  • Basscss@v8, Michael Becker

.z-behind

.z-behind { ... }

Author

  • Basscss@v8, Michael Becker

.z0

.z0 { ... }

Author

  • Basscss@v8, Michael Becker

.z1

.z1 { ... }

Author

  • Basscss@v8, Michael Becker

.z2

.z2 { ... }

Author

  • Basscss@v8, Michael Becker

.z3

.z3 { ... }

Author

  • Basscss@v8, Michael Becker

.z4

.z4 { ... }

Author

  • Basscss@v8, Michael Becker

base:show

variables

class-show-xs

$class-show-xs: show-xs !default;

Author

  • Michael becker

class-show-sm

$class-show-sm: show-sm !default;

Author

  • Michael becker

class-show-md

$class-show-md: show-md !default;

Author

  • Michael becker

class-show-lg

$class-show-lg: show-lg !default;

Author

  • Michael becker

class-show-xl

$class-show-xl: show-xl !default;

Author

  • Michael becker

css

.#{$class-show-xs}

.#{$class-show-xs} { ... }

Description

for bp-xs

Author

  • Michael becker

.#{$class-show-sm}

.#{$class-show-sm} { ... }

Description

for bp-sm

Author

  • Michael becker

.#{$class-show-md}

.#{$class-show-md} { ... }

Description

for bp-md

Author

  • Michael becker

.#{$class-show-lg}

.#{$class-show-lg} { ... }

Description

for bp-lg

Author

  • Michael becker

.#{$class-show-xl}

.#{$class-show-xl} { ... }

Description

for bp-xl

Author

  • Michael becker

Blockquote

variables

blockquote-bg-color

$blockquote-bg-color: $color-white !default;

Author

  • Mustard-UI@v1, Michael Becker

blockquote-border-color

$blockquote-border-color: $brand-color !default;

Author

  • Mustard-UI@v1, Michael Becker

blockquote-border-width

$blockquote-border-width: 4px !default;

Author

  • Mustard-UI@v1, Michael Becker

blockquote-selector

$blockquote-selector: "blockquote" !default;

Author

  • Mustard-UI@v1, Michael Becker

blockquote-author-selector

$blockquote-author-selector: ".blockquote-author" !default;

Author

  • Mustard-UI@v1, Michael Becker

blockquote-author-font-size

$blockquote-author-font-size: 0.875rem !default;

Author

  • Mustard-UI@v1, Michael Becker

css

#{$blockquote-selector}

#{$blockquote-selector} { ... }

Author

  • Mustard-UI@v1, Michael Becker

#{$blockquote-author-selector}

#{$blockquote-author-selector} { ... }

Author

  • Mustard-UI@v1, Michael Becker

Buttons

mixins

btnBase

@mixin btnBase() { ... }

Description

the styling for the button base element, without states (e.g. no hover included)

Parameters

None.

Requires

Used by

Author

  • Mustard-UI@v1, Michael Becker

btnStates

@mixin btnStates() { ... }

Description

the styling for focus/hover/active/disabled pseudo elements

Parameters

None.

Requires

Used by

Author

  • Mustard-UI@v1, Michael Becker

btn

@mixin btn() { ... }

Description

the full btn styling

Parameters

None.

Requires

Author

  • Mustard-UI@v1, Michael Becker

css

#{$button-class}-icon

#{$button-class}-icon { ... }

Author

  • Michael Becker

#{$button-class}-icon-small

#{$button-class}-icon-small { ... }

Author

  • Michael Becker

#{$button-selector}

#{$button-selector} { ... }

Author

  • Mustard-UI@v1, Michael Becker

#{$button-class}-#{$name}

#{$button-class}-#{$name} { ... }

Author

  • Mustard-UI@v1, Michael Becker

#{$button-class}-#{$name}-o

#{$button-class}-#{$name}-o { ... }

Author

  • Mustard-UI@v1, Michael Becker

#{$button-class}-#{$name}-text

#{$button-class}-#{$name}-text { ... }

Author

  • Mustard-UI@v1, Michael Becker

#{$button-class}-round

#{$button-class}-round { ... }

Author

  • Mustard-UI@v1, Michael Becker

#{$button-class}-lg

#{$button-class}-lg { ... }

Author

  • Mustard-UI@v1, Michael Becker

#{$button-class}-sm

#{$button-class}-sm { ... }

Author

  • Mustard-UI@v1, Michael Becker

#{$button-class}-raw

#{$button-class}-raw { ... }

Author

  • Mustard-UI@v1, Michael Becker

variables

button-radius

$button-radius: 4px !default;

Used by

Author

  • Mustard-UI@v1, Michael Becker

button-border-width

$button-border-width: 1px !default;

Used by

Author

  • Mustard-UI@v1, Michael Becker

button-outline-border-style

$button-outline-border-style: solid !default;

Author

  • Mustard-UI@v1, Michael Becker

button-shadow

$button-shadow: false !default;

Used by

Author

  • Mustard-UI@v1, Michael Becker

button-text-color

$button-text-color: $color-white !default;

Author

  • Mustard-UI@v1, Michael Becker

button-colors

$button-colors: (
    'primary' : $brand-color,
    'success' : $color-green-500,
    'info' : $color-gray-500,
    'warning' : $color-amber-600,
    'danger' : $color-red-500
) !default;

Author

  • Mustard-UI@v1, Michael Becker

button-class

$button-class: ".btn" !default;

Author

  • Mustard-UI@v1, Michael Becker

button-selector

$button-selector: "#{$button-class}, button, input[type='button'], input[type='reset'], input[type='submit']" !default;

Author

  • Mustard-UI@v1, Michael Becker

button-padding

$button-padding: space(1) space(2) !default;

Used by

Author

  • Mustard-UI@v1, Michael Becker

button-font-size

$button-font-size: 0.9rem !default;

Used by

Author

  • Mustard-UI@v1, Michael Becker

button-font-weight

$button-font-weight: 600 !default;

Used by

Author

  • Mustard-UI@v1, Michael Becker

button-sm-padding

$button-sm-padding: space('05') space(2) !default;

Author

  • Mustard-UI@v1, Michael Becker

button-sm-font-size

$button-sm-font-size: 0.75rem !default;

Author

  • Mustard-UI@v1, Michael Becker

button-lg-padding

$button-lg-padding: space(2) space(4) !default;

Author

  • Mustard-UI@v1, Michael Becker

button-lg-font-size

$button-lg-font-size: 1rem !default;

Author

  • Mustard-UI@v1, Michael Becker

button-round-radius

$button-round-radius: 24px !default;

Author

  • Mustard-UI@v1, Michael Becker

button-icon-size

$button-icon-size: 32px !default;

Author

  • Mustard-UI@v1, Michael Becker

button-icon-padding

$button-icon-padding: 2px !default;

Author

  • Mustard-UI@v1, Michael Becker

button-icon-small-size

$button-icon-small-size: 24px !default;

Author

  • Mustard-UI@v1, Michael Becker

button-icon-small-padding

$button-icon-small-padding: 3px !default;

Author

  • Mustard-UI@v1, Michael Becker

Code / Pre

variables

code-bg-color

$code-bg-color: $color-gray-100 !default;

Author

  • Michael Becker

code-border-color

$code-border-color: $brand-color !default;

Author

  • Michael Becker

code-font-color

$code-font-color: $color-gray-900 !default;

Author

  • Michael Becker

code-font-size

$code-font-size: 0.9rem !default;

Author

  • Michael Becker

code-border-width

$code-border-width: 4px !default;

Author

  • Michael Becker

code-pre-selector

$code-pre-selector: pre !default;

Author

  • Michael Becker

css

#{$code-pre-selector}

#{$code-pre-selector} { ... }

Author

  • Michael Becker

code

code { ... }

Author

  • Michael Becker

#{$code-pre-selector} > code

#{$code-pre-selector} > code { ... }

Author

  • Michael Becker

Component Loading

variables

loading-ring-width

$loading-ring-width: 6px;

Author

loading-size

$loading-size: 80px;

Author

loading-ring-width-dense

$loading-ring-width-dense: 3px;

Author

loading-size-dense

$loading-size-dense: 30px;

Author

loading-color

$loading-color: $color-gray-600;

Author

css

.loading

.loading { ... }

Author

.loading.dense

.loading.dense { ... }

Author

Component Modal

variables

modal-border-radius

$modal-border-radius: 4px !default;

Author

  • Mustard-UI@v1, Michael Becker

modal-max-height

$modal-max-height: 95vh !default;

Author

  • Mustard-UI@v1, Michael Becker

modal-shadow

$modal-shadow: true !default;

Author

  • Mustard-UI@v1, Michael Becker

modal-mask-color

$modal-mask-color: rgba(20, 20, 20, 0.5) !default;

Author

  • Mustard-UI@v1, Michael Becker

modal-bg-color

$modal-bg-color: $color-white !default;

Author

  • Mustard-UI@v1, Michael Becker

modal-head-padding

$modal-head-padding: space(2) !default;

Author

  • Mustard-UI@v1, Michael Becker

modal-body-padding

$modal-body-padding: space(4) space(2) !default;

Author

  • Mustard-UI@v1, Michael Becker

modal-z

$modal-z: 10 !default;

Author

  • Mustard-UI@v1, Michael Becker

css

.modal-mask

.modal-mask { ... }

Author

  • Mustard-UI@v1, Michael Becker

.modal

.modal { ... }

Author

  • Mustard-UI@v1, Michael Becker

.modal-head

.modal-head { ... }

Author

  • Mustard-UI@v1, Michael Becker

.modal-body

.modal-body { ... }

Author

  • Mustard-UI@v1, Michael Becker

Component Panel

variables

panel-shadow

$panel-shadow: true !default;

Author

  • Mustard-UI@v1, Michael Becker

panel-bg-color

$panel-bg-color: $color-white !default;

Author

  • Mustard-UI@v1, Michael Becker

css

.panel

.panel { ... }

Author

  • Mustard-UI@v1, Michael Becker

.panel-head

.panel-head { ... }

Author

  • Mustard-UI@v1, Michael Becker

.panel-title

.panel-title { ... }

Author

  • Mustard-UI@v1, Michael Becker

.panel-body

.panel-body { ... }

Author

  • Mustard-UI@v1, Michael Becker

Component Tooltip

variables

tooltip-border-radius

$tooltip-border-radius: 4px !default;

Author

  • Mustard-UI@v1, Michael Becker

tooltip-bg-color

$tooltip-bg-color: $color-gray-800 !default;

Author

  • Mustard-UI@v1, Michael Becker

tooltip-underline-color

$tooltip-underline-color: $color-gray-400 !default;

Author

  • Mustard-UI@v1, Michael Becker

css

.tooltip

.tooltip { ... }

Author

  • Mustard-UI@v1, Michael Becker

.tooltip-text

.tooltip-text { ... }

Author

  • Mustard-UI@v1, Michael Becker

Container

css

.container-responsive

.container-responsive { ... }

Author

  • Michael Becker

.container-#{$name}

.container-#{$name} { ... }

Author

  • Mustard-UI@v1, Michael Becker

.container

.container { ... }

Author

  • Mustard-UI@v1, Michael Becker

.container-fixed

.container-fixed { ... }

Author

  • Mustard-UI@v1, Michael Becker

variables

container-sizes

$container-sizes: (
    'small' : $bp-small,
    'medium' : $bp-medium,
    'large' : $bp-large,
    'xlarge' : $bp-xlarge,
) !default;

Author

  • Mustard-UI@v1, Michael Becker

Elevation

variables

elevation-steps

$elevation-steps: (
    0: none,
    1: 0 2px 4px rgba($color-gray-500, 0.5),
    2: 0 2px 6px rgba($color-gray-600, 0.6),
    3: 0 3px 6px rgba($color-gray-600, 0.7),
    4: 0 4px 6px rgba($color-gray-600, 0.7),
    'light': 0 4px 12px rgba($color-gray-300, 0.6),
) !default;

Used by

Author

  • Michael Becker

functions

elevation

@function elevation() { ... }

Parameters

None.

Requires

Used by

Author

  • Michael Becker

css

.ev#{$name}

.ev#{$name} { ... }

Description

for each $elevation-steps

Author

  • Michael Becker

Form

css

.form-control

.form-control { ... }

Author

  • Mustard-UI@v1, Michael Becker

.form-control-group

.form-control-group { ... }

Author

  • Mustard-UI@v1, Michael Becker

.form-control-group .form-control

.form-control-group .form-control { ... }

Author

  • Mustard-UI@v1, Michael Becker

.form-control-group .form-control:last-of-type

.form-control-group .form-control:last-of-type { ... }

Author

  • Mustard-UI@v1, Michael Becker

#{$select-selector}

#{$select-selector} { ... }

Author

  • Mustard-UI@v1, Michael Becker

#{$select-selector}.dense

#{$select-selector}.dense { ... }

Author

  • Mustard-UI@v1, Michael Becker

#{$textarea-selector}

#{$textarea-selector} { ... }

Author

  • Mustard-UI@v1, Michael Becker

.validation-error

.validation-error { ... }

Author

  • Mustard-UI@v1, Michael Becker

#{$label-selector}

#{$label-selector} { ... }

Author

  • Mustard-UI@v1, Michael Becker

#{$input-selector}

#{$input-selector} { ... }

Author

  • Mustard-UI@v1, Michael Becker

#{$input-base-selector}

#{$input-base-selector} { ... }

Author

  • Mustard-UI@v1, Michael Becker

#{$input-fieldset-selector}

#{$input-fieldset-selector} { ... }

Author

  • Mustard-UI@v1, Michael Becker

#{$input-option-selector}

#{$input-option-selector} { ... }

Author

  • Mustard-UI@v1, Michael Becker

#{$input-range-selector}

#{$input-range-selector} { ... }

Author

  • Mustard-UI@v1, Michael Becker

#{$input-color-selector}

#{$input-color-selector} { ... }

Author

  • Mustard-UI@v1, Michael Becker

variables

select-selector

$select-selector: 'select' !default;

Author

  • Mustard-UI@v1, Michael Becker

textarea-selector

$textarea-selector: 'textarea' !default;

Author

  • Mustard-UI@v1, Michael Becker

input-selector

$input-selector: 'input[type="file"], input[type="color"], input[type="date"], input[type="datetime-local"], input[type="email"], input[type="month"], input[type="number"], input[type="range"], input[type="search"], input[type="tel"], input[type="time"], input[type="url"], input[type="week"], input[type="text"], input[type="password"], select' !default;

Author

  • Mustard-UI@v1, Michael Becker

input-base-selector

$input-base-selector: 'input, select, fieldset' !default;

Author

  • Mustard-UI@v1, Michael Becker

input-fieldset-selector

$input-fieldset-selector: 'fieldset' !default;

Author

  • Mustard-UI@v1, Michael Becker

input-option-selector

$input-option-selector: 'input[type="checkbox"], input[type="radio"]' !default;

Author

  • Mustard-UI@v1, Michael Becker

label-selector

$label-selector: 'label' !default;

Author

  • Mustard-UI@v1, Michael Becker

input-range-selector

$input-range-selector: 'input[type="range"]' !default;

Author

  • Mustard-UI@v1, Michael Becker

input-color-selector

$input-color-selector: 'input[type="color"]' !default;

Author

  • Mustard-UI@v1, Michael Becker

input-bg-color

$input-bg-color: $color-white !default;

Author

  • Mustard-UI@v1, Michael Becker

input-active-color

$input-active-color: $brand-color !default;

Author

  • Mustard-UI@v1, Michael Becker

input-border-color

$input-border-color: $color-gray-400 !default;

Author

  • Mustard-UI@v1, Michael Becker

input-invalid-color

$input-invalid-color: $color-red-200 !default;

Author

  • Mustard-UI@v1, Michael Becker

input-error-text-color

$input-error-text-color: $color-red-500 !default;

Author

  • Mustard-UI@v1, Michael Becker

input-placeholder-color

$input-placeholder-color: $color-gray-500 !default;

Author

  • Mustard-UI@v1, Michael Becker

Grid

mixins

clearfix

@mixin clearfix() { ... }

Description

Gives float parents its size

Parameters

None.

Example

Include this mixin on a container if all children are floated, gives the container a proper size.

Output

:before and :after tricks with display: table on before and after and clear: both only on :after

Author

  • Michael Becker

col

@mixin col($number, $col-qty: $col-qty) { ... }

Description

Generates size for a column

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$number

id of the column you want

Int none
$col-qty

max. columns used

Int$col-qty

Requires

Author

  • Michael Becker

col-sm

@mixin col-sm($number, $col-qty: $col-qty) { ... }

Description

Generates a column for breakpoint size sm and bigger

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$number

id of the column you want

Int none
$col-qty

max. columns used

Int$col-qty

Requires

Author

  • Michael Becker

col-md

@mixin col-md($number, $col-qty: $col-qty) { ... }

Description

Generates a column for breakpoint size md

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$number

id of the column you want

Int none
$col-qty

max. columns used

Int$col-qty

Requires

Author

  • Michael Becker

col-lg

@mixin col-lg($number, $col-qty: $col-qty) { ... }

Description

Generates a column for breakpoint size lg

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$number

id of the column you want

Int none
$col-qty

max. columns used

Int$col-qty

Requires

Author

  • Michael Becker

col-xl

@mixin col-xl($number, $col-qty: $col-qty) { ... }

Description

Generates a column for breakpoint size xlarge

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$number

id of the column you want

Int none
$col-qty

max. columns used

Int$col-qty

Requires

Author

  • Michael Becker

functions

col

@function col($number, $col-qty: $col-qty) { ... }

Description

Easy column size calculator for whatever size the grid wanted is based on

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$number

id of the column calculated

Int none
$col-qty

max. columns used, overwrites the standard column qty grid

Int$col-qty

Example

"1,5" (1 out of 5) gives the size (20)[%] for a column in a 5er grid system, even the default grid system doesn't allow the use of 5 cols per row, this would be a 4.8 column "4.8 out of 24" with default $col-qty: 24
"1" (1 out of default) gives the size (4,166)[%] for a column in a 24er grid system with default $col-qty: 24

Requires

Used by

Author

  • Michael Becker

variables

class-offset-sm

$class-offset-sm: offset-sm !default;

Author

  • Michael Becker

class-offset-md

$class-offset-md: offset-md !default;

Author

  • Michael Becker

class-offset-lg

$class-offset-lg: offset-lg !default;

Author

  • Michael Becker

class-offset-xl

$class-offset-xl: offset-xl !default;

Author

  • Michael Becker

class-col-sm

$class-col-sm: col-sm !default;

Author

  • Michael Becker

class-col-md

$class-col-md: col-md !default;

Author

  • Michael Becker

class-col-lg

$class-col-lg: col-lg !default;

Author

  • Michael Becker

class-col-xl

$class-col-xl: col-xl !default;

Author

  • Michael Becker

css

.offset-#{$i}

.offset-#{$i} { ... }

Description

offset for cols

Author

  • Michael Becker

.#{$class-offset-sm}-#{$i}

.#{$class-offset-sm}-#{$i} { ... }

Description

offset for col for breakpoint sm

Author

  • Michael Becker

.#{$class-offset-md}-#{$i}

.#{$class-offset-md}-#{$i} { ... }

Description

offset for col for breakpoint md

Author

  • Michael Becker

.#{$class-offset-lg}-#{$i}

.#{$class-offset-lg}-#{$i} { ... }

Description

offset for col for breakpoint lg

Author

  • Michael Becker

.#{$class-offset-xl}-#{$i}

.#{$class-offset-xl}-#{$i} { ... }

Description

offset for col for breakpoint xl

Author

  • Michael Becker

.col-#{$i}

.col-#{$i} { ... }

Description

columns

Author

  • Michael Becker

.#{$class-col-sm}-#{$i}

.#{$class-col-sm}-#{$i} { ... }

Description

col for breakpoint sm

Author

  • Michael Becker

.#{$class-col-md}-#{$i}

.#{$class-col-md}-#{$i} { ... }

Description

col for breakpoint md

Author

  • Michael Becker

.#{$class-col-lg}-#{$i}

.#{$class-col-lg}-#{$i} { ... }

Description

col for breakpoint lg

Author

  • Michael Becker

.#{$class-col-xl}-#{$i}

.#{$class-col-xl}-#{$i} { ... }

Description

col for breakpoint xlarge

Author

  • Michael Becker

.grid-s05

.grid-s05 { ... }

Description

nested grid wrapper, for spacing 0.5

Author

  • Michael Becker

.grid-s05 > [class^="col"]

.grid-s05 > [class^="col"] { ... }

Description

all .col-* classes as direct child get the padding inherited

Author

  • Michael Becker

.grid-s1

.grid-s1 { ... }

Description

nested grid wrapper, for spacing 1

Author

  • Michael Becker

.grid-s1 > [class^="col"]

.grid-s1 > [class^="col"] { ... }

Description

all .col-* classes as direct child get the padding inherited

Author

  • Michael Becker

.grid-s2

.grid-s2 { ... }

Description

nested grid wrapper, for spacing 2

Author

  • Michael Becker

.grid-s2 > [class^="col"]

.grid-s2 > [class^="col"] { ... }

Description

all .col-* classes as direct child get the padding inherited

Author

  • Michael Becker

.col

.col { ... }

Description

col position left - only when not using flexbox

Author

  • Michael Becker

.col-right

.col-right { ... }

Description

col position right - only when not using flexbox

Author

  • Michael Becker

Grid Breakpoints (bp)

mixins

bp-xs

@mixin bp-xs() { ... }

Description

Breakpoint mixin for sm-eXtra got no or -down version, as would be all and -down would be like normal xs, as it is the smallest size

Parameters

None.

Content

This mixin allows extra content to be passed (through the @content directive). Role: will only be displayed when screen smaller or same then $bp-xs

Requires

Author

  • Michael Becker

bp-sm

@mixin bp-sm() { ... }

Description

Breakpoint mixin for sm and bigger

Parameters

None.

Content

This mixin allows extra content to be passed (through the @content directive). Role: will only be displayed when screen bigger then $bp-small

Requires

Author

  • Michael Becker

bp-sm-only

@mixin bp-sm-only() { ... }

Description

Breakpoint mixin for only sm

Parameters

None.

Content

This mixin allows extra content to be passed (through the @content directive). Role: will only be displayed when screen bigger then $bp-small and smaller then $bp-medium

Requires

Author

  • Michael Becker

bp-md

@mixin bp-md() { ... }

Description

Breakpoint mixin for md and bigger

Parameters

None.

Content

This mixin allows extra content to be passed (through the @content directive). Role: will only be displayed when screen bigger then $bp-small

Requires

Author

  • Michael Becker

bp-md-only

@mixin bp-md-only() { ... }

Description

Breakpoint mixin for only md

Parameters

None.

Content

This mixin allows extra content to be passed (through the @content directive). Role: will only be displayed when screen bigger then $bp-small and smaller then $bp-medium

Requires

Author

  • Michael Becker

bp-lg

@mixin bp-lg() { ... }

Description

Breakpoint mixin for lg and bigger

Parameters

None.

Content

This mixin allows extra content to be passed (through the @content directive). Role: will only be displayed when screen bigger then $bp-large

Requires

Author

  • Michael Becker

bp-lg-only

@mixin bp-lg-only() { ... }

Description

Breakpoint mixin for only lg

Parameters

None.

Content

This mixin allows extra content to be passed (through the @content directive). Role: will only be displayed when screen bigger then $bp-large and smaller then $bp-xlarge

Requires

Author

  • Michael Becker

bp-xl

@mixin bp-xl() { ... }

Description

Breakpoint mixin for lg-eXtra This screen size got no or -down version, as -down would be all and would be like normal xlarge, as it is the highest size

Parameters

None.

Content

This mixin allows extra content to be passed (through the @content directive). Role: will only be displayed when screen bigger then $bp-xlarge

Requires

Author

  • Michael Becker

Spacing

variables

spacing

$spacing: 5px !default;

Description

Spacing default

Type

Size

Used by

Author

  • Michael Becker

spacings-def

$spacings-def: (0: 0, '05': 0.5, 1: 1, 2: 2, 3: 3, 4: 4, 5: 5) !default;

Used by

Author

  • Michael Becker

functions

space

@function space() { ... }

Parameters

None.

Requires

Used by

Author

  • Michael Becker

mixins

spacingMaker

@mixin spacingMaker() { ... }

Parameters

None.

Requires

Used by

Author

  • Michael Becker

spacingMakerX

@mixin spacingMakerX() { ... }

Parameters

None.

Requires

Used by

Author

  • Michael Becker

spacingMakerY

@mixin spacingMakerY() { ... }

Parameters

None.

Requires

Used by

Author

  • Michael Becker

spacing-sm

@mixin spacing-sm() { ... }

Description

Responsive Spacings for breakpoint sm; margin and paddings, with numerics like configured for $spacings-def

Parameters

None.

Example

// margins:
`.m0-sm`, `m05-sm`, `m1-sm` etc. for all-spacings
`.mx0-sm` for horizontal spacings
`.my0-sm` for vertical spacings
`.mt0-sm` for top spacings
`.mr0-sm` for right spacings
`.mb0-sm` for bottom spacings
`.ml0-sm` for left spacings

// margins negative:
`.mn0-sm`, `mn05-sm`, `mn1-sm` etc. for all-spacings
`.mxn0-sm` for horizontal spacings
`.myn0-sm` for vertical spacings
`.mtn0-sm` for top spacings
`.mrn0-sm` for right spacings
`.mbn0-sm` for bottom spacings
`.mln0-sm` for left spacings

// padding:
`.p0-sm`, `m05-sm`, `m1-sm` etc. for all-spacings
`.px0-sm` for horizontal spacings
`.py0-sm` for vertical spacings
`.pt0-sm` for top spacings
`.pr0-sm` for right spacings
`.pb0-sm` for bottom spacings
`.pl0-sm` for left spacings

Requires

Author

  • Michael Becker

spacing-md

@mixin spacing-md() { ... }

Description

Responsive Spacings for breakpoint md; margin and paddings, with numerics like configured for $spacings-def

Parameters

None.

Example

// margins:
`.m0-md`, `m05-md`, `m1-md` etc. for all-spacings
`.mx0-md` for horizontal spacings
`.my0-md` for vertical spacings
`.mt0-md` for top spacings
`.mr0-md` for right spacings
`.mb0-md` for bottom spacings
`.ml0-md` for left spacings

// margins negative:
`.mn0-md`, `mn05-md`, `mn1-md` etc. for all-spacings
`.mxn0-md` for horizontal spacings
`.myn0-md` for vertical spacings
`.mtn0-md` for top spacings
`.mrn0-md` for right spacings
`.mbn0-md` for bottom spacings
`.mln0-md` for left spacings

// padding:
`.p0-md`, `m05-md`, `m1-md` etc. for all-spacings
`.px0-md` for horizontal spacings
`.py0-md` for vertical spacings
`.pt0-md` for top spacings
`.pr0-md` for right spacings
`.pb0-md` for bottom spacings
`.pl0-md` for left spacings

Requires

Author

  • Michael Becker

spacing-lg

@mixin spacing-lg() { ... }

Description

Responsive Spacings for breakpoint lg; margin and paddings, with numerics like configured for $spacings-def

Parameters

None.

Example

// margins:
`.m0-lg`, `m05-lg`, `m1-lg` etc. for all-spacings
`.mx0-lg` for horizontal spacings
`.my0-lg` for vertical spacings
`.mt0-lg` for top spacings
`.mr0-lg` for right spacings
`.mb0-lg` for bottom spacings
`.ml0-lg` for left spacings

// margins negative:
`.mn0-lg`, `mn05-lg`, `mn1-lg` etc. for all-spacings
`.mxn0-lg` for horizontal spacings
`.myn0-lg` for vertical spacings
`.mtn0-lg` for top spacings
`.mrn0-lg` for right spacings
`.mbn0-lg` for bottom spacings
`.mln0-lg` for left spacings

// padding:
`.p0-lg`, `m05-lg`, `m1-lg` etc. for all-spacings
`.px0-lg` for horizontal spacings
`.py0-lg` for vertical spacings
`.pt0-lg` for top spacings
`.pr0-lg` for right spacings
`.pb0-lg` for bottom spacings
`.pl0-lg` for left spacings

Requires

Author

  • Michael Becker

spacing-xl

@mixin spacing-xl() { ... }

Description

Responsive Spacings for breakpoint xl; margin and paddings, with numerics like configured for $spacings-def

Parameters

None.

Example

// margins:
`.m0-xl`, `m05-xl`, `m1-xl` etc. for all-spacings
`.mx0-xl` for horizontal spacings
`.my0-xl` for vertical spacings
`.mt0-xl` for top spacings
`.mr0-xl` for right spacings
`.mb0-xl` for bottom spacings
`.ml0-xl` for left spacings

// margins negative:
`.mn0-xl`, `mn05-xl`, `mn1-xl` etc. for all-spacings
`.mxn0-xl` for horizontal spacings
`.myn0-xl` for vertical spacings
`.mtn0-xl` for top spacings
`.mrn0-xl` for right spacings
`.mbn0-xl` for bottom spacings
`.mln0-xl` for left spacings

// padding:
`.p0-xl`, `m05-xl`, `m1-xl` etc. for all-spacings
`.px0-xl` for horizontal spacings
`.py0-xl` for vertical spacings
`.pt0-xl` for top spacings
`.pr0-xl` for right spacings
`.pb0-xl` for bottom spacings
`.pl0-xl` for left spacings

Requires

Author

  • Michael Becker

css

/// .ma

///
.ma { ... }

Description

.mxn1 .myn1 .mt0 .mr0 .mb0 .ml0

Example

// for all configured spacing steps, like in first line for all:
    .m0, m05, .m1, .m2, .m3
    .mx0
    .my0
    .mt0
    .mr0
    .mb0
    .ml0

Author

  • Michael Becker

.ma

.ma { ... }

Example

// for all configured spacing steps, like in first line for all:
    .m0, m05, .m1, .m2, .m3
    .mx0
    .my0
    .mt0
    .mr0
    .mb0
    .ml0

Author

  • Michael Becker

.mra

.mra { ... }

Example

// for all configured spacing steps, like in first line for all:
    .m0, m05, .m1, .m2, .m3
    .mx0
    .my0
    .mt0
    .mr0
    .mb0
    .ml0

Author

  • Michael Becker

.mla

.mla { ... }

Example

// for all configured spacing steps, like in first line for all:
    .m0, m05, .m1, .m2, .m3
    .mx0
    .my0
    .mt0
    .mr0
    .mb0
    .ml0

Author

  • Michael Becker

.mta

.mta { ... }

Example

// for all configured spacing steps, like in first line for all:
    .m0, m05, .m1, .m2, .m3
    .mx0
    .my0
    .mt0
    .mr0
    .mb0
    .ml0

Author

  • Michael Becker

.mba

.mba { ... }

Example

// for all configured spacing steps, like in first line for all:
    .m0, m05, .m1, .m2, .m3
    .mx0
    .my0
    .mt0
    .mr0
    .mb0
    .ml0

Author

  • Michael Becker

.mxa

.mxa { ... }

Example

// for all configured spacing steps, like in first line for all:
    .m0, m05, .m1, .m2, .m3
    .mx0
    .my0
    .mt0
    .mr0
    .mb0
    .ml0

Author

  • Michael Becker

.mya

.mya { ... }

Example

// for all configured spacing steps, like in first line for all:
    .m0, m05, .m1, .m2, .m3
    .mx0
    .my0
    .mt0
    .mr0
    .mb0
    .ml0

Author

  • Michael Becker

Table

variables

table-border-color

$table-border-color: $color-gray-200 !default;

Author

  • Mustard-UI@v1, Michael Becker

table-bg-cell

$table-bg-cell: $color-gray-200 !default;

Author

  • Mustard-UI@v1, Michael Becker

css

table

table { ... }

Author

  • Mustard-UI@v1, Michael Becker

table.fullwidth

table.fullwidth { ... }

Author

  • Mustard-UI@v1, Michael Becker

table.striped

table.striped { ... }

Author

  • Mustard-UI@v1, Michael Becker

Typography

mixins

title1

@mixin title1() { ... }

Parameters

None.

Requires

Author

  • Mustard-UI@v1, Michael Becker

title2

@mixin title2() { ... }

Parameters

None.

Requires

Author

  • Mustard-UI@v1, Michael Becker

title3

@mixin title3() { ... }

Parameters

None.

Requires

Author

  • Mustard-UI@v1, Michael Becker

title4

@mixin title4() { ... }

Parameters

None.

Requires

Author

  • Mustard-UI@v1, Michael Becker

title5

@mixin title5() { ... }

Parameters

None.

Requires

Author

  • Mustard-UI@v1, Michael Becker

title6

@mixin title6() { ... }

Parameters

None.

Requires

Author

  • Mustard-UI@v1, Michael Becker

body1

@mixin body1() { ... }

Parameters

None.

Requires

Used by

Author

  • Mustard-UI@v1, Michael Becker

body2

@mixin body2() { ... }

Parameters

None.

Requires

Author

  • Mustard-UI@v1, Michael Becker

css

.font-family-inherit

.font-family-inherit { ... }

Author

  • Basscss@v8, Mustard-UI@v1, Michael Becker

.font-family-mono

.font-family-mono { ... }

Author

  • Basscss@v8, Mustard-UI@v1, Michael Becker

.font-size-inherit

.font-size-inherit { ... }

Author

  • Basscss@v8, Mustard-UI@v1, Michael Becker

.text-decoration-none

.text-decoration-none { ... }

Author

  • Basscss@v8, Mustard-UI@v1, Michael Becker

.light

.light { ... }

Author

  • Basscss@v8, Mustard-UI@v1, Michael Becker

.bold

.bold { ... }

Author

  • Basscss@v8, Mustard-UI@v1, Michael Becker

.regular

.regular { ... }

Author

  • Basscss@v8, Mustard-UI@v1, Michael Becker

.normal

.normal { ... }

Author

  • Basscss@v8, Mustard-UI@v1, Michael Becker

.italic

.italic { ... }

Author

  • Basscss@v8, Mustard-UI@v1, Michael Becker

.caps

.caps { ... }

Author

  • Basscss@v8, Mustard-UI@v1, Michael Becker

.left-align

.left-align { ... }

Author

  • Basscss@v8, Mustard-UI@v1, Michael Becker

.center

.center { ... }

Author

  • Basscss@v8, Mustard-UI@v1, Michael Becker

.right-align

.right-align { ... }

Author

  • Basscss@v8, Mustard-UI@v1, Michael Becker

.justify

.justify { ... }

Author

  • Basscss@v8, Mustard-UI@v1, Michael Becker

.nowrap

.nowrap { ... }

Author

  • Basscss@v8, Mustard-UI@v1, Michael Becker

.break-word

.break-word { ... }

Author

  • Basscss@v8, Mustard-UI@v1, Michael Becker

.line-height-1

.line-height-1 { ... }

Author

  • Basscss@v8, Mustard-UI@v1, Michael Becker

.line-height-2

.line-height-2 { ... }

Author

  • Basscss@v8, Mustard-UI@v1, Michael Becker

.line-height-3

.line-height-3 { ... }

Author

  • Basscss@v8, Mustard-UI@v1, Michael Becker

.line-height-4

.line-height-4 { ... }

Author

  • Basscss@v8, Mustard-UI@v1, Michael Becker

.list-style-none

.list-style-none { ... }

Author

  • Basscss@v8, Mustard-UI@v1, Michael Becker

.underline

.underline { ... }

Author

  • Basscss@v8, Mustard-UI@v1, Michael Becker

.truncate

.truncate { ... }

Author

  • Basscss@v8, Mustard-UI@v1, Michael Becker

.list-reset

.list-reset { ... }

Author

  • Basscss@v8, Mustard-UI@v1, Michael Becker

.body1

.body1 { ... }

Author

  • Basscss@v8, Mustard-UI@v1, Michael Becker

.body2

.body2 { ... }

Author

  • Basscss@v8, Mustard-UI@v1, Michael Becker

#{$title1-selector}, #{$title2-selector}, #{$title3-selector}, #{$title4-selector}, #{$title5-selector}, #{$title6-selector}

#{$title1-selector},
#{$title2-selector},
#{$title3-selector},
#{$title4-selector},
#{$title5-selector},
#{$title6-selector} { ... }

Author

  • Basscss@v8, Mustard-UI@v1, Michael Becker

#{$title1-selector}

#{$title1-selector} { ... }

Author

  • Basscss@v8, Mustard-UI@v1, Michael Becker

#{$title2-selector}

#{$title2-selector} { ... }

Author

  • Basscss@v8, Mustard-UI@v1, Michael Becker

#{$title3-selector}

#{$title3-selector} { ... }

Author

  • Basscss@v8, Mustard-UI@v1, Michael Becker

#{$title4-selector}

#{$title4-selector} { ... }

Author

  • Basscss@v8, Mustard-UI@v1, Michael Becker

#{$title5-selector}

#{$title5-selector} { ... }

Author

  • Basscss@v8, Mustard-UI@v1, Michael Becker

#{$title6-selector}

#{$title6-selector} { ... }

Author

  • Basscss@v8, Mustard-UI@v1, Michael Becker

variables

line-height

$line-height: 1.6 !default;

Used by

Author

  • Mustard-UI@v1, Michael Becker

line-height-1

$line-height-1: $line-height !default;

Author

  • Mustard-UI@v1, Michael Becker

line-height-2

$line-height-2: 1.85 !default;

Author

  • Mustard-UI@v1, Michael Becker

line-height-3

$line-height-3: 2.05 !default;

Author

  • Mustard-UI@v1, Michael Becker

line-height-4

$line-height-4: 2.25 !default;

Author

  • Mustard-UI@v1, Michael Becker

font-weight-light

$font-weight-light: 300 !default;

Author

  • Mustard-UI@v1, Michael Becker

font-weight

$font-weight: 400 !default;

Used by

Author

  • Mustard-UI@v1, Michael Becker

font-weight-bold

$font-weight-bold: 600 !default;

Author

  • Mustard-UI@v1, Michael Becker

font-color

$font-color: $color-gray-800 !default;

Used by

Author

  • Mustard-UI@v1, Michael Becker

caps-letter-spacing

$caps-letter-spacing: 0.05em;

Author

  • Mustard-UI@v1, Michael Becker

font-family

$font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif !default;

Used by

Author

  • Mustard-UI@v1, Michael Becker

font-family-mono

$font-family-mono: "SF Mono", "Segoe UI Mono", "Roboto Mono", Menlo, Courier, monospace !default;

Author

  • Mustard-UI@v1, Michael Becker

title-font-color

$title-font-color: $color-gray-800 !default;

Author

  • Mustard-UI@v1, Michael Becker

title-font-weight

$title-font-weight: $font-weight !default;

Author

  • Mustard-UI@v1, Michael Becker

title-margin

$title-margin: 0 0 0.3em 0 !default;

Author

  • Mustard-UI@v1, Michael Becker

title-font-family

$title-font-family: $font-family !default;

Author

  • Mustard-UI@v1, Michael Becker

title1-font-size

$title1-font-size: 3em !default;

Used by

Author

  • Mustard-UI@v1, Michael Becker

title1-line-height

$title1-line-height: 1.25em !default;

Used by

Author

  • Mustard-UI@v1, Michael Becker

title2-font-size

$title2-font-size: 2.5em !default;

Used by

Author

  • Mustard-UI@v1, Michael Becker

title2-line-height

$title2-line-height: 1.25em !default;

Used by

Author

  • Mustard-UI@v1, Michael Becker

title3-font-size

$title3-font-size: 2em !default;

Used by

Author

  • Mustard-UI@v1, Michael Becker

title3-line-height

$title3-line-height: 1.25em !default;

Used by

Author

  • Mustard-UI@v1, Michael Becker

title4-font-size

$title4-font-size: 1.75em !default;

Used by

Author

  • Mustard-UI@v1, Michael Becker

title4-line-height

$title4-line-height: 1em !default;

Used by

Author

  • Mustard-UI@v1, Michael Becker

title5-font-size

$title5-font-size: 1.5em !default;

Used by

Author

  • Mustard-UI@v1, Michael Becker

title5-line-height

$title5-line-height: 1em !default;

Used by

Author

  • Mustard-UI@v1, Michael Becker

title6-font-size

$title6-font-size: 1.25em !default;

Used by

Author

  • Mustard-UI@v1, Michael Becker

title6-line-height

$title6-line-height: 1em !default;

Used by

Author

  • Mustard-UI@v1, Michael Becker

title1-selector

$title1-selector: 'h1, .h1' !default;

Author

  • Mustard-UI@v1, Michael Becker

title2-selector

$title2-selector: 'h2, .h2' !default;

Author

  • Mustard-UI@v1, Michael Becker

title3-selector

$title3-selector: 'h3, .h3' !default;

Author

  • Mustard-UI@v1, Michael Becker

title4-selector

$title4-selector: 'h4, .h4' !default;

Author

  • Mustard-UI@v1, Michael Becker

title5-selector

$title5-selector: 'h5, .h5' !default;

Author

  • Mustard-UI@v1, Michael Becker

title6-selector

$title6-selector: 'h6, .h6' !default;

Author

  • Mustard-UI@v1, Michael Becker

body1-margin

$body1-margin: 0 0 0.8em 0 !default;

Used by

Author

  • Mustard-UI@v1, Michael Becker

body2-factor

$body2-factor: 0.9 !default;

Used by

Author

  • Mustard-UI@v1, Michael Becker

body2-margin

$body2-margin: 0 0 0.4em 0 !default;

Used by

Author

  • Mustard-UI@v1, Michael Becker

text-colors

$text-colors: (
    'primary' : $brand-color,
    'success' : $color-green-500,
    'info' : $color-gray-500,
    'warning' : $color-amber-600,
    'danger' : $color-red-500,
    'light' : $color-gray-50,
    'dark' : $color-gray-900,
    'accent' : $color-blue-700,
) !default;

Author

  • Mustard-UI@v1, Michael Becker

typography:links

General

variables

class-style

$class-style: bootstrap !default;

Map structure

key Namekey Descriptionkey Typekey Value
$class-style

bootstrap or basscss

Stringbootstrap

button-class

$button-class: ".btn" !default;

button-selector

$button-selector: "#{$button-class}" !default;

input-selector

$input-selector: 'input[type="file"].inp, input[type="color"].inp, input[type="date"].inp, input[type="datetime-local"].inp, input[type="email"].inp, input[type="month"].inp, input[type="number"].inp, input[type="range"].inp, input[type="search"].inp, input[type="tel"].inp, input[type="time"].inp, input[type="url"].inp, input[type="week"].inp, input[type="text"].inp, input[type="password"].inp, select.inp' !default;

textarea-selector

$textarea-selector: ".inp-text" !default;

input-base-selector

$input-base-selector: 'input.inp, select.inp, fieldset.inp' !default;

input-fieldset-selector

$input-fieldset-selector: '.fieldset' !default;

input-option-selector

$input-option-selector: 'input[type="checkbox"].inp, input[type="radio"].inp' !default;

label-selector

$label-selector: '.label' !default;

input-range-selector

$input-range-selector: 'input[type="range"].inp' !default;

input-color-selector

$input-color-selector: 'input[type="color"].inp' !default;

select-selector

$select-selector: 'select.inp' !default;

title1-selector

$title1-selector: '.h1' !default;

title2-selector

$title2-selector: '.h2' !default;

title3-selector

$title3-selector: '.h3' !default;

title4-selector

$title4-selector: '.h4' !default;

title5-selector

$title5-selector: '.h5' !default;

title6-selector

$title6-selector: '.h6' !default;

css

html

html { ... }

*, *::after, *::before

*, *::after, *::before { ... }

body

body { ... }

Variables: Colors

variables

color-white

$color-white: #ffffff !default;

color-black

$color-black: #000000 !default;

color-gray-50

$color-gray-50: #fafafa !default;

color-gray-100

$color-gray-100: #f5f5f5 !default;

color-gray-200

$color-gray-200: #eeeeee !default;

color-gray-300

$color-gray-300: #e0e0e0 !default;

color-gray-400

$color-gray-400: #bdbdbd !default;

color-gray-500

$color-gray-500: #9e9e9e !default;

color-gray-600

$color-gray-600: #757575 !default;

color-gray-700

$color-gray-700: #616161 !default;

color-gray-800

$color-gray-800: #424242 !default;

color-gray-900

$color-gray-900: #212121 !default;

color-blue-gray-50

$color-blue-gray-50: #eceff1 !default;

color-blue-gray-100

$color-blue-gray-100: #cfd8dc !default;

color-blue-gray-200

$color-blue-gray-200: #b0bec5 !default;

color-blue-gray-300

$color-blue-gray-300: #90a4ae !default;

color-blue-gray-400

$color-blue-gray-400: #78909c !default;

color-blue-gray-500

$color-blue-gray-500: #607d8b !default;

color-blue-gray-600

$color-blue-gray-600: #546e7a !default;

color-blue-gray-700

$color-blue-gray-700: #455a64 !default;

color-blue-gray-800

$color-blue-gray-800: #37474f !default;

color-blue-gray-900

$color-blue-gray-900: #263238 !default;

color-red-50

$color-red-50: #ffebee !default;

color-red-100

$color-red-100: #ffcdd2 !default;

color-red-200

$color-red-200: #ef9a9a !default;

color-red-300

$color-red-300: #e57373 !default;

color-red-400

$color-red-400: #ef5350 !default;

color-red-500

$color-red-500: #f44336 !default;

color-red-600

$color-red-600: #e53935 !default;

color-red-700

$color-red-700: #d32f2f !default;

color-red-800

$color-red-800: #c62828 !default;

color-red-900

$color-red-900: #b71c1c !default;

color-pink-50

$color-pink-50: #fce4ec !default;

color-pink-100

$color-pink-100: #f8bbd0 !default;

color-pink-200

$color-pink-200: #f48fb1 !default;

color-pink-300

$color-pink-300: #f06292 !default;

color-pink-400

$color-pink-400: #ec407a !default;

color-pink-500

$color-pink-500: #e91e63 !default;

color-pink-600

$color-pink-600: #d81b60 !default;

color-pink-700

$color-pink-700: #c2185b !default;

color-pink-800

$color-pink-800: #ad1457 !default;

color-pink-900

$color-pink-900: #880e4f !default;

color-purple-50

$color-purple-50: #f3e5f5 !default;

color-purple-100

$color-purple-100: #e1bee7 !default;

color-purple-200

$color-purple-200: #ce93d8 !default;

color-purple-300

$color-purple-300: #ba68c8 !default;

color-purple-400

$color-purple-400: #ab47bc !default;

color-purple-500

$color-purple-500: #9c27b0 !default;

color-purple-600

$color-purple-600: #8e24aa !default;

color-purple-700

$color-purple-700: #7b1fa2 !default;

color-purple-800

$color-purple-800: #6a1b9a !default;

color-purple-900

$color-purple-900: #4a148c !default;

color-deep-purple-50

$color-deep-purple-50: #ede7f6 !default;

color-deep-purple-100

$color-deep-purple-100: #d1c4e9 !default;

color-deep-purple-200

$color-deep-purple-200: #b39ddb !default;

color-deep-purple-300

$color-deep-purple-300: #9575cd !default;

color-deep-purple-400

$color-deep-purple-400: #7e57c2 !default;

color-deep-purple-500

$color-deep-purple-500: #673ab7 !default;

color-deep-purple-600

$color-deep-purple-600: #5e35b1 !default;

color-deep-purple-700

$color-deep-purple-700: #512da8 !default;

color-deep-purple-800

$color-deep-purple-800: #4527a0 !default;

color-deep-purple-900

$color-deep-purple-900: #311b92 !default;

color-indigo-50

$color-indigo-50: #e8eaf6 !default;

color-indigo-100

$color-indigo-100: #c5cae9 !default;

color-indigo-200

$color-indigo-200: #9fa8da !default;

color-indigo-300

$color-indigo-300: #7986cb !default;

color-indigo-400

$color-indigo-400: #5c6bc0 !default;

color-indigo-500

$color-indigo-500: #3f51b5 !default;

color-indigo-600

$color-indigo-600: #3949ab !default;

color-indigo-700

$color-indigo-700: #303f9f !default;

color-indigo-800

$color-indigo-800: #283593 !default;

color-indigo-900

$color-indigo-900: #1a237e !default;

color-blue-50

$color-blue-50: #e3f2fd !default;

color-blue-100

$color-blue-100: #bbdefb !default;

color-blue-200

$color-blue-200: #90caf9 !default;

color-blue-300

$color-blue-300: #64b5f6 !default;

color-blue-400

$color-blue-400: #42a5f5 !default;

color-blue-500

$color-blue-500: #2196f3 !default;

color-blue-600

$color-blue-600: #1e88e5 !default;

color-blue-700

$color-blue-700: #1976d2 !default;

color-blue-800

$color-blue-800: #1565c0 !default;

color-blue-900

$color-blue-900: #0d47a1 !default;

color-light-blue-50

$color-light-blue-50: #e1f5fe !default;

color-light-blue-100

$color-light-blue-100: #b3e5fc !default;

color-light-blue-200

$color-light-blue-200: #81d4fa !default;

color-light-blue-300

$color-light-blue-300: #4fc3f7 !default;

color-light-blue-400

$color-light-blue-400: #29b6f6 !default;

color-light-blue-500

$color-light-blue-500: #03a9f4 !default;

color-light-blue-600

$color-light-blue-600: #039be5 !default;

color-light-blue-700

$color-light-blue-700: #0288d1 !default;

color-light-blue-800

$color-light-blue-800: #0277bd !default;

color-light-blue-900

$color-light-blue-900: #01579b !default;

color-cyan-50

$color-cyan-50: #e0f7fa !default;

color-cyan-100

$color-cyan-100: #b2ebf2 !default;

color-cyan-200

$color-cyan-200: #80deea !default;

color-cyan-300

$color-cyan-300: #4dd0e1 !default;

color-cyan-400

$color-cyan-400: #26c6da !default;

color-cyan-500

$color-cyan-500: #00bcd4 !default;

color-cyan-600

$color-cyan-600: #00acc1 !default;

color-cyan-700

$color-cyan-700: #0097a7 !default;

color-cyan-800

$color-cyan-800: #00838f !default;

color-cyan-900

$color-cyan-900: #006064 !default;

color-teal-50

$color-teal-50: #e0f2f1 !default;

color-teal-100

$color-teal-100: #b2dfdb !default;

color-teal-200

$color-teal-200: #80cbc4 !default;

color-teal-300

$color-teal-300: #4db6ac !default;

color-teal-400

$color-teal-400: #26a69a !default;

color-teal-500

$color-teal-500: #009688 !default;

color-teal-600

$color-teal-600: #00897b !default;

color-teal-700

$color-teal-700: #00796b !default;

color-teal-800

$color-teal-800: #00695c !default;

color-teal-900

$color-teal-900: #004d40 !default;

color-green-50

$color-green-50: #e8f5e9 !default;

color-green-100

$color-green-100: #c8e6c9 !default;

color-green-200

$color-green-200: #a5d6a7 !default;

color-green-300

$color-green-300: #81c784 !default;

color-green-400

$color-green-400: #66bb6a !default;

color-green-500

$color-green-500: #4caf50 !default;

color-green-600

$color-green-600: #43a047 !default;

color-green-700

$color-green-700: #388e3c !default;

color-green-800

$color-green-800: #2e7d32 !default;

color-green-900

$color-green-900: #1b5e20 !default;

color-light-green-50

$color-light-green-50: #f1f8e9 !default;

color-light-green-100

$color-light-green-100: #dcedc8 !default;

color-light-green-200

$color-light-green-200: #c5e1a5 !default;

color-light-green-300

$color-light-green-300: #aed581 !default;

color-light-green-400

$color-light-green-400: #9ccc65 !default;

color-light-green-500

$color-light-green-500: #8bc34a !default;

color-light-green-600

$color-light-green-600: #7cb342 !default;

color-light-green-700

$color-light-green-700: #689f38 !default;

color-light-green-800

$color-light-green-800: #558b2f !default;

color-light-green-900

$color-light-green-900: #33691e !default;

color-lime-50

$color-lime-50: #f9fbe7 !default;

color-lime-100

$color-lime-100: #f0f4c3 !default;

color-lime-200

$color-lime-200: #e6ee9c !default;

color-lime-300

$color-lime-300: #dce775 !default;

color-lime-400

$color-lime-400: #d4e157 !default;

color-lime-500

$color-lime-500: #cddc39 !default;

color-lime-600

$color-lime-600: #c0ca33 !default;

color-lime-700

$color-lime-700: #afb42b !default;

color-lime-800

$color-lime-800: #9e9d24 !default;

color-lime-900

$color-lime-900: #827717 !default;

color-yellow-50

$color-yellow-50: #fffde7 !default;

color-yellow-100

$color-yellow-100: #fff9c4 !default;

color-yellow-200

$color-yellow-200: #fff59d !default;

color-yellow-300

$color-yellow-300: #fff176 !default;

color-yellow-400

$color-yellow-400: #ffee58 !default;

color-yellow-500

$color-yellow-500: #ffeb3b !default;

color-yellow-600

$color-yellow-600: #fdd835 !default;

color-yellow-700

$color-yellow-700: #fbc02d !default;

color-yellow-800

$color-yellow-800: #f9a825 !default;

color-yellow-900

$color-yellow-900: #f57f17 !default;

color-amber-50

$color-amber-50: #fff8e1 !default;

color-amber-100

$color-amber-100: #ffecb3 !default;

color-amber-200

$color-amber-200: #ffe082 !default;

color-amber-300

$color-amber-300: #ffd54f !default;

color-amber-400

$color-amber-400: #ffca28 !default;

color-amber-500

$color-amber-500: #ffc107 !default;

color-amber-600

$color-amber-600: #ffb300 !default;

color-amber-700

$color-amber-700: #ffa000 !default;

color-amber-800

$color-amber-800: #ff8f00 !default;

color-amber-900

$color-amber-900: #ff6f00 !default;

color-orange-50

$color-orange-50: #fff3e0 !default;

color-orange-100

$color-orange-100: #ffe0b2 !default;

color-orange-200

$color-orange-200: #ffcc80 !default;

color-orange-300

$color-orange-300: #ffb74d !default;

color-orange-400

$color-orange-400: #ffa726 !default;

color-orange-500

$color-orange-500: #ff9800 !default;

color-orange-600

$color-orange-600: #fb8c00 !default;

color-orange-700

$color-orange-700: #f57c00 !default;

color-orange-800

$color-orange-800: #ef6c00 !default;

color-orange-900

$color-orange-900: #e65100 !default;

color-deep-orange-50

$color-deep-orange-50: #fbe9e7 !default;

color-deep-orange-100

$color-deep-orange-100: #ffccbc !default;

color-deep-orange-200

$color-deep-orange-200: #ffab91 !default;

color-deep-orange-300

$color-deep-orange-300: #ff8a65 !default;

color-deep-orange-400

$color-deep-orange-400: #ff7043 !default;

color-deep-orange-500

$color-deep-orange-500: #ff5722 !default;

color-deep-orange-600

$color-deep-orange-600: #f4511e !default;

color-deep-orange-700

$color-deep-orange-700: #e64a19 !default;

color-deep-orange-800

$color-deep-orange-800: #d84315 !default;

color-deep-orange-900

$color-deep-orange-900: #bf360c !default;

color-brown-50

$color-brown-50: #efebe9 !default;

color-brown-100

$color-brown-100: #d7ccc8 !default;

color-brown-200

$color-brown-200: #bcaaa4 !default;

color-brown-300

$color-brown-300: #a1887f !default;

color-brown-400

$color-brown-400: #8d6e63 !default;

color-brown-500

$color-brown-500: #795548 !default;

color-brown-600

$color-brown-600: #6d4c41 !default;

color-brown-700

$color-brown-700: #5d4037 !default;

color-brown-800

$color-brown-800: #4e342e !default;

color-brown-900

$color-brown-900: #3e2723 !default;

brand-color

$brand-color: $color-purple-600 !default;

Variables: Grid

variables

bp-xlarge

$bp-xlarge: 1440px !default;

Map structure

key Namekey Descriptionkey Typekey Value
$bp-xlarge

the minimum size for screen size lg eXtra

Size1440px

Used by

bp-large

$bp-large: 1024px !default;

Map structure

key Namekey Descriptionkey Typekey Value
$bp-large

the minimum size for screen size lg

Size1024px

Used by

bp-medium

$bp-medium: 768px !default;

Map structure

key Namekey Descriptionkey Typekey Value
$bp-medium

the minimum size for screen size md

Size768px

Used by

bp-small

$bp-small: 425px !default;

Map structure

key Namekey Descriptionkey Typekey Value
$bp-small

the minimum size for screen size sm

Size425px

Used by

bp-xsmall

$bp-xsmall: $bp-small - 1 !default;

Map structure

key Namekey Descriptionkey Typekey Value
$bp-xsmall

the maximum size for screen size smale eXtra

Size$bp-small - 1

Used by

col-qty

$col-qty: 12 !default;

Map structure

key Namekey Descriptionkey Typekey Value
$col-qty

how much columns the grid should be based of, 12 or 24 are a good match

Int12

Used by

col-basic-size

$col-basic-size: 100% / $col-qty !default;

Map structure

key Namekey Descriptionkey Typekey Value
$col-basic-size

basic size for one column element

Size100% / $col-qty