### Percentage Widths

Width utilities based on percentage values.

#### Common Percentages

100% width
75% width
50% width
25% width
HTML

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

#### Auto Width

Auto width (fits content)
HTML

    <div class="w--auto bg--fill_02 p--02 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="w--100vw bg--fill_02 p--02 mb--02">
                100vw - Full viewport width
            </div>
            <div class="w--50vw bg--fill_02 p--02 mb--02">
                50vw - Half viewport width
            </div>

### Fixed Widths

Width utilities with fixed pixel values.

#### Pixel Widths

64px
128px
256px
512px
HTML

    <div class="w--64 bg--fill_02 p--02 mb--02">64px</div>
            <div class="w--128 bg--fill_02 p--02 mb--02">128px</div>
            <div class="w--256 bg--fill_02 p--02 mb--02">256px</div>
            <div class="w--512 bg--fill_02 p--02 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="max-w--sm bg--fill_02 p--02 mb--02">
                Max width small (320px)
            </div>
            <div class="max-w--md bg--fill_02 p--02 mb--02">
                Max width medium (640px)
            </div>
            <div class="max-w--lg bg--fill_02 p--02 mb--02">
                Max width large (960px)
            </div>
            <div class="max-w--full bg--fill_02 p--02 mb--02">
                Max width full (100%)
            </div>

#### Minimum Width

Min 100px
Min 200px
HTML

    <div class="d--inline-block min-w--100 bg--fill_02 p--02 mb--02">
                Min 100px
            </div>
            <div class="d--inline-block min-w--200 bg--fill_02 p--02 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="w--fit bg--fill_02 p--02 mb--02">Width fits content</div>
            <div class="w--min bg--fill_02 p--02 mb--02">
                Minimum content width
            </div>
            <div class="w--max bg--fill_02 p--02 mb--02">
                Maximum content width
            </div>

- Latest update: Stylescape v0.1 now live!
- New components released today.
- 💡 Tip: Use mixins for modular SCSS!