Skip to main content

Max Widths

Version: 2.0.0
Edit

Utilities for setting an element's maximum width.

Percentages

Author: Mary Ditchen
Since: 2.0.0
Source: /source/patterns/utilities/max-widths.scss#L11

0% Max Width
10% Max Width
20% Max Width
25% Max Width
30% Max Width
33% Max Width
40% Max Width
50% Max Width
60% Max Width
67% Max Width
70% Max Width
75% Max Width
80% Max Width
90% Max Width
100% Max Width
<!-- max width 0 -->
<div class="u-max-width-0">0% Max Width</div>
<!-- max width 10 -->
<div class="u-max-width-10">10% Max Width</div>
<!-- max width 20 -->
<div class="u-max-width-20">20% Max Width</div>
<!-- max width 25 -->
<div class="u-max-width-25">25% Max Width</div>
<!-- max width 30 -->
<div class="u-max-width-30">30% Max Width</div>
<!-- max width 33 -->
<div class="u-max-width-33">33% Max Width</div>
<!-- max width 40 -->
<div class="u-max-width-40">40% Max Width</div>
<!-- max width 50 -->
<div class="u-max-width-50">50% Max Width</div>
<!-- max width 60 -->
<div class="u-max-width-60">60% Max Width</div>
<!-- max width 67 -->
<div class="u-max-width-67">67% Max Width</div>
<!-- max width 70 -->
<div class="u-max-width-70">70% Max Width</div>
<!-- max width 75 -->
<div class="u-max-width-75">75% Max Width</div>
<!-- max width 80 -->
<div class="u-max-width-80">80% Max Width</div>
<!-- max width 90 -->
<div class="u-max-width-90">90% Max Width</div>
<!-- max width 100 -->
<div class="u-max-width-100">100% Max Width</div>

Integers

Author: Mary Ditchen
Since: 2.0.0
Source: /source/patterns/utilities/max-widths.scss#L121

1200px Max Width
<!-- max width 1200 -->
<div class="u-max-width-1200">1200px Max Width</div>

None

Author: Mary Ditchen
Since: 2.0.0
Source: /source/patterns/utilities/max-widths.scss#L133

No Max Width
<!-- max width none -->
<div class="u-max-width-none">No Max Width</div>

Keywords

Author: Mary Ditchen
Since: 2.0.0
Source: /source/patterns/utilities/max-widths.scss#L145

Fit Content Max Width
Max Content Max Width
Min Content Max Width
<!-- max width fit content -->
<div class="u-max-width-fit-content">Fit Content Max Width</div>
<!-- max width max content -->
<div class="u-max-width-max-content">Max Content Max Width</div>
<!-- max width min content -->
<div class="u-max-width-min-content">Min Content Max Width</div>

Globals

Author: Mary Ditchen
Since: 2.0.0
Source: /source/patterns/utilities/max-widths.scss#L171

Inherit Max Width
Initial Max Width
Unset Max Width
<!-- max width inherit -->
<div class="u-max-width-inherit">Inherit Max Width</div>
<!-- max width initial -->
<div class="u-max-width-initial">Initial Max Width</div>
<!-- max width unset -->
<div class="u-max-width-unset">Unset Max Width</div>