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.