Sections
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
Section titled Pixel widthPixel width classes allow you to set the width of an element to a specific pixel value.
Pixel width classes
Section titled Pixel width classes| Class | Computed value | rem value | Responsive? |
|---|---|---|---|
.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
Section titled 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
Section titled Sizing units widthSizing 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
Section titled Sizing units width classes| Class | Computed value | rem value | Responsive? |
|---|---|---|---|
.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
Section titled 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
Section titled Fluid widthFluid 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
Section titled Fluid width classes| Class | Value | 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
Section titled 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
Section titled Min widthMin width classes allow you to set the minimum width of an element.
Min width classes
Section titled Min width classes| Class | Computed value | rem value | Responsive? |
|---|---|---|---|
.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: 100vh; | - | |
.wmn-initial |
min-width: initial; | - |
Max width
Section titled Max widthMax width classes allow you to set the maximum width of an element.
Max width classes
Section titled Max width classes| Class | Computed value | rem value | Responsive? |
|---|---|---|---|
.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: 100vh; | - | |
.wmx-initial |
max-width: initial; | - |
