Sections
Borders
Stacks provides atomic classes for borders.
Classes
Section titled Classes| Class | Output | Apply border to | Responsive? |
|---|---|---|---|
.ba |
border: solid 1px #000 | all sides | |
.bt |
border-top: solid 1px #000 | top | |
.bb |
border-bottom: solid 1px #000 | bottom | |
.bl |
border-left: solid 1px #000 | left | |
.br |
border-right: solid 1px #000 | right | |
.by |
border-top: solid 1px #000; border-bottom: solid 1px #000; | top and bottom | |
.bx |
border-left: solid 1px #000; border-right: solid 1px #000; | left and right |
Examples
Section titled Examples<div class="ba">…</div>
<div class="bt">…</div>
<div class="br">…</div>
<div class="bb">…</div>
<div class="bl">…</div>
<div class="bx">…</div>
<div class="by">…</div>all sides
top
bottom
left
right
top and bottom
left and right
Width
Section titled WidthWidth classes
Section titled Width classes| Class | Output | Border width, side(s) | Responsive? |
|---|---|---|---|
.baw0 |
border-width: 0 | zero, all sides | |
.btw0 |
border-top-width: 0 | zero, top | |
.bbw0 |
border-bottom-width: 0 | zero, bottom | |
.blw0 |
border-left-width: 0 | zero, left | |
.brw0 |
border-right-width: 0 | zero, right | |
.byw0 |
border-top-width: 0; border-bottom-width: 0; | zero, top and bottom | |
.bxw0 |
border-left-width: 0; border-right-width: 0; | zero, left and right | |
.baw1 |
border-width: 1px | 1px, all | |
.btw1 |
border-top-width: 1px | 1px, top | |
.bbw1 |
border-bottom-width: 1px | 1px, bottom | |
.blw1 |
border-left-width: 1px | 1px, left | |
.brw1 |
border-right-width: 1px | 1px, right | |
.byw1 |
border-top-width: 1px; border-bottom-width: 1px; | 1px, top and bottom | |
.bxw1 |
border-left-width: 1px; border-right-width: 1px; | 1px, left and right | |
.baw2 |
border-width: 2px | 2px, all | |
.btw2 |
border-top-width: 2px | 2px, top | |
.bbw2 |
border-bottom-width: 2px | 2px, bottom | |
.blw2 |
border-left-width: 2px | 2px, left | |
.brw2 |
border-right-width: 2px | 2px, right | |
.byw2 |
border-top-width: 2px; border-bottom-width: 2px; | 2px, top and bottom | |
.bxw2 |
border-left-width: 2px; border-right-width: 2px; | 2px, left and right | |
.baw3 |
border-width: 4px | 4px, all | |
.btw3 |
border-top-width: 4px | 4px, top | |
.bbw3 |
border-bottom-width: 4px | 4px, bottom | |
.blw3 |
border-left-width: 4px | 4px, left | |
.brw3 |
border-right-width: 4px | 4px, right | |
.byw3 |
border-top-width: 4px; border-bottom-width: 4px; | 4px, top and bottom | |
.bxw3 |
border-left-width: 4px; border-right-width: 4px; | 4px, left and right |
Width examples
Section titled Width examples<div class="ba">…</div>
<div class="ba brw0">…</div>
<div class="ba bbw0">…</div>
<div class="ba baw2">…</div>
<div class="ba baw3">…</div>
.ba
.ba.brw0
.ba.bbw0
.ba.baw2
.ba.baw3
Style
Section titled StyleStyle classes
Section titled Style classes| Class | Output | Definition |
|---|---|---|
.bas-solid |
border-style: solid | Applies a solid border style to all sides |
.bts-solid |
border-top-style: solid | Applies a solid border style to the top side |
.brs-solid |
border-right-style: solid | Applies a solid border style to the right side |
.bbs-solid |
border-bottom-style: solid | Applies a solid border style to the bottom side |
.bls-solid |
border-left-style: solid | Applies a solid border style to the left side |
.bas-dashed |
border-style: dashed | Applies a dashed border style to all sides |
.bts-dashed |
border-top-style: dashed | Applies a dashed border style to the top side |
.brs-dashed |
border-right-style: dashed | Applies a dashed border style to the right side |
.bbs-dashed |
border-bottom-style: dashed | Applies a dashed border style to the bottom side |
.bls-dashed |
border-left-style: dashed | Applies a dashed border style to the left side |
Style examples
Section titled Style examples<div class="ba bas-solid">…</div>
<div class="ba bas-dashed">…</div>
<div class="ba brs-dashed">…</div>Solid border style
Dashed border style
Dashed border right style
Color
Section titled ColorColor classes
Section titled Color classesEach color stop is available as a border class. See the colors documentation for all available classes.
Color classes (legacy)
Section titled Color classes (legacy)Each legacy color stop is available as a border class. See the colors (legacy) documentation for all available classes.
