SUIT CSS:
sizing utility
tests
.u-sizeFit / .u-sizeFill
shrink-wraps (on left) / fills remaining space
content
.u-[size]-sizeFit
overrides u-sizeFit correctly
should sizeFit at sm-viewport
should sizeFit at md-viewport
should sizeFit at lg-viewport
.u-sizeFill
distributes space evenly
Lorem ipsum dolor sit amet, probo option similique vix te, ei summo aliquip nec. Atqui diceret ceteros.
content
content
Lorem ipsum dolor sit amet, probo option similique vix te, ei summo aliquip nec. Atqui diceret ceteros.
content
content
.u-sizeFillAlt
distributes space based on initial width of item
Lorem ipsum dolor sit amet, probo option similique vix te, ei summo aliquip nec. Atqui diceret ceteros. Lorem ipsum dolor sit amet.
content
content
Lorem ipsum dolor sit amet, probo option similique vix te, ei summo aliquip nec. Atqui diceret ceteros.
content
content
.u-sizeFull
fits the full-width of the container
content
.u-sizeXof2
sizes to 1/2 of the parent container
1of2 width
1of2 flex-basis
.u-sizeXof3
sizes to 1/3 of the parent container
1of3 width
2of3 width
1of3 flex-basis
2of3 flex-basis
.u-sizeXof4
sizes to 1/4 of the parent container
1of4 width
2of4 width
3of4 width
1of4 flex-basis
2of4 flex-basis
3of4 flex-basis
.u-sizeXof6
sizes to 1/6 of the parent container
1of6 width
2of6 width
3of6 width
4of6 width
5of6 width
1of6 flex-basis
2of6 flex-basis
3of6 flex-basis
4of6 flex-basis
5of6 flex-basis
.u-sizeXof8
sizes to 1/8 of the parent container
1of8 width
2of8 width
3of8 width
4of8 width
5of8 width
6of8 width
7of8 width
1of8 flex-basis
2of8 flex-basis
3of8 flex-basis
4of8 flex-basis
5of8 flex-basis
6of8 flex-basis
7of8 flex-basis
.u-sizeXof10
sizes to 1/10 of the parent container
1of10 width
2of10 width
3of10 width
4of10 width
5of10 width
6of10 width
7of10 width
8of10 width
9of10 width
1of10 flex-basis
2of10 flex-basis
3of10 flex-basis
4of10 flex-basis
5of10 flex-basis
6of10 flex-basis
7of10 flex-basis
8of10 flex-basis
9of10 flex-basis
.u-sizeXof12
sizes to 1/2 of the parent container
1of12
2of12
3of12
4of12
5of12
6of12
7of12
8of12
9of12
10of12
11of12
1of12 flex-basis
2of12 flex-basis
3of12 flex-basis
4of12 flex-basis
5of12 flex-basis
6of12 flex-basis
7of12 flex-basis
8of12 flex-basis
9of12 flex-basis
10of12 flex-basis
11of12 flex-basis
.u-sm-sizeXof12 .u-md-sizeXof12 .u-lg-sizeXof12
adapts the width at different viewport sizes
12of12 -> 9of12 -> 6of12 -> 3of12 - width
12of12 -> 9of12 -> 6of12 -> 3of12 - flex-basis