Overview

The classes below are to set the dimensions of general html elements. In addition to the below options, most components have individual size options available (such as ds-button --large).

Format

The format of width and height utility classes is:

For pixels based:

--{number}-{w|h}

For other units:

--{number}-{w|h}-{unit}

Where:

• {number} is 1-100.
• {w|h} is either -w, -wmax, -wmin for widths, and -h, -hmax, -hmin for heights.
• {unit} is either not set (defaults to -px), -pc, -vw, -vh, -ch.

Units

Pixel based

The default size is based on a 10px ‘space’, where --20-w would result in a width of 200px (20 x 10px).

The available space increments are: 1-100

For example:

• --1-w — 10px width
• --7-h — 70px height
• --40-w — 400px width
• --95-h — 950px height

Percentage based

The following percentage based units are supported:

• pc — Percentage
• vw — Viewport width
• vh — Viewport height

The available percentage increments are: 1-100

For example:

• --1-w-pc — 1% width
• --7-h-vh — 7vh height
• --40-w-vw — 40vw width
• --95-h-vw — 95vw height

Character based

The following character based units are supported:

• ch — Character width

The available character length increments are: 1-100

For example:

• --1-w-ch — ~1 character width
• --7-h-ch — ~7 characters height
• --40-w-ch — ~40 characters width
• --95-h-ch — ~95 characters height

Widths — General

Set the widths, min-widths, or max-widths of the element.

-w width

Element widths will be the set width and are responsive.

-wmin min width

Elements will be as wide as the minimum width, expand to fit the content, and are responsive.

-wmax max width

Elements will be as narrow as it’s content up to the maximum width and are responsive.

Widths — Table columns

See also ds-datatable Column widths documentation.

-w width

Table column widths will be the set width, widths are not responsive, they will force the table to overflow if neccessary.

-wmin min width

Table column widths will be the minimum width or wider if space permits.

-wmax max width

Heights — General

Set the heights, min-heights, or max-heights of the element.

-h height

Element heights will be the set height and are responsive.

-hmin min height

Elements will be as high as the minimum height, expand to fit the content, and are responsive.

-hmax max height

Elements will be as short as it’s content up to the maximum height and are responsive.