Percentage Widths

Width utilities based on percentage values.

Common Percentages

100% width
75% width
50% width
25% width
HTML 
<div class="ss-c-w--100 ss-c-bg--fill_02 ss-c-p--02 ss-c-mb--02">100% width</div>
        <div class="ss-c-w--75 ss-c-bg--fill_02 ss-c-p--02 ss-c-mb--02">75% width</div>
        <div class="ss-c-w--50 ss-c-bg--fill_02 ss-c-p--02 ss-c-mb--02">50% width</div>
        <div class="ss-c-w--25 ss-c-bg--fill_02 ss-c-p--02 ss-c-mb--02">25% width</div>

Auto Width

Auto width (fits content)
HTML 
<div class="ss-c-w--auto ss-c-bg--fill_02 ss-c-p--02 ss-c-d--inline-block">
            Auto width (fits content)
        </div>

Viewport Widths

Width utilities based on viewport dimensions.

Viewport Width Units

100vw - Full viewport width
50vw - Half viewport width
HTML 
<div class="ss-c-w--100vw ss-c-bg--fill_02 ss-c-p--02 ss-c-mb--02">
            100vw - Full viewport width
        </div>
        <div class="ss-c-w--50vw ss-c-bg--fill_02 ss-c-p--02 ss-c-mb--02">
            50vw - Half viewport width
        </div>

Fixed Widths

Width utilities with fixed pixel values.

Pixel Widths

64px
128px
256px
512px
HTML 
<div class="ss-c-w--64 ss-c-bg--fill_02 ss-c-p--02 ss-c-mb--02">64px</div>
        <div class="ss-c-w--128 ss-c-bg--fill_02 ss-c-p--02 ss-c-mb--02">128px</div>
        <div class="ss-c-w--256 ss-c-bg--fill_02 ss-c-p--02 ss-c-mb--02">256px</div>
        <div class="ss-c-w--512 ss-c-bg--fill_02 ss-c-p--02 ss-c-mb--02">512px</div>

Min/Max Widths

Constrain element widths with minimum and maximum values.

Maximum Width

Max width small (320px)
Max width medium (640px)
Max width large (960px)
Max width full (100%)
HTML 
<div class="ss-c-max-w--sm ss-c-bg--fill_02 ss-c-p--02 ss-c-mb--02">
            Max width small (320px)
        </div>
        <div class="ss-c-max-w--md ss-c-bg--fill_02 ss-c-p--02 ss-c-mb--02">
            Max width medium (640px)
        </div>
        <div class="ss-c-max-w--lg ss-c-bg--fill_02 ss-c-p--02 ss-c-mb--02">
            Max width large (960px)
        </div>
        <div class="ss-c-max-w--full ss-c-bg--fill_02 ss-c-p--02 ss-c-mb--02">
            Max width full (100%)
        </div>

Minimum Width

Min 100px
Min 200px
HTML 
<div class="ss-c-d--inline-block ss-c-min-w--100 ss-c-bg--fill_02 ss-c-p--02 ss-c-mb--02">
            Min 100px
        </div>
        <div class="ss-c-d--inline-block ss-c-min-w--200 ss-c-bg--fill_02 ss-c-p--02 ss-c-mb--02">
            Min 200px
        </div>

Fit Content

Width that fits the content with constraints.

Fit Content Width

Width fits content
Minimum content width
Maximum content width
HTML 
<div class="ss-c-w--fit ss-c-bg--fill_02 ss-c-p--02 ss-c-mb--02">Width fits content</div>
        <div class="ss-c-w--min ss-c-bg--fill_02 ss-c-p--02 ss-c-mb--02">
            Minimum content width
        </div>
        <div class="ss-c-w--max ss-c-bg--fill_02 ss-c-p--02 ss-c-mb--02">
            Maximum content width
        </div>