Helpers

Ada Lovelace

London, UK

Profile

add

more_horiz

Main Pages

more_horiz

UI Components

more_horiz

Extra Pages

more_horiz

Extra Stuff

Dashboard

Welcome To Alicorn Dashboard

1500 Sales

$0.99 Revenue

schedule

tasks

invoices

Animation

Class Name	Description
`.u-animate-fadeIn`	Dispaly element with fade in effect.
`.u-animate-fadeUp`	Dispaly element with fade in effect while moving up.
`.u-animate-fadeDown`	Dispaly element with fade in effect while moving down.
`.u-animate-scaleIn`	Dispaly element with zooming effect.

Border

Class Name	Description
`.u-border-all`	Set 1px border around element from all sides.
`.u-border-x`	Set 1px left and right borders of the element.
`.u-border-y`	Set 1px top and bottom borders of the element.
`.u-border-top`	Set 1px to the top of the element.
`.u-border-right`	Set 1px to the right of the element.
`.u-border-bottom`	Set 1px to the bottom of the element.
`.u-border-left`	Set 1px to the left of the element.
`.u-border-none`	Set border to 0.
`.u-radius-base`	Set border-radius to base border radius.
`.u-radius-mini`	Set border-radius to 2px.
`.u-radius-tiny`	Set border-radius to 3px.
`.u-radius-small`	Set border-radius to 4px.
`.u-radius-medium`	Set border-radius to 6px.
`.u-radius-rounded`	Set border-radius to 100em.
`.u-radius-circle`	Set border-radius to 50%.

Box Shadow

Class Name	Description
`.u-shadow-mini`	Set box shadow to a mini size.
`.u-shadow-tiny`	Set box shadow to a tiny size.
`.u-shadow-small`	Set box shadow to a small size.
`.u-shadow-medium`	Set box shadow to a medium size.
`.u-shadow-none`	Set box shadow to none.

Clear

Class Name	Description
`.u-clear-both`	Clear both.
`.u-clear-right`	Clear right.
`.u-clear-left`	Clear left.

Clearfix

Class Name	Description
`.u-clearfix`	Used with elements containing floats.

Collapse

Class Name	Description
`.u-collapse`	Remove top margin from the first child and bottom margin from the last one.
`.u-collapse--horizontal`	Remove left margin from the first child and right margin from the last one.

Color

Class Name	Description
`.u-color-light`	set element text color to light color variable.
`.u-color-pivotal`	set element text color to pivotal color variable.
`.u-color-major`	set element text color to major color variable.
`.u-color-minor`	set element text color to minor color variable.
`.u-color-omitted`	set element text color to omitted color variable.
`.u-color-muted`	set element text color to muted color variable.
`.u-color-primary`	set element text color to primary color variable.
`.u-color-secondary`	set element text color to secondary color variable.
`.u-color-accent`	set element text color to accent color variable.
`.u-color-error`	set element text color to error color variable.
`.u-color-warning`	set element text color to warning color variable.
`.u-color-success`	set element text color to success color variable.
`.u-color-info`	set element text color to info color variable.
`.u-bg-light`	set element background color to light color variable.
`.u-bg-pivotal`	set element background color to pivotal color variable.
`.u-bg-major`	set element background color to major color variable.
`.u-bg-minor`	set element background color to minor color variable.
`.u-bg-omitted`	set element background color to omitted color variable.
`.u-bg-muted`	set element background color to muted color variable.
`.u-bg-primary`	set element background color to primary color variable.
`.u-bg-secondary`	set element background color to secondary color variable.
`.u-bg-accent`	set element background color to accent color variable.
`.u-bg-error`	set element background color to error color variable.
`.u-bg-warning`	set element background color to warning color variable.
`.u-bg-success`	set element background color to success color variable.
`.u-bg-info`	set element background color to info color variable.
`.u-fill-light`	set SVG element fill to light color variable.
`.u-fill-pivotal`	set SVG element fill to pivotal color variable.
`.u-fill-major`	set SVG element fill to major color variable.
`.u-fill-minor`	set SVG element fill to minor color variable.
`.u-fill-omitted`	set SVG element fill to omitted color variable.
`.u-fill-muted`	set SVG element fill to muted color variable.
`.u-fill-primary`	set SVG element fill to primary color variable.
`.u-fill-secondary`	set SVG element fill to secondary color variable.
`.u-fill-accent`	set SVG element fill to accent color variable.
`.u-fill-error`	set SVG element fill to error color variable.
`.u-fill-warning`	set SVG element fill to warning color variable.
`.u-fill-success`	set SVG element fill to success color variable.
`.u-fill-info`	set SVG element fill to info color variable.
`.u-stroke-light`	set SVG element stroke color to light color variable.
`.u-stroke-pivotal`	set SVG element stroke color to pivotal color variable.
`.u-stroke-major`	set SVG element stroke color to major color variable.
`.u-stroke-minor`	set SVG element stroke color to minor color variable.
`.u-stroke-omitted`	set SVG element stroke color to omitted color variable.
`.u-stroke-muted`	set SVG element stroke color to muted color variable.
`.u-stroke-primary`	set SVG element stroke color to primary color variable.
`.u-stroke-secondary`	set SVG element stroke color to secondary color variable.
`.u-stroke-accent`	set SVG element stroke color to accent color variable.
`.u-stroke-error`	set SVG element stroke color to error color variable.
`.u-stroke-warning`	set SVG element stroke color to warning color variable.
`.u-stroke-success`	set SVG element stroke color to success color variable.
`.u-stroke-info`	set SVG element stroke color to info color variable.
`.u-border-light`	set element border color to light color variable.
`.u-border-pivotal`	set element border color to pivotal color variable.
`.u-border-major`	set element border color to major color variable.
`.u-border-minor`	set element border color to minor color variable.
`.u-border-omitted`	set element border color to omitted color variable.
`.u-border-muted`	set element border color to muted color variable.
`.u-border-primary`	set element border color to primary color variable.
`.u-border-secondary`	set element border color to secondary color variable.
`.u-border-accent`	set element border color to accent color variable.
`.u-border-error`	set element border color to error color variable.
`.u-border-warning`	set element border color to warning color variable.
`.u-border-success`	set element border color to success color variable.
`.u-border-info`	set element border color to info color variable.

Display

Class Name	Description
`.u-block`	Set element display to block.
`.u-inlineBlock`	Set element display to inline-block.
`.u-inline`	Set element display to inline.
`.u-table`	Set element display to table.
`.u-tableCell`	Set element display to table-cell.
`.u-tableRow`	Set element display to table-row.
`.u-hide`	Set element display to none.
`.u-visible`	Set element visibility to visible.
`.u-invisible`	Set element visibility to hidden.

Flex Align Content

Class Name	Description
`.u-flexContentStart`	Set element flex-content property to flex-strat.
`.u-flexContentEnd`	Set element flex-content property to flex-end.
`.u-flexContentCenter`	Set element flex-content property to center.
`.u-flexContentStretch`	Set element flex-content property to stretch.
`.u-flexContentBetween`	Set element flex-content property to space-between.
`.u-flexContentAround`	Set element flex-content property to space-arround.

Flex Align Items

Class Name	Description
`.u-flexItemsStart`	Set element aling-items property to flex-start.
`.u-flexItemsEnd`	Set element aling-items property to flex-end.
`.u-flexItemsCenter`	Set element aling-items property to center.
`.u-flexItemsStretch`	Set element aling-items property to stretch.
`.u-flexItemsBaseline`	Set element aling-items property to baseline.

Flex Align Self

Class Name	Description
`.u-flexSelfStart`	Set element align-self property to flex-start.
`.u-flexSelfEnd`	Set element align-self property to flex-end.
`.u-flexSelfCenter`	Set element align-self property to center.
`.u-flexSelfStretch`	Set element align-self property to stretch.
`.u-flexSelfBaseline`	Set element align-self property to baseline.
`.u-flexSelfAuto`	Set element align-self property to auto.

Flex Direction

Class Name	Description
`.u-flexRow`	Set flex-direction property to row.
`.u-flexRowReverse`	Set flex-direction property to rowreverse.
`.u-flexColumn`	Set flex-direction property to column.
`.u-flexColumnReverse`	Set flex-direction property to column-reverse.

Flex Grow

Class Name	Description
`.u-flexGrow-1`	Set element flex-grow property to 1.
`.u-flexGrow-2`	Set element flex-grow property to 2.
`.u-flexGrow-3`	Set element flex-grow property to 3.
`.u-flexGrow-4`	Set element flex-grow property to 4.
`.u-flexGrow-5`	Set element flex-grow property to 5.
`.u-flexGrow-6`	Set element flex-grow property to 6.
`.u-flexGrow-7`	Set element flex-grow property to 7.
`.u-flexGrow-8`	Set element flex-grow property to 8.
`.u-flexGrow-9`	Set element flex-grow property to 9.
`.u-flexGrow-10`	Set element flex-grow property to 10.
`.u-flexGrow-11`	Set element flex-grow property to 11.

Flex Justify Content

Class Name	Description
`.u-flexJustifyStart`	Set element justify-content property to flex-start.
`.u-flexJustifyEnd`	Set element justify-content property to flex-end.
`.u-flexJustifyCenter`	Set element justify-content property to center.
`.u-flexJustifyBetween`	Set element justify-content property to space-between.
`.u-flexJustifyAround`	Set element justify-content property to space-around.

Flex Order

Class Name	Description
`.u-flexOrderFirst`	Set element order property to -1.
`.u-flexOrderLast`	Set element order property to 1.
`.u-flexOrderNone`	Set element order property to 0.

Flex Wrap

Class Name	Description
`.u-flexWrap`	Set element flex-wrap property to wrap.
`.u-flexNoWrap`	Set element flex-wrap property to nowrap.
`.u-flexWrapReverse`	Set element flex-wrap property to wrap-reverse.

Flex

Class Name	Description
`.u-flex`	Set element display property to flex.
`.u-flexInline`	Set element display property to inline-flex.

Float

Class Name	Description
`.u-float-right`	Set element float property to right.
`.u-float-left`	Set element float property to left.
`.u-float-none`	Set element float property to none.

Font Family

Class Name	Description
`.u-font-default`	Set element font-family property to $font-default.
`.u-font-editorial`	Set element font-family property to $font-editorial.
`.u-font-mono`	Set element font-family property to $font-mono.
`.u-font-system`	Set element font-family property to $font-system.

Class Name	Description
`.u-font-divine`	Set element font-size property to divine size unit.
`.u-font-gigantic`	Set element font-size property to gigantic size unit.
`.u-font-massive`	Set element font-size property to massive size unit.
`.u-font-huge`	Set element font-size property to huge size unit.
`.u-font-big`	Set element font-size property to big size unit.
`.u-font-large`	Set element font-size property to large size unit.
`.u-font-medium`	Set element font-size property to medium size unit.
`.u-font-small`	Set element font-size property to small size unit.
`.u-font-tiny`	Set element font-size property to tiny size unit.
`.u-font-mini`	Set element font-size property to mini size unit.

Font Style

Class Name	Description
`.u-font-normal`	Set element font-style property to normal.
`.u-font-italic`	Set element font-style property to italic.

Font Weight

Class Name	Description
`.u-font-thin`	Set element font-weight property to 100.
`.u-font-extraLight`	Set element font-weight property to 200.
`.u-font-light`	Set element font-weight property to 300.
`.u-font-regular`	Set element font-weight property to 400.
`.u-font-thick`	Set element font-weight property to 500.
`.u-font-semiBold`	Set element font-weight property to 600.
`.u-font-bold`	Set element font-weight property to 700.
`.u-font-extraBold`	Set element font-weight property to 800.
`.u-font-black`	Set element font-weight property to 900.

Interaction

Class Name	Description
`.u-cursor-default`	Set element cursor property to default.
`.u-cursor-disabled`	Set element cursor property to not-allowed.
`.u-cursor-pointer`	Set element cursor property to pointer.
`.u-pointerEvents-auto`	Set element pointer-events property to auto.
`.u-pointerEvents-none`	Set element pointer-events property to none.
`.u-unhighlightable`	Prevent WebKit tap highlights.
`.u-unselectable`	prevent user selection.
`.u-undragable`	prevent user drag.
`.u-disabled`	Set element opacity to 0.5 and pointer-events to none.

Letter Spacing

Class Name	Description
`.u-ls-compact`	Set element letter-spacing property to -1px.
`.u-ls-normal`	Set element letter-spacing property to 0.
`.u-ls-loose`	Set element letter-spacing property to 2px.

Line Height

Class Name	Description
`.u-lh-tight`	Set element line-height property to 0.5em.
`.u-lh-normal`	Set element line-height property to 1em.
`.u-lh-loose`	Set element line-height property to 2em.

List

Class Name	Description
`.u-list-bare`	remove list styles.

Margin

Class Name	Description
`.u-m-auto`	Set element margin property to auto.
`.u-m-mini`	Set element margin property to mini size unit.
`.u-m-tiny`	Set element margin property to tiny size unit.
`.u-m-small`	Set element margin property to small size unit.
`.u-m-medium`	Set element margin property to medium size unit.
`.u-m-large`	Set element margin property to large size unit.
`.u-m-big`	Set element margin property to big size unit.
`.u-m-huge`	Set element margin property to huge size unit.
`.u-m-massive`	Set element margin property to massive size unit.
`.u-m-gigantic`	Set element margin property to gigantic size unit.
`.u-m-divine`	Set element margin property to divine size unit.
`.u-m-none`	Set element margin property to 0.
`.u-mx-auto`	Set element margin-right and margin-left properties to auto.
`.u-mx-mini`	Set element margin-right and margin-left properties to mini size unit.
`.u-mx-tiny`	Set element margin-right and margin-left properties to tiny size unit.
`.u-mx-small`	Set element margin-right and margin-left properties to small size unit.
`.u-mx-medium`	Set element margin-right and margin-left properties to medium size unit.
`.u-mx-large`	Set element margin-right and margin-left properties to large size unit.
`.u-mx-big`	Set element margin-right and margin-left properties to big size unit.
`.u-mx-huge`	Set element margin-right and margin-left properties to huge size unit.
`.u-mx-massive`	Set element margin-right and margin-left properties to massive size unit.
`.u-mx-gigantic`	Set element margin-right and margin-left properties to gigantic size unit.
`.u-mx-divine`	Set element margin-right and margin-left properties to divine size unit.
`.u-mx-none`	Set element margin-right and margin-left properties to 0.
`.u-my-auto`	Set element margin-top and margin-bottom properties to auto.
`.u-my-mini`	Set element margin-top and margin-bottom properties to mini size unit.
`.u-my-tiny`	Set element margin-top and margin-bottom properties to tiny size unit.
`.u-my-small`	Set element margin-top and margin-bottom properties to small size unit.
`.u-my-medium`	Set element margin-top and margin-bottom properties to medium size unit.
`.u-my-large`	Set element margin-top and margin-bottom properties to large size unit.
`.u-my-big`	Set element margin-top and margin-bottom properties to big size unit.
`.u-my-huge`	Set element margin-top and margin-bottom properties to huge size unit.
`.u-my-massive`	Set element margin-top and margin-bottom properties to massive size unit.
`.u-my-gigantic`	Set element margin-top and margin-bottom properties to gigantic size unit.
`.u-my-divine`	Set element margin-top and margin-bottom properties to divine size unit.
`.u-my-none`	Set element margin-top and margin-bottom properties to 0.
`.u-mt-auto`	Set element margin-top property to auto.
`.u-mt-mini`	Set element margin-top property to mini size unit.
`.u-mt-tiny`	Set element margin-top property to tiny size unit.
`.u-mt-small`	Set element margin-top property to small size unit.
`.u-mt-medium`	Set element margin-top property to medium size unit.
`.u-mt-large`	Set element margin-top property to large size unit.
`.u-mt-big`	Set element margin-top property to big size unit.
`.u-mt-huge`	Set element margin-top property to huge size unit.
`.u-mt-massive`	Set element margin-top property to massive size unit.
`.u-mt-gigantic`	Set element margin-top property to gigantic size unit.
`.u-mt-divine`	Set element margin-top property to divine size unit.
`.u-mt-none`	Set element margin-top property to 0.
`.u-mr-auto`	Set element margin-right property to auto.
`.u-mr-mini`	Set element margin-right property to mini size unit.
`.u-mr-tiny`	Set element margin-right property to tiny size unit.
`.u-mr-small`	Set element margin-right property to small size unit.
`.u-mr-medium`	Set element margin-right property to medium size unit.
`.u-mr-large`	Set element margin-right property to large size unit.
`.u-mr-big`	Set element margin-right property to big size unit.
`.u-mr-huge`	Set element margin-right property to huge size unit.
`.u-mr-massive`	Set element margin-right property to massive size unit.
`.u-mr-gigantic`	Set element margin-right property to gigantic size unit.
`.u-mr-divine`	Set element margin-right property to divine size unit.
`.u-mr-none`	Set element margin-right property to 0.
`.u-mb-auto`	Set element margin-bottom property to auto.
`.u-mb-mini`	Set element margin-bottom property to mini size unit.
`.u-mb-tiny`	Set element margin-bottom property to tiny size unit.
`.u-mb-small`	Set element margin-bottom property to small size unit.
`.u-mb-medium`	Set element margin-bottom property to medium size unit.
`.u-mb-large`	Set element margin-bottom property to large size unit.
`.u-mb-big`	Set element margin-bottom property to big size unit.
`.u-mb-huge`	Set element margin-bottom property to huge size unit.
`.u-mb-massive`	Set element margin-bottom property to massive size unit.
`.u-mb-gigantic`	Set element margin-bottom property to gigantic size unit.
`.u-mb-divine`	Set element margin-bottom property to divine size unit.
`.u-mb-none`	Set element margin-bottom property to 0.
`.u-ml-auto`	Set element margin-left property to auto.
`.u-ml-mini`	Set element margin-left property to mini size unit.
`.u-ml-tiny`	Set element margin-left property to tiny size unit.
`.u-ml-small`	Set element margin-left property to small size unit.
`.u-ml-medium`	Set element margin-left property to medium size unit.
`.u-ml-large`	Set element margin-left property to large size unit.
`.u-ml-big`	Set element margin-left property to big size unit.
`.u-ml-huge`	Set element margin-left property to huge size unit.
`.u-ml-massive`	Set element margin-left property to massive size unit.
`.u-ml-gigantic`	Set element margin-left property to gigantic size unit.
`.u-ml-divine`	Set element margin-left property to divine size unit.
`.u-ml-none`	Set element margin-left property to 0.

Offset

Class Name	Description
`.u-offset-1\/12`	Set element margin-left property to 1/12.
`.u-offset-2\/12`	Set element margin-left property to 2/12.
`.u-offset-3\/12`	Set element margin-left property to 3/12.
`.u-offset-4\/12`	Set element margin-left property to 4/12.
`.u-offset-5\/12`	Set element margin-left property to 5/12.
`.u-offset-6\/12`	Set element margin-left property to 6/12.
`.u-offset-7\/12`	Set element margin-left property to 7/12.
`.u-offset-8\/12`	Set element margin-left property to 8/12.
`.u-offset-9\/12`	Set element margin-left property to 9/12.
`.u-offset-10\/12`	Set element margin-left property to 10/12.
`.u-offset-11\/12`	Set element margin-left property to 11/12.

Opacity

Class Name	Description
`.u-opacity-0`	Set element opacity property to 0.
`.u-opacity-10p`	Set element opacity property to 10%.
`.u-opacity-20p`	Set element opacity property to 20%.
`.u-opacity-30p`	Set element opacity property to 30%.
`.u-opacity-40p`	Set element opacity property to 40%.
`.u-opacity-50p`	Set element opacity property to 50%.
`.u-opacity-60p`	Set element opacity property to 60%.
`.u-opacity-70p`	Set element opacity property to 70%.
`.u-opacity-80p`	Set element opacity property to 80%.
`.u-opacity-90p`	Set element opacity property to 90%.
`.u-opacity-100p`	Set element opacity property to 100%.

Overflow

Class Name	Description
`.u-overflow-visible`	Set element overlow property to visible.
`.u-overflow-hidden`	Set element overlow property to hidden.
`.u-overflow-scroll`	Set element overlow property to scroll.
`.u-overflow-auto`	Set element overlow property to auto.

Padding

Class Name	Description
`.u-p-mini`	Set element padding property to mini size unit.
`.u-p-tiny`	Set element padding property to tiny size unit.
`.u-p-small`	Set element padding property to small size unit.
`.u-p-medium`	Set element padding property to medium size unit.
`.u-p-large`	Set element padding property to large size unit.
`.u-p-big`	Set element padding property to big size unit.
`.u-p-huge`	Set element padding property to huge size unit.
`.u-p-massive`	Set element padding property to massive size unit.
`.u-p-gigantic`	Set element padding property to gigantic size unit.
`.u-p-divine`	Set element padding property to divine size unit.
`.u-p-none`	Set element padding property to 0.
`.u-px-mini`	Set element padding-right and padding-left properties to mini size unit.
`.u-px-tiny`	Set element padding-right and padding-left properties to tiny size unit.
`.u-px-small`	Set element padding-right and padding-left properties to small size unit.
`.u-px-medium`	Set element padding-right and padding-left properties to medium size unit.
`.u-px-large`	Set element padding-right and padding-left properties to large size unit.
`.u-px-big`	Set element padding-right and padding-left properties to big size unit.
`.u-px-huge`	Set element padding-right and padding-left properties to huge size unit.
`.u-px-massive`	Set element padding-right and padding-left properties to massive size unit.
`.u-px-gigantic`	Set element padding-right and padding-left properties to gigantic size unit.
`.u-px-divine`	Set element padding-right and padding-left properties to divine size unit.
`.u-px-none`	Set element padding-right and padding-left properties to 0.
`.u-py-mini`	Set element padding-top and padding-bottom properties to mini size unit.
`.u-py-tiny`	Set element padding-top and padding-bottom properties to tiny size unit.
`.u-py-small`	Set element padding-top and padding-bottom properties to small size unit.
`.u-py-medium`	Set element padding-top and padding-bottom properties to medium size unit.
`.u-py-large`	Set element padding-top and padding-bottom properties to large size unit.
`.u-py-big`	Set element padding-top and padding-bottom properties to big size unit.
`.u-py-huge`	Set element padding-top and padding-bottom properties to huge size unit.
`.u-py-massive`	Set element padding-top and padding-bottom properties to massive size unit.
`.u-py-gigantic`	Set element padding-top and padding-bottom properties to gigantic size unit.
`.u-py-divine`	Set element padding-top and padding-bottom properties to divine size unit.
`.u-py-none`	Set element padding-top and padding-bottom properties to 0.
`.u-pt-mini`	Set element padding-top property to mini size unit.
`.u-pt-tiny`	Set element padding-top property to tiny size unit.
`.u-pt-small`	Set element padding-top property to small size unit.
`.u-pt-medium`	Set element padding-top property to medium size unit.
`.u-pt-large`	Set element padding-top property to large size unit.
`.u-pt-big`	Set element padding-top property to big size unit.
`.u-pt-huge`	Set element padding-top property to huge size unit.
`.u-pt-massive`	Set element padding-top property to massive size unit.
`.u-pt-gigantic`	Set element padding-top property to gigantic size unit.
`.u-pt-divine`	Set element padding-top property to divine size unit.
`.u-pt-none`	Set element padding-top property to 0.
`.u-pr-mini`	Set element padding-right property to mini size unit.
`.u-pr-tiny`	Set element padding-right property to tiny size unit.
`.u-pr-small`	Set element padding-right property to small size unit.
`.u-pr-medium`	Set element padding-right property to medium size unit.
`.u-pr-large`	Set element padding-right property to large size unit.
`.u-pr-big`	Set element padding-right property to big size unit.
`.u-pr-huge`	Set element padding-right property to huge size unit.
`.u-pr-massive`	Set element padding-right property to massive size unit.
`.u-pr-gigantic`	Set element padding-right property to gigantic size unit.
`.u-pr-divine`	Set element padding-right property to divine size unit.
`.u-pr-none`	Set element padding-right property to 0.
`.u-pb-mini`	Set element padding-bottom property to mini size unit.
`.u-pb-tiny`	Set element padding-bottom property to tiny size unit.
`.u-pb-small`	Set element padding-bottom property to small size unit.
`.u-pb-medium`	Set element padding-bottom property to medium size unit.
`.u-pb-large`	Set element padding-bottom property to large size unit.
`.u-pb-big`	Set element padding-bottom property to big size unit.
`.u-pb-huge`	Set element padding-bottom property to huge size unit.
`.u-pb-massive`	Set element padding-bottom property to massive size unit.
`.u-pb-gigantic`	Set element padding-bottom property to gigantic size unit.
`.u-pb-divine`	Set element padding-bottom property to divine size unit.
`.u-pb-none`	Set element padding-bottom property to 0.
`.u-pl-mini`	Set element padding-left property to mini size unit.
`.u-pl-tiny`	Set element padding-left property to tiny size unit.
`.u-pl-small`	Set element padding-left property to small size unit.
`.u-pl-medium`	Set element padding-left property to medium size unit.
`.u-pl-large`	Set element padding-left property to large size unit.
`.u-pl-big`	Set element padding-left property to big size unit.
`.u-pl-huge`	Set element padding-left property to huge size unit.
`.u-pl-massive`	Set element padding-left property to massive size unit.
`.u-pl-gigantic`	Set element padding-left property to gigantic size unit.
`.u-pl-divine`	Set element padding-left property to divine size unit.
`.u-pl-none`	Set element padding-left property to 0.

Position

Class Name	Description
`.u-static`	Set element position property to static.
`.u-relative`	Set element position property to relative.
`.u-absolute`	Set element position property to absolute.
`.u-fixed`	Set element position property to fixed.
`.u-sticky`	Set element position property to sticky.

Screen Reader

Class Name	Description
`.u-sr-only`	Make content available only to screen readers.

Sides

Class Name	Description
`.u-t-none`	Set element top property to 0.
`.u-t-auto`	Set element top property to auto.
`.u-t-50p`	Set element top property to 50%.
`.u-t-100p`	Set element top property to 100%.
`.u-r-none`	Set element right property to 0.
`.u-r-auto`	Set element right property to auto.
`.u-r-50p`	Set element right property to 50%.
`.u-r-100p`	Set element right property to 100%.
`.u-b-none`	Set element bottom property to 0.
`.u-b-auto`	Set element bottom property to auto.
`.u-b-50p`	Set element bottom property to 50%.
`.u-b-100p`	Set element bottom property to 100%.
`.u-l-none`	Set element left property to 0.
`.u-l-auto`	Set element left property to auto.
`.u-l-50p`	Set element left property to 50%.
`.u-l-100p`	Set element left property to 100%.
`.u-tr-none`	Set element top and right properties to 0.
`.u-tr-auto`	Set element top and right properties to auto.
`.u-tr-50p`	Set element top and right properties to 50%.
`.u-tr-100p`	Set element top and right properties to 100%.
`.u-tl-none`	Set element top and left properties to 0.
`.u-tl-auto`	Set element top and left properties to auto.
`.u-tl-50p`	Set element top and left properties to 50%.
`.u-tl-100p`	Set element top and left properties to 100%.
`.u-br-none`	Set element bottom and right properties to 0.
`.u-br-auto`	Set element bottom and right properties to auto.
`.u-br-50p`	Set element bottom and right properties to 50%.
`.u-br-100p`	Set element bottom and right properties to 100%.
`.u-bl-none`	Set element bottom and left properties to 0.
`.u-bl-auto`	Set element bottom and left properties to auto.
`.u-bl-50p`	Set element bottom and left properties to 50%.
`.u-bl-100p`	Set element bottom and left properties to 100%.

Size

Class Name	Description
`.u-1\/12`	Set element width property to 1/12.
`.u-2\/12`	Set element width property to 2/12.
`.u-3\/12`	Set element width property to 3/12.
`.u-4\/12`	Set element width property to 4/12.
`.u-5\/12`	Set element width property to 5/12.
`.u-6\/12`	Set element width property to 6/12.
`.u-7\/12`	Set element width property to 7/12.
`.u-8\/12`	Set element width property to 8/12.
`.u-9\/12`	Set element width property to 9/12.
`.u-10\/12`	Set element width property to 10/12.
`.u-11\/12`	Set element width property to 11/12.
`.u-width-auto`	Set element width property to auto.
`.u-width-100p`	Set element width property to 100%.
`.u-height-auto`	Set element height property to auto.
`.u-height-50p`	Set element height property to 50%.
`.u-height-100p`	Set element height property to 100%.

Text Align

Class Name	Description
`.u-text-left`	Set element text-align property to left.
`.u-text-right`	Set element text-align property to right.
`.u-text-center`	Set element text-align property to center.
`.u-text-justify`	Set element text-align property to justify.

Text Decoration

Class Name	Description
`.u-text-underline`	Set element text-decoration property to underline.
`.u-text-overline`	Set element text-decoration property to overline.
`.u-text-lineThrough`	Set element text-decoration property to line-through.
`.u-text-blink`	Set element text-decoration property to blink.
`.u-text-bare`	Set element text-decoration property to none.

Text Hide

Class Name	Description
`.u-text-hide`	Hide text visually.

Text Transform

Class Name	Description
`.u-text-capitalize`	Set element text-transform property to capitalize.
`.u-text-lowercase`	Set element text-transform property to lowercase.
`.u-text-uppercase`	Set element text-transform property to uppercase.
`.u-text-noTransform`	Set element text-transform property to none.

Truncate

Class Name	Description
`.u-text-truncate`	Truncate text with ellipses.

Vertical Align

Class Name	Description
`.u-align-baseline`	Set element vertical-align property to baseline.
`.u-align-sub`	Set element vertical-align property to sub.
`.u-align-super`	Set element vertical-align property to super.
`.u-align-textTop`	Set element vertical-align property to text-top.
`.u-align-textBottom`	Set element vertical-align property to text-bottom.
`.u-align-middle`	Set element vertical-align property to middle.
`.u-align-top`	Set element vertical-align property to top.
`.u-align-bottom`	Set element vertical-align property to bottom.

White Space

Class Name	Description
`.u-ws-normal`	Set element white-space property to normal.
`.u-ws-nowrap`	Set element white-space property to nowrap.
`.u-ws-pre`	Set element white-space property to pre.
`.u-ws-preWrap`	Set element white-space property to pre-wrap.
`.u-ws-preLine`	Set element white-space property to pre-line.

Z Index

Class Name	Description
`.u-over-content`	Set element z-index property to 100.
`.u-over-control`	Set element z-index property to 200.
`.u-over-page`	Set element z-index property to 200.
`.u-over-screen`	Set element z-index property to 400.
`.u-over-all`	Set element z-index property to 500.

Messages

Notifications

Settings

Ada Lovelace

Main Pages

UI Components

Extra Pages

Extra Stuff

Dashboard

Animation

Border

Box Shadow

Clear

Clearfix

Collapse

Color

Display

Flex Align Content

Flex Align Items

Flex Align Self

Flex Direction

Flex Grow

Flex Justify Content

Flex Order

Flex Wrap

Flex

Float

Font Family

Font Size

Font Style

Font Weight

Interaction

Letter Spacing

Line Height

List

Margin

Offset

Opacity

Overflow

Padding

Position

Screen Reader

Sides

Size

Text Align

Text Decoration

Text Hide

Text Transform

Truncate

Vertical Align

White Space

Z Index

Chat Room

Stuff

Customers

Notifications

General

System