The foundation of our CSS size utilities are sourced from SUIT CSS, including:
u-sizeFit - Make an element shrink wrap its content with
u-sizeFull - Make an element the width of its parent.
u-sizeFill - Make an element fill the remaining space. Distribute space evenly on multiple elements.
u-sizeFillAlt - An alternative method to make an element fill the remaining space. Distribute space based on element width.
u-sizeXofY (numerous) - Specify the proportional width of an object.
u-sizeAuto - Sets the width of an element to
auto (usually used to overwrite other width declarations).
X must be an integer less than
Y can be any of the following numbers: 2, 3, 4, 5, 6, 8, 10, 12.
You can also limit sizing to specific breakpoints:
u-sm-sizeXofY - To use at the smallest Media Query breakpoint.
u-md-sizeXofY - To use at the medium Media Query breakpoint.
u-lg-sizeXofY - To use at the largest Media Query breakpoint.
We've also added classes to reset element sizes at certain breakpoints:
u-sm-sizeAuto - Element's width is set to auto at the smallest Media Query breakpoint.
u-md-sizeAuto - Element's width is set to auto at the medium Media Query breakpoint.
u-lg-sizeAuto - Element's width is set to auto at the larg Media Query breakpoint.
We've added some special size utilties as well:
u-sizeThumbnail - Roughly matches the size of the Thumbnail component.
Sometimes you need to override the site default
For example, if you applied
u-sizeThumbnail but needed to prevent any
padding on the element from reducing the size.
u-boxSizingContent - Changes the