Width
Declaring element width
Prerequisites
- Know the main principles for how we build layout in Mybring
- Understand the difference between block and inline layout in normal flow
- Know that block elements are 100 % width by default, while inline and flex elements automatically take up the width of their own content
Utilities
| Size | min-width | max-width | deprecatedmax-width | width | deprecatedwidth | > 62.5em | deprecated> 62.5em |
|---|---|---|---|---|---|---|---|
| 4rem | w4r | w3 | |||||
| 5rem | minw5r | w5r | |||||
| 6rem | minw6r | w6r | |||||
| 7rem | minw7r | ||||||
| 8rem | minw8r | maxw8r | mw4 | w8r | w4 | ||
| 9rem | minw9r | ||||||
| 10rem | minw10r | maxw10r | w10r | ||||
| 12rem | minw12r | maxw12r | w12r | ||||
| 16rem | maxw16r | mw5 | w16r | w5 | |||
| 20rem | maxw20r | ||||||
| 24rem | maxw24r | ||||||
| 32rem | maxw32r | mw6 | |||||
| 40rem | maxw40r | ||||||
| 44rem | maxw44r | ||||||
| 48rem | maxw48r | mw7 | |||||
| 64rem | maxw64r | mw8 | |||||
| 80rem | maxw80r | ||||||
| 96rem | maxw96r | ||||||
| 100vw | maxw100vw | ||||||
| max-content | maxwmaxc | ||||||
| auto | wauto | w-auto | wauto-l | w-auto-l | |||
| 100% | maxw100p | mw-100 | w100p | w-100 | w100p-l | w-100-l |
Measure
Really long lines are difficult to read. Readability is better when we avoid lines becoming longer than 80 characters. Add this class to an element to make long lines wrap nicely at a recommended maximum width.
<p>
<!-- useful to wrap long lines of text -->
</p>Percentages
All of these, except the 100 % classes, are not recommended for building any new layouts. We have moved away from the use of these as a way to achieve responsiveness.
| Size | max-width | deprecatedmax-width | width | deprecatedwidth | > 62.5em | deprecated> 62.5em |
|---|---|---|---|---|---|---|
| 5% | w5p | w-5 | w5p-l | w-5-l | ||
| 10% | w10p | w-10 | w10p-l | w-10-l | ||
| 15% | w15p | w-15 | w15p-l | w-15-l | ||
| 20% | w20p | w-20 | w20p-l | w-20-l | ||
| 25% | w25p | w-25 | w25p-l | w-25-l | ||
| 30% | w30p | w-30 | w30p-l | w-30-l | ||
| 33.3% | w33p | w-33 | w33p-l | w-33-l | ||
| 40% | w40p | w-40 | w40p-l | w-40-l | ||
| 50% | w50p | w-50 | w50p-l | w-50-l | ||
| 60% | w60p | w-60 | w60p-l | w-60-l | ||
| 66.7% | w66p | w-66 | w66p-l | w-66-l | ||
| 70% | w70p | w-70 | w70p-l | w-70-l | ||
| 75% | w75p | w-75 | w75p-l | |||
| 80% | w80p | w-80 | w80p-l | |||
| 85% | w85p | w-85 | w85p-l | |||
| 90% | w90p | w-90 | w90p-l | |||
| 100% | maxw100p | mw-100 | w100p | w-100 | w100p-l | w-100-l |