Edit

Width

Stacks provides atomic sizing classes for widths using pixel, rem, and percentage values. Most width classes are based on a 16px base font size and will scale based on the browser's font size.

Pixel width

Pixel width classes allow you to set the width of an element to a specific pixel value.

Pixel width classes

Class	Output	rem value
`.w0`	width: 0px;	0rem
`.w1`	width: 1px;	0.063rem
`.w2`	width: 2px;	0.125rem
`.w4`	width: 4px;	0.25rem
`.w6`	width: 6px;	0.375rem
`.w8`	width: 8px;	0.5rem
`.w12`	width: 12px;	0.75rem
`.w16`	width: 16px;	1rem
`.w24`	width: 24px;	1.5rem
`.w32`	width: 32px;	2rem
`.w48`	width: 48px;	3rem
`.w64`	width: 64px;	4rem
`.w96`	width: 96px;	6rem
`.w128`	width: 128px;	8rem

Pixel width examples

<div class="w0">…</div>
<div class="w1">…</div>
<div class="w2">…</div>
<div class="w4">…</div>
<div class="w6">…</div>
<div class="w8">…</div>
<div class="w12">…</div>
<div class="w16">…</div>
<div class="w24">…</div>
<div class="w32">…</div>
<div class="w48">…</div>
<div class="w64">…</div>
<div class="w96">…</div>
<div class="w128">…</div>

.w0

.w1

.w2

.w4

.w6

.w8

.w12

.w16

.w24

.w32

.w48

.w64

.w96

.w128

Sizing units width

Sizing units width classes allow you to set the width of an element according to a predefined set of 12 common values in used in Stacks.

Sizing units width classes

Class	Output	rem value
`.ws1`	width: 128px;	8rem
`.ws2`	width: 256px;	16rem
`.ws3`	width: 344px;	21.5rem
`.ws4`	width: 448px;	28rem
`.ws5`	width: 512px;	32rem
`.ws6`	width: 640px;	40rem
`.ws7`	width: 768px;	48rem
`.ws8`	width: 848px;	53rem
`.ws9`	width: 960px;	60rem
`.ws10`	width: 1024px;	64rem
`.ws11`	width: 1120px;	70rem
`.ws12`	width: 1280px;	80rem

Sizing units width examples

<div class="ws1">…</div>
<div class="ws2">…</div>
<div class="ws3">…</div>
<div class="ws4">…</div>
<div class="ws5">…</div>
<div class="ws6">…</div>
<div class="ws7">…</div>
<div class="ws8">…</div>
<div class="ws9">…</div>
<div class="ws10">…</div>
<div class="ws11">…</div>
<div class="ws12">…</div>

.ws1

.ws2

.ws3

.ws4

.ws5

.ws6

.ws7

.ws8

.ws9

.ws10

.ws11

.ws12

Fluid width

Fluid width classes allow you to set the width of an element to a percentage of the parent element’s width or to the full width of the viewport.

Fluid width classes

Class	Output	Responsive?
`.w10`	width: 10%;
`.w20`	width: 20%;
`.w25`	width: 25%;
`.w30`	width: 30%;
`.w33`	width: 33%;
`.w40`	width: 40%;
`.w50`	width: 50%;
`.w60`	width: 60%;
`.w66`	width: 66%;
`.w70`	width: 70%;
`.w75`	width: 75%;
`.w80`	width: 80%;
`.w90`	width: 90%;
`.w100`	width: 100%;
`.w-screen`	width: 100vw;
`.w-auto`	width: auto;

Fluid width examples

<div class="w10">…</div>
<div class="w20">…</div>
<div class="w25">…</div>
<div class="w30">…</div>
<div class="w33">…</div>
<div class="w40">…</div>
<div class="w50">…</div>
<div class="w60">…</div>
<div class="w66">…</div>
<div class="w70">…</div>
<div class="w75">…</div>
<div class="w80">…</div>
<div class="w90">…</div>
<div class="w100">…</div>

.w10

.w20

.w25

.w30

.w33

.w40

.w50

.w60

.w66

.w70

.w75

.w80

.w90

.w100

Min width

Min width classes allow you to set the minimum width of an element.

Min width classes

Class	Output	rem value
`.wmn0`	min-width: 0;
`.wmn1`	min-width: 128px;	8rem
`.wmn2`	min-width: 256px;	16rem
`.wmn3`	min-width: 344px;	21.5rem
`.wmn4`	min-width: 448px;	28rem
`.wmn5`	min-width: 512px;	32rem
`.wmn6`	min-width: 640px;	40rem
`.wmn7`	min-width: 768px;	48rem
`.wmn8`	min-width: 848px;	53rem
`.wmn9`	min-width: 960px;	60rem
`.wmn10`	min-width: 1024px;	64rem
`.wmn11`	min-width: 1120px;	70rem
`.wmn12`	min-width: 1280px;	80rem
`.wmn25`	min-width: 25%;
`.wmn50`	min-width: 50%;
`.wmn75`	min-width: 75%;
`.wmn100`	min-width: 100%;
`.wmn-screen`	min-width: 100vw;
`.wmn-initial`	min-width: initial;

Max width

Max width classes allow you to set the maximum width of an element.

Max width classes

Class	Output	rem value
`.wmx1`	max-width: 128px;	8rem
`.wmx2`	max-width: 256px;	16rem
`.wmx3`	max-width: 344px;	21.5rem
`.wmx4`	max-width: 448px;	28rem
`.wmx5`	max-width: 512px;	32rem
`.wmx6`	max-width: 640px;	40rem
`.wmx7`	max-width: 768px;	48rem
`.wmx8`	max-width: 848px;	53rem
`.wmx9`	max-width: 960px;	60rem
`.wmx10`	max-width: 1024px;	64rem
`.wmx11`	max-width: 1120px;	70rem
`.wmx12`	max-width: 1280px;	80rem
`.wmx25`	max-width: 25%;
`.wmx50`	max-width: 50%;
`.wmx75`	max-width: 75%;
`.wmx100`	max-width: 100%;
`.wmx-screen`	max-width: 100vw;
`.wmx-initial`	max-width: initial;