Need to specify a specific width for an element? You've come to the right place! These classes should be used sparingly, and only used after testing heavily at all screen widths (starting with mobile). That said, if you need to specify and min, max or normal width, they can be a useful tool in the utility belt.
Values are in pixels. Keep in mind that the min-width and max-width properties override the standard width property. If you aren't using the Atlas core folder as a base for your styles, these classes work best when you're setting box-sizing to be border-box in some way. Values represent pixel unless they are a string or otherwise specified.
| cssproperty | value | screensize |
|---|---|---|
width | auto, 100, 150, 200, 250, 300, 350, full (100%), fit-content | all screensizes, tablet, desktop |
width (available on tablet screens and larger) | 400, 450, 500, unset | tablet, desktop |
Set the width of an element.
Auto
100
150
200
250
300
350
The following are only applied above the tablet breakpoint
400
450
500
<div class="width-auto border padding-sm font-weight-semibold">
<p>Auto</p>
</div>
<div class="width-100 border padding-sm font-weight-semibold">
<p>100</p>
</div>
<div class="width-150 border padding-sm font-weight-semibold">
<p>150</p>
</div>
<div class="width-200 border padding-sm font-weight-semibold">
<p>200</p>
</div>
<div class="width-250 border padding-sm font-weight-semibold">
<p>250</p>
</div>
<div class="width-300 border padding-sm font-weight-semibold">
<p>300</p>
</div>
<div class="width-350 border padding-sm font-weight-semibold">
<p>350</p>
</div>
<div class="display-flex align-items-center padding-sm color-danger font-size-sm">
<div class="flex-grow-1 margin-right-xs border-color-danger border-top"></div>
<p>The following are only applied above the tablet breakpoint</p>
<div class="flex-grow-1 margin-left-xs border-color-danger border-top"></div>
</div>
<div class="width-400-tablet border padding-sm font-weight-semibold">
<p>400</p>
</div>
<div class="width-450-tablet border padding-sm font-weight-semibold">
<p>450</p>
</div>
<div class="width-500-tablet border padding-sm font-weight-semibold">
<p>500</p>
</div>Certain widths are too large for many mobile screens, so they are only available on larger screensizes. See the table above for information on which helpers can be applied universally.
250 ➡ 300 ➡ 400
<div class="width-250 width-300-tablet width-400-desktop border padding-sm">
<p>250 ➡ 300 ➡ 400</p>
</div>Another possible pattern may be that a container needs to be constrained on smaller screens but not on larger screens. In this case you can follow a mobile first approach, applying a universal width class to the element, and then undoing it on larger screens with width-unset-<screensize>.
A narrow container on small screens, then no fixed width
<div class="width-150 width-unset-tablet border padding-sm">
<p>A narrow container on small screens, then no fixed width</p>
</div>List of all available classes:
.width-full
.width-fit-content
.width-auto
.width-100
.width-150
.width-200
.width-250
.width-300
.width-350
.width-full-tablet
.width-auto-tablet
.width-100-tablet
.width-150-tablet
.width-200-tablet
.width-250-tablet
.width-300-tablet
.width-350-tablet
.width-400-tablet
.width-450-tablet
.width-500-tablet
.width-unset-tablet
.width-full-desktop
.width-auto-desktop
.width-100-desktop
.width-150-desktop
.width-200-desktop
.width-250-desktop
.width-300-desktop
.width-350-desktop
.width-400-desktop
.width-450-desktop
.width-500-desktop
.width-unset-desktop