roobie
Version:
A collection of CSS classes to keep you writing business logic in your HTML. Easily build maintainable web & mobile applications with 100s of pre-built CSS classes at your fingertips.
216 lines (201 loc) • 6.77 kB
Markdown
# Border
## Classes
```html
<div class="bdr0">None</div>
<div class="bdr1">1</div>
<div class="bdr2">2</div>
<div class="bdr3">3</div>
<div class="bdr4">4</div>
<div class="bdr5">5</div>
<div class="bdr6">6</div>
<div class="bdrl0">Left None</div>
<div class="bdrl1">Left 1</div>
<div class="bdrl2">Left 2</div>
<div class="bdrl3">Left 3</div>
<div class="bdrl4">Left 4</div>
<div class="bdrl5">Left 5</div>
<div class="bdrl6">Left 6</div>
<div class="bdrr0">Right None</div>
<div class="bdrr1">Right 1</div>
<div class="bdrr2">Right 2</div>
<div class="bdrr3">Right 3</div>
<div class="bdrr4">Right 4</div>
<div class="bdrr5">Right 5</div>
<div class="bdrr6">Right 6</div>
<div class="bdrt0">Top None</div>
<div class="bdrt1">Top 1</div>
<div class="bdrt2">Top 2</div>
<div class="bdrt3">Top 3</div>
<div class="bdrt4">Top 4</div>
<div class="bdrt5">Top 5</div>
<div class="bdrt6">Top 6</div>
<div class="bdrb0">Bottom None</div>
<div class="bdrb1">Bottom 1</div>
<div class="bdrb2">Bottom 2</div>
<div class="bdrb3">Bottom 3</div>
<div class="bdrb4">Bottom 4</div>
<div class="bdrb5">Bottom 5</div>
<div class="bdrb6">Bottom 6</div>
<div class="bdrh0">Horizontal None</div>
<div class="bdrh1">Horizontal 1</div>
<div class="bdrh2">Horizontal 2</div>
<div class="bdrh3">Horizontal 3</div>
<div class="bdrh4">Horizontal 4</div>
<div class="bdrh5">Horizontal 5</div>
<div class="bdrh6">Horizontal 6</div>
<div class="bdrv0">Vertical None</div>
<div class="bdrv1">Vertical 1</div>
<div class="bdrv2">Vertical 2</div>
<div class="bdrv3">Vertical 3</div>
<div class="bdrv4">Vertical 4</div>
<div class="bdrv5">Vertical 5</div>
<div class="bdrv6">Vertical 6</div>
```
## Usage
### All Sides
<div class="row row-spacer jst-start aln-center">
<div class="bdr0 pad4">None</div>
<div class="bdr1 pad4">1</div>
<div class="bdr2 pad4">2</div>
<div class="bdr3 pad4">3</div>
<div class="bdr4 pad4">4</div>
<div class="bdr5 pad4">5</div>
<div class="bdr6 pad4">6</div>
</div>
```html
<div class="row row-spacer jst-start aln-center">
<div class="bdr0 pad4">None</div>
<div class="bdr1 pad4">1</div>
<div class="bdr2 pad4">2</div>
<div class="bdr3 pad4">3</div>
<div class="bdr4 pad4">4</div>
<div class="bdr5 pad4">5</div>
<div class="bdr6 pad4">6</div>
</div>
```
### Left
<div class="row row-spacer jst-start aln-center">
<div class="bdrl0 pad4">Left None</div>
<div class="bdrl1 pad4">Left 1</div>
<div class="bdrl2 pad4">Left 2</div>
<div class="bdrl3 pad4">Left 3</div>
<div class="bdrl4 pad4">Left 4</div>
<div class="bdrl5 pad4">Left 5</div>
<div class="bdrl6 pad4">Left 6</div>
</div>
```html
<div class="row row-spacer jst-start aln-center">
<div class="bdrl0 pad4">Left None</div>
<div class="bdrl1 pad4">Left 1</div>
<div class="bdrl2 pad4">Left 2</div>
<div class="bdrl3 pad4">Left 3</div>
<div class="bdrl4 pad4">Left 4</div>
<div class="bdrl5 pad4">Left 5</div>
<div class="bdrl6 pad4">Left 6</div>
</div>
```
### Right
<div class="row row-spacer jst-start aln-center">
<div class="bdrr0 pad4">Right None</div>
<div class="bdrr1 pad4">Right 1</div>
<div class="bdrr2 pad4">Right 2</div>
<div class="bdrr3 pad4">Right 3</div>
<div class="bdrr4 pad4">Right 4</div>
<div class="bdrr5 pad4">Right 5</div>
<div class="bdrr6 pad4">Right 6</div>
</div>
```html
<div class="row row-spacer jst-start aln-center">
<div class="bdrr0 pad4">Right None</div>
<div class="bdrr1 pad4">Right 1</div>
<div class="bdrr2 pad4">Right 2</div>
<div class="bdrr3 pad4">Right 3</div>
<div class="bdrr4 pad4">Right 4</div>
<div class="bdrr5 pad4">Right 5</div>
<div class="bdrr6 pad4">Right 6</div>
</div>
```
### Top
<div class="col col-spacer aln-start">
<div class="bdrt0 pad4">Top None</div>
<div class="bdrt1 pad4">Top 1</div>
<div class="bdrt2 pad4">Top 2</div>
<div class="bdrt3 pad4">Top 3</div>
<div class="bdrt4 pad4">Top 4</div>
<div class="bdrt5 pad4">Top 5</div>
<div class="bdrt6 pad4">Top 6</div>
</div>
```html
<div class="col col-spacer aln-start">
<div class="bdrt0 pad4">Top None</div>
<div class="bdrt1 pad4">Top 1</div>
<div class="bdrt2 pad4">Top 2</div>
<div class="bdrt3 pad4">Top 3</div>
<div class="bdrt4 pad4">Top 4</div>
<div class="bdrt5 pad4">Top 5</div>
<div class="bdrt6 pad4">Top 6</div>
</div>
```
### Bottom
<div class="col col-spacer aln-start">
<div class="bdrb0 pad4">Bottom None</div>
<div class="bdrb1 pad4">Bottom 1</div>
<div class="bdrb2 pad4">Bottom 2</div>
<div class="bdrb3 pad4">Bottom 3</div>
<div class="bdrb4 pad4">Bottom 4</div>
<div class="bdrb5 pad4">Bottom 5</div>
<div class="bdrb6 pad4">Bottom 6</div>
</div>
```html
<div class="col col-spacer aln-start">
<div class="bdrb0 pad4">Bottom None</div>
<div class="bdrb1 pad4">Bottom 1</div>
<div class="bdrb2 pad4">Bottom 2</div>
<div class="bdrb3 pad4">Bottom 3</div>
<div class="bdrb4 pad4">Bottom 4</div>
<div class="bdrb5 pad4">Bottom 5</div>
<div class="bdrb6 pad4">Bottom 6</div>
</div>
```
### Horizontal
<div class="row row-spacer jst-start aln-center">
<div class="bdrh0 pad4">Horizontal None</div>
<div class="bdrh1 pad4">Horizontal 1</div>
<div class="bdrh2 pad4">Horizontal 2</div>
<div class="bdrh3 pad4">Horizontal 3</div>
<div class="bdrh4 pad4">Horizontal 4</div>
<div class="bdrh5 pad4">Horizontal 5</div>
<div class="bdrh6 pad4">Horizontal 6</div>
</div>
```html
<div class="row row-spacer jst-start aln-center">
<div class="bdrh0 pad4">Horizontal None</div>
<div class="bdrh1 pad4">Horizontal 1</div>
<div class="bdrh2 pad4">Horizontal 2</div>
<div class="bdrh3 pad4">Horizontal 3</div>
<div class="bdrh4 pad4">Horizontal 4</div>
<div class="bdrh5 pad4">Horizontal 5</div>
<div class="bdrh6 pad4">Horizontal 6</div>
</div>
```
### Vertical
<div class="col col-spacer col col-spacer-spacer aln-start">
<div class="bdrv0 pad4">Vertical None</div>
<div class="bdrv1 pad4">Vertical 1</div>
<div class="bdrv2 pad4">Vertical 2</div>
<div class="bdrv3 pad4">Vertical 3</div>
<div class="bdrv4 pad4">Vertical 4</div>
<div class="bdrv5 pad4">Vertical 5</div>
<div class="bdrv6 pad4">Vertical 6</div>
</div>
```html
<div class="col col-spacer col col-spacer-spacer aln-start">
<div class="bdrv0 pad4">Vertical None</div>
<div class="bdrv1 pad4">Vertical 1</div>
<div class="bdrv2 pad4">Vertical 2</div>
<div class="bdrv3 pad4">Vertical 3</div>
<div class="bdrv4 pad4">Vertical 4</div>
<div class="bdrv5 pad4">Vertical 5</div>
<div class="bdrv6 pad4">Vertical 6</div>
</div>
```