The foundation of our CSS size utilities are sourced from SUIT CSS, including:
u-sizeFit - Make an element shrink wrap its content with flex-basis.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.
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 box-sizing: border-box.
For example, if you applied u-sizeThumbnail but needed to prevent any
padding on the element from reducing the size.
u-boxSizingContent - Changes the box-sizing to content-box.