Variables

The default variables that come with lab-ui

Sass

Alerts

Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.

Sass

Variables

Breadcrumb

Indicate the current page's location within a navigational hierarchy.

Sass

Variables

Example

Html

The card component is more to define card layout and common issues rather than colors / styles, i.e. keeping all cards the same height and making it so parts of the card expand while others are set. All of the vertical / height elements of the card component will not work on legacy and will fall back to the height being the size of the content within.

Sass

Variables

Modernizr

Example

Modern

Hello
elementum facilisis leo vel fringilla est ullamcorper
Bottom
Hello
vestibulum lectus
Bottom

Legacy

Hello
tristique senectus et netus et malesuada fames
Bottom
Hello
diam donec
Bottom

Html

Form

Sass

Variables

Text input

Example

Demo

Html

Text input with icon

Example

Demo

Html

Search box

Example

Demo

Html

Dropdown box

Example

Lorem ipsum dolor sit, amet consectetur adipisicing elit.

Html

Form groups

Example

Title

Demo

Html

Example

Html

Grid

The legacy grid uses inline-block as a fallback meaning all grid containers must not have any whitespace between them as inline-block will respect it and the widths won't correctly add together.

Sass

Variables

Modernizr

Layout

Example

Modern

Legacy

Html

Dives

Example

Modern

Legacy

Html

Gutters

Example

Modern

Legacy

Html

Gutters horizontal

Example

Modern

Legacy

Html

Gutters vertical

Example

Modern

Legacy

Html

Alignment

Example

Modern

Legacy

Html

Icons

Icon hover/active/focus states are purposefully omitted due to no easy way to make them consistent across legacy/modern icon workflows and colors/hovers come from file names and json in legacy workflow.

Sass

Variables

Icon

Example

Html

Icon pad

Example

Html

Modals

Apply the .active class to make the modal appear on screen.

Sass

Variables

Standard modal

Example

Html

Javascript disabled

Example

Html

Paging

Sass

Variables

Pager

Example

Html

Progress bar

Sass

Variables

Example

Html

Radio / Checkbox

Sass

Variables

Radio buttons

Example

Demo

Html

Checkbox

Example

Demo

Html

Spinner

A default spinner for a project, it will be visible when any of its ancestors have a .loading class applied to them. It is advised to add the .loading class to the html tag and remove it when the loading process has finished. It's actually the .spinner--load class that gets targeted, this allows you to add more spinners i.e. .spinner--buffer and target that when a different class is added to an ancestor.

Sass

Modernizr

Example

Modern

Legacy

Html

Switch

Sass

Variables

Standard switch

Example

asdf

Html

Typography

Sass

Variables

Example

Demo

Html

Utilities

Sass

Variables

Background

Example

Html

Color

Example

Demo

Html

Cursor

Example

Html

Border

Example

Html

Display

Example

Block

Inline-Block

Inline

Flex Item

Flex Container

Hide on tablet

Hide on mobile

Set display of children

Html

Flex

Example

Justify Content

Item 1

Item 2

Item 1

Item 2

Item 1

Item 2

Item 1

Item 2

Item 1

Item 2

Item 1

Item 2

Align Items

Flex-Start

Flex-End

Center

Baseline

Stretch

Align Self

Auto

Start

Center

End

Stretch

Flex Direction

Row Item 1

Row Item 2

Reversed Row Item 1

Reversed Row Item 2

Column 1

Column 2

Reversed Column 1

Reversed Column 2

Flex Wrap

Wrapped Item 1

Wrapped Item 2

Wrapped Item 3

Wrapped Item 4

Wrapped Item 5

Wrapped Item 6

Wrapped Item 7

Wrapped Item 8

Wrapped Item 9

Wrapped Item 10

Wrapped Item 11

Wrapped Item 12

Wrapped Item 13

Wrapped Item 14

Wrapped Item 15

Wrapped Item 16

Wrapped Item 1

Wrapped Item 2

Wrapped Item 3

Wrapped Item 4

Wrapped Item 5

Wrapped Item 6

Wrapped Item 7

Wrapped Item 8

Wrapped Item 9

Wrapped Item 10

Wrapped Item 11

Wrapped Item 12

Wrapped Item 13

Wrapped Item 14

Wrapped Item 15

Wrapped Item 16

Unwrapped Item 1

Unwrapped Item 2

Unwrapped Item 3

Unwrapped Item 4

Unwrapped Item 5

Unwrapped Item 6

Unwrapped Item 7

Unwrapped Item 8

Unwrapped Item 9

Unwrapped Item 10

Unwrapped Item 11

Unwrapped Item 12

Unwrapped Item 13

Unwrapped Item 14

Unwrapped Item 15

Unwrapped Item 16

Flex-None

Flex-Auto

Flex-Initial

Flex Grow

Flex Grow - 1

Flex Grow - 11

Flex Grow - 2

Flex Grow - 10

Flex Grow - 3

Flex Grow - 9

Flex Grow - 4

Flex Grow - 8

Flex Grow - 5

Flex Grow - 7

Flex Grow - 6

Flex Grow - 7

Flex Grow - 5

Flex Grow - 8

Flex Grow - 4

Flex Grow - 9

Flex Grow - 3

Flex Grow - 10

Flex Grow - 2

Flex Grow - 11

Flex Grow - 1

Flex Grow - 12

Flex Shrink (scale window for demo)

Flex Order

7

1

12

5

3

10

2

6

8

11

4

9

Html

Font Style

Example

Not italic

Italic

Html

Font Weight

Example

Demo

Html

Height

Example

Auto

h-100

Html

Horizontal Alignment

Example

Left

Center

Right

Right on mobile

Html

Letter Spacing

Example

Lorem ipsum dolor, sit amet consectetur
adipisicing elit. Ratione, laborum.

Html

Line Height

Example

Lorem ipsum dolor, sit amet consectetur
adipisicing elit. Ratione, laborum.

Html

List

Example

list-none
list-none
list-none

list-disc
list-disc
list-disc

list-decimal
list-decimal
list-decimal

list-inside
list-inside
list-inside

list-outside
list-outside
list-outside

Html

Margin

Example

Html

Outline

Example

Html

Padding

Example

Html

Pointer Events

Example

Html

Positioning

Example

Static on Mobile

Relative

Absolute

Sticky Element

Sibling Element

left-0

left-0.5

left

left-1.5

left-2

left-2.5

left-3

left-3.5

left-4

left-4.5

left-5

left-5.5

left-6

right-0

right-0.5

right

right-1.5

right-2

right-2.5

right-3

right-3.5

right-4

right-4.5

right-5

right-5.5

right-6

top-0

top-0.5

top

top-1.5

top-2

top-2.5

top-3

top-3.5

top-4

top-4.5

top-5

top-5.5

top-6

bottom-0

bottom-0.5

bottom

bottom-1.5

bottom-2

bottom-2.5

bottom-3

bottom-3.5

bottom-4

bottom-4.5

bottom-5

bottom-5.5

bottom-6

inset-0

inset-0.5

inset

inset-1.5

inset-2

inset-2.5

inset-3

inset-3.5

inset-4

inset-4.5

inset-5

inset-5.5

inset-6

z-0

z-4

z-2

z-6

-z-1

z-3

z-1

z-5

transform-center

transform-center-y

transform-center-x

Html

Select

Example

Lorem ipsum dolor sit, amet consectetur adipisicing elit.

Html

Table

Example

Table 1 (Border Collapse and Table Layout Auto)

Header 1

Header 2

Header 3

Cell 1

Cell 2

Cell 3

Table 2 (Border Separate and Table Layout Fixed)

Header 1

Header 2

Header 3

Cell 1

Cell 2

Cell 3

Html

Text Decoration

Example

underline

line-through

no-underline

Html

Text Transform

Example

uppercase

LOWERCASE

capitalize

normal-case

Html

Vertical Alignment

Example

align-top

align-top
align-top
align-top

align-middle

align-middle
align-middle
align-middle

align-bottom

align-bottom
align-bottom
align-bottom

align-baseline

align-baseline
align-baseline
align-baseline

align-text-top

align-text-top
align-text-top
align-text-top

align-text-bottom

align-text-bottom
align-text-bottom
align-text-bottom

mobile:align-top

mobile:align-top
mobile:align-top
mobile:align-top

Html

Visibility

Example

Visible

Invisible

Opaque

Html

White Space

Example

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sint esse molestias ipsa officiis neque facilis modi iste cupiditate. Harum, vitae nesciunt at placeat adipisci ex animi, error dignissimos ab itaque fugiat ipsum. Culpa, porro ipsam. Ea totam, perspiciatis fugiat minima sunt excepturi, suscipit hic, ex maiores veritatis eaque pariatur corrupti!

Html

Width

Example

Auto

w-100

Html

Watertight

Include this component to apply fishawack custom styling to watertight. There is also a bootstrap version of styling that can be applied, see individual product for details.

Sass

Sass

Variables

Example

Html

Example

Html

Example

Html

Example

Html

Sass

Variables

Example

Html

Sass

Variables

Example

Html

Example

Html

Example

Html

Sass

Variables

Modernizr

Example

Modern

Hello

Hello

Legacy

Hello

Hello

Html

Sass

Variables

Example

Html

Example

Html

Example

Html

Example

Html

Example

Html

Example

Html

Sass

Variables

Modernizr

Example

Modern

Legacy

Html

Example

Modern

Legacy

Html

Example

Modern

Legacy

Html

Example

Modern

Legacy

Html

Example

Modern

Legacy

Html

Example

Modern

Legacy

Html

Sass

Variables

Example

Html

Example