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