PaperCSS

the less formal CSS framework

^

Borders & Shadows

Borders

Default Border
Border-2
Border-3
Border-4
Border-5
Border-6

Code:

<div class="row flex-spaces">
  <div class="sm-3 col border border-primary">Default Border</div>
  <div class="sm-3 col border border-2 border-primary">Border-2</div>
  <div class="sm-3 col border border-3 border-primary">Border-3</div>
</div>
<div class="row flex-spaces">
  <div class="sm-3 col border border-4 border-primary">Border-4</div>
  <div class="sm-3 col border border-5 border-primary">Border-5</div>
  <div class="sm-3 col border border-6 border-primary">Border-6</div>
</div>

Border Colors

Border primary
Border secondary
Border success
Border warning
Border danger
Border white

Code:

<div class="row child-borders">
  <div class="sm-2 col border border-primary">Border primary</div>
  <div class="sm-2 col border border-secondary">Border secondary</div>
  <div class="sm-2 col border border-success">Border success</div>
  <div class="sm-2 col border border-warning">Border warning</div>
  <div class="sm-2 col border border-danger">Border danger</div>
  <div class="sm-2 col border background-primary border-white">Border white</div>
</div>
<div class="row child-borders">
  <div class="sm-2 col border border-primary">Border primary</div>
  <div class="sm-2 col border border-secondary">Border secondary</div>
  <div class="sm-2 col border border-success">Border success</div>
  <div class="sm-2 col border border-warning">Border warning</div>
  <div class="sm-2 col border border-danger">Border danger</div>
  <div class="sm-2 col border background-primary border-white">Border white</div>
</div>

Child Borders

Use this if you want all children to have a border. This will alternate through the different border styles defined above instead of having to add the border class for each element.

1
2
3
4
5
6

Code:

<div class="row flex-center child-borders">
  <div class="sm-2 col">1</div>
  <div class="sm-2 col">2</div>
  <div class="sm-2 col">3</div>
  <div class="sm-2 col">4</div>
  <div class="sm-2 col">5</div>
  <div class="sm-2 col">6</div>
</div>

Border Styles

Dashed
Dotted
Dashed Thick
Dotted Thick

Code:

<div class="row flex-spaces child-borders">
  <div class="sm-3 col border-dashed">Dashed</div>
  <div class="sm-3 col border-dotted">Dotted</div>
  <div class="sm-3 col border-dashed border-thick">Dashed Thick</div>
  <div class="sm-3 col border-dotted border-thick">Dotted Thick</div>
</div>

Shadows

Large
Default
Small
Hover

Code:

<div class="row flex-spaces child-borders">
  <div class="sm-3 col shadow shadow-large">Large</div>
  <div class="sm-3 col shadow">Default</div>
  <div class="sm-3 col shadow shadow-small">Small</div>
  <div class="sm-3 col shadow shadow-hover">Hover</div>
</div>

Child Shadows

Use this if you want all children to have a shadow.

Shadow
Shadow
Shadow

Code:

<div class="row flex-spaces child-borders child-shadows">
  <div class="sm-3 col">Shadow</div>
  <div class="sm-3 col">Shadow</div>
  <div class="sm-3 col">Shadow</div>
</div>

Child Shadows Hover

Use this if you want all children to have a shadow… that changes on hover

Shadow
Shadow
Shadow

Code:

<div class="row flex-spaces child-borders child-shadows-hover">
  <div class="sm-3 col">Shadow</div>
  <div class="sm-3 col">Shadow</div>
  <div class="sm-3 col">Shadow</div>
</div>