Size

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.
  • u-sm-sizeAuto - Element's width is set to auto at the smallest Media Query breakpoint.