## Object | Padding

### Padding All

`.padding--xs`
`.padding--sm`
`.padding--md`
`.padding--lg`
`.padding--xl`
HTML

    <div class="">

                <div class="demo__box padding--xs">
                    <code>.padding--xs</code>
                </div>

                <div class="demo__box padding--sm">
                    <code>.padding--sm</code>
                </div>

                <div class="demo__box padding--md">
                    <code>.padding--md</code>
                </div>

                <div class="demo__box padding--lg">
                    <code>.padding--lg</code>
                </div>

                <div class="demo__box padding--xl">
                    <code>.padding--xl</code>
                </div>

            </div>

### Padding Sides

`.padding--md_top`
`.padding--xl_top`
`.padding--md_right`
`.padding--xl_right`
`.padding--md_bottom`
`.padding--xl_bottom`
`.padding--md_left`
`.padding--xl_left`
HTML

    <div class="">

                <div class="demo__box padding--md_top">
                    <code>.padding--md_top</code>
                </div>
                <div class="demo__box padding--xl_top">
                    <code>.padding--xl_top</code>
                </div>

                <div class="demo__box padding--md_right">
                    <code>.padding--md_right</code>
                </div>
                <div class="demo__box padding--xl_right">
                    <code>.padding--xl_right</code>
                </div>

                <div class="demo__box padding--md_bottom">
                    <code>.padding--md_bottom</code>
                </div>
                <div class="demo__box padding--xl_bottom">
                    <code>.padding--xl_bottom</code>
                </div>

                <div class="demo__box padding--md_left">
                    <code>.padding--md_left</code>
                </div>
                <div class="demo__box padding--xl_left">
                    <code>.padding--xl_left</code>
                </div>

            </div>

### Padding Axes

`.padding--sm_vertical`
`.padding--md_vertical`
`.padding--xl_vertical`
`.padding--sm_horizontal`
`.padding--md_horizontal`
`.padding--xl_horizontal`
HTML

    <div class="">

                <div class="demo__box padding--sm_vertical">
                    <code>.padding--sm_vertical</code>
                </div>
                <div class="demo__box padding--md_vertical">
                    <code>.padding--md_vertical</code>
                </div>
                <div class="demo__box padding--xl_vertical">
                    <code>.padding--xl_vertical</code>
                </div>

                <div class="demo__box padding--sm_horizontal">
                    <code>.padding--sm_horizontal</code>
                </div>
                <div class="demo__box padding--md_horizontal">
                    <code>.padding--md_horizontal</code>
                </div>
                <div class="demo__box padding--xl_horizontal">
                    <code>.padding--xl_horizontal</code>
                </div>

            </div>

### Mixed Examples

`.padding--md`
`.padding--md_vertical`
`.padding--sm_horizontal`
`.padding--lg_left`
HTML

    <div class="demo__stack">
                <div class="demo__box padding--md">
                    <code>.padding--md</code>
                </div>
                <div class="demo__box padding--md_vertical">
                    <code>.padding--md_vertical</code>
                </div>
                <div class="demo__box padding--sm_horizontal">
                    <code>.padding--sm_horizontal</code>
                </div>
                <div class="demo__box padding--lg_left">
                    <code>.padding--lg_left</code>
                </div>
            </div>

### Numeric Padding (q: 1–1000)

#### All Sides

`.padding--1`
`.padding--4`
`.padding--8`
`.padding--12`
`.padding--16`
`.padding--24`
`.padding--32`
`.padding--48`
`.padding--64`
HTML

    <div class="">

                <div class="demo__box padding--1">
                    <code>.padding--1</code>
                </div>

                <div class="demo__box padding--4">
                    <code>.padding--4</code>
                </div>

                <div class="demo__box padding--8">
                    <code>.padding--8</code>
                </div>

                <div class="demo__box padding--12">
                    <code>.padding--12</code>
                </div>

                <div class="demo__box padding--16">
                    <code>.padding--16</code>
                </div>

                <div class="demo__box padding--24">
                    <code>.padding--24</code>
                </div>

                <div class="demo__box padding--32">
                    <code>.padding--32</code>
                </div>

                <div class="demo__box padding--48">
                    <code>.padding--48</code>
                </div>

                <div class="demo__box padding--64">
                    <code>.padding--64</code>
                </div>

            </div>

#### Sides

`.padding--24_top`
`.padding--48_top`
`.padding--24_right`
`.padding--48_right`
`.padding--24_bottom`
`.padding--48_bottom`
`.padding--24_left`
`.padding--48_left`
HTML

    <div class="">

                <div class="demo__box padding--24_top">
                    <code>.padding--24_top</code>
                </div>
                <div class="demo__box padding--48_top">
                    <code>.padding--48_top</code>
                </div>

                <div class="demo__box padding--24_right">
                    <code>.padding--24_right</code>
                </div>
                <div class="demo__box padding--48_right">
                    <code>.padding--48_right</code>
                </div>

                <div class="demo__box padding--24_bottom">
                    <code>.padding--24_bottom</code>
                </div>
                <div class="demo__box padding--48_bottom">
                    <code>.padding--48_bottom</code>
                </div>

                <div class="demo__box padding--24_left">
                    <code>.padding--24_left</code>
                </div>
                <div class="demo__box padding--48_left">
                    <code>.padding--48_left</code>
                </div>

            </div>

#### Axes

`.padding--12_vertical`
`.padding--32_vertical`
`.padding--64_vertical`
`.padding--12_horizontal`
`.padding--32_horizontal`
`.padding--64_horizontal`
HTML

    <div class="">

                <div class="demo__box padding--12_vertical">
                    <code>.padding--12_vertical</code>
                </div>
                <div class="demo__box padding--32_vertical">
                    <code>.padding--32_vertical</code>
                </div>
                <div class="demo__box padding--64_vertical">
                    <code>.padding--64_vertical</code>
                </div>

                <div class="demo__box padding--12_horizontal">
                    <code>.padding--12_horizontal</code>
                </div>
                <div class="demo__box padding--32_horizontal">
                    <code>.padding--32_horizontal</code>
                </div>
                <div class="demo__box padding--64_horizontal">
                    <code>.padding--64_horizontal</code>
                </div>

            </div>

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