WebUI mobile-first CSS

Width Classes

Relative Widths

Relative widths are relative to the root font size only, and absolute in relation to other sized elements. For example, if a textbox should be a fixed width within a parent form element the following classes will set a width regardless of the parent form width.

Class	Size
width-auto	The calculated border area
width-inherit	Inherited
width-xxs	0.625rem
width-xxs-xs	0.938rem
width-xs	1.25rem
width-xs-sm	1.875rem
width-sm	2.5rem
width-sm-md	3.75rem
width-md	5rem
width-md-lg	7.5rem
width-lg	10rem
width-lg-xl	15rem
width-xl	20rem
width-xl-xxl	30rem
width-xxl	40rem

Proportional Widths

Proportional widths are relative to the parent element, so will change size depending on the width of the parent element. For example, if a textbox should always be 75% of the width of its parent element then the class width-three-quarters would do that.

Class	Size
width-one-quarter	25%
width-one-third	33.33333333%
width-one-half	50%
width-two-thirds	66.66666666%
width-three-quarters	75%
width-full	100%
width-viewport-one-quarter	25vw
width-viewport-one-third	33.33333333vw
width-viewport-one-half	50vw
width-viewport-two-thirds	66.66666666vw
width-viewport-three-quarters	75vw
width-viewport	100vw
width-min-content	min-content
width-max-content	max-content
width-fit-content	content
min-width-auto	Not less than calculated border area
min-width-inherit	Not less than the inherited width
min-width-one-quarter	25%
min-width-one-third	33.33333333%
min-width-one-half	50%
min-width-two-thirds	66.66666666%
min-width-three-quarters	75%
min-width-full	100%
min-width-viewport-one-quarter	25vw
min-width-viewport-one-third	33.33333333vw
min-width-viewport-one-half	50vw
min-width-viewport-two-thirds	66.66666666vw
min-width-viewport-three-quarters	75vw
min-width-viewport	100vw
min-width-min-content	Not less than the min-content width
min-width-max-content	Not less than the max-content width
min-width-fit-content	Not less than the available space and not more than max-width
max-width-auto	Not greater than calculated border area
max-width-inherit	Not greater than the inherited width
max-width-one-quarter	25%
max-width-one-third	33.33333333%
max-width-one-half	50%
max-width-two-thirds	66.66666666%
max-width-three-quarters	75%
max-width-full	100%
max-width-viewport-one-quarter	25vw
max-width-viewport-one-third	33.33333333vw
max-width-viewport-one-half	50vw
max-width-viewport-two-thirds	66.66666666vw
max-width-viewport-three-quarters	75vw
max-width-viewport	100vw
max-width-min-content	Not greater than min-content width
max-width-max-content	Not greater than max-content width
max-width-fit-content	Not greater than the available space and not more than max-width

Form Control Widths

Control width classes with sizes.

Class	Size
width-control-xs	1.5rem
width-control-sm	1.75rem
width-control-md	2.125rem
width-control-lg	2.375rem
width-control-xl	2.75rem

Width Sizing Classes

Sizing classes are designed to compliment the sizes of other WebUI utility classes such as spacing, margins, and those used for positioning. Changing them may degrade the framework utility.

Height Classes

Relative Heights

Relative heights are relative to the root font size only, and absolute in relation to other sized elements. For example, if a panel should be a fixed height within a parent element the following classes will set a height regardless of the parent element width.

Class	Size
height-auto	The calculated border area
height-inherit	Inherited
height-xxs	0.625rem
height-xxs-xs	0.938rem
height-xs	1.25rem
height-xs-sm	1.875rem
height-sm	2.5rem
height-sm-md	3.75rem
height-md	5rem
height-md-lg	7.5rem
height-lg	10rem
height-lg-xl	15rem
height-xl	20rem
height-xl-xxl	30rem
height-xxl	40rem

Proportional Heights

Proportional heights are relative to the parent element, so will change size depending on the height of the parent element. For example, if a panel should always be 75% of the height of its parent element then the class height-three-quarters would do that.

Class	Size
height-one-quarter	25%
height-one-third	33.33333333%
height-one-half	50%
height-two-thirds	66.66666666%
height-three-quarters	75%
height-full	100%
height-viewport-one-quarter	25vw
height-viewport-one-third	33.33333333vw
height-viewport-one-half	50vw
height-viewport-two-thirds	66.66666666vw
height-viewport-three-quarters	75vw
height-viewport	100vw
height-min-content	min-content
height-max-content	max-content
height-fit-content	content
min-height-auto	Not less than calculated border area
min-height-inherit	Not less than the inherited height
min-height-one-quarter	25%
min-height-one-third	33.33333333%
min-height-one-half	50%
min-height-two-thirds	66.66666666%
min-height-three-quarters	75%
min-height-full	100%
min-height-viewport-one-quarter	25vw
min-height-viewport-one-third	33.33333333vw
min-height-viewport-one-half	50vw
min-height-viewport-two-thirds	66.66666666vw
min-height-viewport-three-quarters	75vw
min-height-viewport	100vw
min-height-min-content	Not less than the min-content height
min-height-max-content	Not less than the max-content height
min-height-fit-content	Not less than the available space and not more than max-height
max-height-auto	Not greater than calculated border area
max-height-inherit	Not greater than the inherited height
max-height-one-quarter	25%
max-height-one-third	33.33333333%
max-height-one-half	50%
max-height-two-thirds	66.66666666%
max-height-three-quarters	75%
max-height-full	100%
max-height-viewport-one-quarter	25vw
max-height-viewport-one-third	33.33333333vw
max-height-viewport-one-half	50vw
max-height-viewport-two-thirds	66.66666666vw
max-height-viewport-three-quarters	75vw
max-height-viewport	100vw
max-height-min-content	Not greater than min-content height
max-height-max-content	Not greater than max-content height
max-height-fit-content	Not greater than the available space and not more than max-height

Form Control Heights

Control height classes with sizes.

Class	Size
height-control-xs	1.5rem
height-control-sm	1.75rem
height-control-md	2.125rem
height-control-lg	2.375rem
height-control-xl	2.75rem

Height Sizing Classes

Sizing classes are designed to compliment the sizes of other WebUI utility classes such as spacing, margins, and those used for positioning. Changing them may degrade the framework utility.

Aspect Ratios

WebUI now supports the latest CSS aspect-ratio and provides a set of classes for the most common sizes. If you are not targeting the very latest browsers, then see the link below for a more compatible solution using containers.

For more information on controlling aspect ratios see media containers in the Containers section.

Aspect Ratios

For aspect ratio to work, a size must be specified on at least one side of an element.

Aspect Ratio

Aspect ratio classes available.

Class	Aspect Ratio
aspect-ratio-21x9	The aspect ratio is 21 by 9
aspect-ratio-16x9	The aspect ratio is 16 by 9
aspect-ratio-4x3	The aspect ratio is 4 by 3
aspect-ratio-3x2	The aspect ratio is 3 by 2
aspect-ratio-2x1	The aspect ratio is 2 by 1
aspect-ratio-1x2	The aspect ratio is 1 by 2
aspect-ratio-2x3	The aspect ratio is 2 by 3
aspect-ratio-3x4	The aspect ratio is 3 by 4
aspect-ratio-9x16	The aspect ratio is 9 by 16
aspect-ratio-9x21	The aspect ratio is 9 by 21
aspect-ratio-1x1	The width is equal to the height.
aspect-ratio-auto	The aspect ratio is determined by the size of the element.