#Width

Classes to set the width of an element.

Class	Styles
`w-0`	`width: 0;`
`w-px`	`width: 1px;`
`w-auto`	`width: auto;`
`w-screen`	`width: 100vh;`
`w-10p`	`width: 10%;`
`w-20p`	`width: 20%;`
`w-30p`	`width: 30%;`
`w-40p`	`width: 40%;`
`w-50p`	`width: 50%;`
`w-60p`	`width: 60%;`
`w-70p`	`width: 70%;`
`w-80p`	`width: 80%;`
`w-90p`	`width: 90%;`
`w-100p`	`width: 100%;`
`w-1`	`width: 0.5rem`
`w-2`	`width: 1rem`
`w-3`	`width: 1.5rem`
`w-4`	`width: 2rem`
`w-5`	`width: 2.5rem`
`w-6`	`width: 3rem`
`w-8`	`width: 4rem`
`w-10`	`width: 5rem`
`w-12`	`width: 6rem`
`w-16`	`width: 8rem`
`w-20`	`width: 10rem`
`w-24`	`width: 12rem`
`w-32`	`width: 16rem`
`w-48`	`width: 24rem`
`w-64`	`width: 32rem`

#Scaled Widths

Updated

0.7.2

The w-{{value}} classes gives an element a percentage based width.

w-20p

w-40p

w-60p

w-80p

<div>
    <div class="w-20p">...</div>
    <div class="w-40p">...</div>
    <div class="w-60p">...</div>
    <div class="w-80p">...</div>
</div>

#Absolute Widths

New

0.7.1

The w-{{value}} classes gives an element an absolute width.

w-8

w-16

w-24

w-32

<div>
    <div class="w-8">...</div>
    <div class="w-16">...</div>
    <div class="w-24">...</div>
    <div class="w-32">...</div>
</div>

#Screen Width

The w-screen class makes an element span the entire viewport.

w-screen

<div>
    <div class="w-screen">...</div>
</div>

#Auto

The w-auto class makes an element use a browser determined width. This is commonly used to unset a previously set width.

w-auto

<div>
    <div class="w-auto">...</div>
</div>

#Responsive

New

0.7.0

All utility classes mentioned here support viewport based application. All you need to do is add a -<viewport> at the end of the class(es) you are using. For example, use w-50p-md to apply w-50p on medium screens and above.

<div class="w-50p-md">
    <!-- ... -->
</div>

For more information, visit the Viewports documentation.

Cirrus