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.
236 lines (222 loc) • 8.01 kB
Markdown
# Padding
## Classes
```html
<div class="pada">Auto</div>
<div class="pad0">None</div>
<div class="pad1">1</div>
<div class="pad2">2</div>
<div class="pad3">3</div>
<div class="pad4">4</div>
<div class="pad5">5</div>
<div class="pad6">6</div>
<div class="padla">Left Auto</div>
<div class="padl0">Left None</div>
<div class="padl1">Left 1</div>
<div class="padl2">Left 2</div>
<div class="padl3">Left 3</div>
<div class="padl4">Left 4</div>
<div class="padl5">Left 5</div>
<div class="padl6">Left 6</div>
<div class="padra">Right Auto</div>
<div class="padr0">Right None</div>
<div class="padr1">Right 1</div>
<div class="padr2">Right 2</div>
<div class="padr3">Right 3</div>
<div class="padr4">Right 4</div>
<div class="padr5">Right 5</div>
<div class="padr6">Right 6</div>
<div class="padta">Top Auto</div>
<div class="padt0">Top None</div>
<div class="padt1">Top 1</div>
<div class="padt2">Top 2</div>
<div class="padt3">Top 3</div>
<div class="padt4">Top 4</div>
<div class="padt5">Top 5</div>
<div class="padt6">Top 6</div>
<div class="padba">Bottom Auto</div>
<div class="padb0">Bottom None</div>
<div class="padb1">Bottom 1</div>
<div class="padb2">Bottom 2</div>
<div class="padb3">Bottom 3</div>
<div class="padb4">Bottom 4</div>
<div class="padb5">Bottom 5</div>
<div class="padb6">Bottom 6</div>
<div class="padha">Horizontal Auto</div>
<div class="padh0">Horizontal None</div>
<div class="padh1">Horizontal 1</div>
<div class="padh2">Horizontal 2</div>
<div class="padh3">Horizontal 3</div>
<div class="padh4">Horizontal 4</div>
<div class="padh5">Horizontal 5</div>
<div class="padh6">Horizontal 6</div>
<div class="padva">Vertical Auto</div>
<div class="padv0">Vertical None</div>
<div class="padv1">Vertical 1</div>
<div class="padv2">Vertical 2</div>
<div class="padv3">Vertical 3</div>
<div class="padv4">Vertical 4</div>
<div class="padv5">Vertical 5</div>
<div class="padv6">Vertical 6</div>
```
## Usage
### All Sides
<div class="row row-spacer jst-start aln-center">
<div class="pada bdr1 br">Auto</div>
<div class="pad0 bdr1 br">None</div>
<div class="pad1 bdr1 br">1</div>
<div class="pad2 bdr1 br">2</div>
<div class="pad3 bdr1 br">3</div>
<div class="pad4 bdr1 br">4</div>
<div class="pad5 bdr1 br">5</div>
<div class="pad6 bdr1 br">6</div>
</div>
```html
<div class="row row-spacer jst-start aln-center">
<div class="pada bdr1 br">Auto</div>
<div class="pad0 bdr1 br">None</div>
<div class="pad1 bdr1 br">1</div>
<div class="pad2 bdr1 br">2</div>
<div class="pad3 bdr1 br">3</div>
<div class="pad4 bdr1 br">4</div>
<div class="pad5 bdr1 br">5</div>
<div class="pad6 bdr1 br">6</div>
</div>
```
### Left
<div class="row row-spacer jst-start aln-center">
<div class="padla bdr1 br">Left Auto</div>
<div class="padl0 bdr1 br">Left None</div>
<div class="padl1 bdr1 br">Left 1</div>
<div class="padl2 bdr1 br">Left 2</div>
<div class="padl3 bdr1 br">Left 3</div>
<div class="padl4 bdr1 br">Left 4</div>
<div class="padl5 bdr1 br">Left 5</div>
<div class="padl6 bdr1 br">Left 6</div>
</div>
```html
<div class="row row-spacer jst-start aln-center">
<div class="padla bdr1 br">Left Auto</div>
<div class="padl0 bdr1 br">Left None</div>
<div class="padl1 bdr1 br">Left 1</div>
<div class="padl2 bdr1 br">Left 2</div>
<div class="padl3 bdr1 br">Left 3</div>
<div class="padl4 bdr1 br">Left 4</div>
<div class="padl5 bdr1 br">Left 5</div>
<div class="padl6 bdr1 br">Left 6</div>
</div>
```
### Right
<div class="row row-spacer jst-start aln-center">
<div class="padra bdr1 br">Right Auto</div>
<div class="padr0 bdr1 br">Right None</div>
<div class="padr1 bdr1 br">Right 1</div>
<div class="padr2 bdr1 br">Right 2</div>
<div class="padr3 bdr1 br">Right 3</div>
<div class="padr4 bdr1 br">Right 4</div>
<div class="padr5 bdr1 br">Right 5</div>
<div class="padr6 bdr1 br">Right 6</div>
</div>
```html
<div class="row row-spacer jst-start aln-center">
<div class="padra bdr1 br">Right Auto</div>
<div class="padr0 bdr1 br">Right None</div>
<div class="padr1 bdr1 br">Right 1</div>
<div class="padr2 bdr1 br">Right 2</div>
<div class="padr3 bdr1 br">Right 3</div>
<div class="padr4 bdr1 br">Right 4</div>
<div class="padr5 bdr1 br">Right 5</div>
<div class="padr6 bdr1 br">Right 6</div>
</div>
```
### Top
<div class="row row-spacer jst-start aln-center">
<div class="padta bdr1 br">Top Auto</div>
<div class="padt0 bdr1 br">Top None</div>
<div class="padt1 bdr1 br">Top 1</div>
<div class="padt2 bdr1 br">Top 2</div>
<div class="padt3 bdr1 br">Top 3</div>
<div class="padt4 bdr1 br">Top 4</div>
<div class="padt5 bdr1 br">Top 5</div>
<div class="padt6 bdr1 br">Top 6</div>
</div>
```html
<div class="row row-spacer jst-start aln-center">
<div class="padta bdr1 br">Top Auto</div>
<div class="padt0 bdr1 br">Top None</div>
<div class="padt1 bdr1 br">Top 1</div>
<div class="padt2 bdr1 br">Top 2</div>
<div class="padt3 bdr1 br">Top 3</div>
<div class="padt4 bdr1 br">Top 4</div>
<div class="padt5 bdr1 br">Top 5</div>
<div class="padt6 bdr1 br">Top 6</div>
</div>
```
### Bottom
<div class="row row-spacer jst-start aln-center">
<div class="padba bdr1 br">Bottom Auto</div>
<div class="padb0 bdr1 br">Bottom None</div>
<div class="padb1 bdr1 br">Bottom 1</div>
<div class="padb2 bdr1 br">Bottom 2</div>
<div class="padb3 bdr1 br">Bottom 3</div>
<div class="padb4 bdr1 br">Bottom 4</div>
<div class="padb5 bdr1 br">Bottom 5</div>
<div class="padb6 bdr1 br">Bottom 6</div>
</div>
```html
<div class="row row-spacer jst-start aln-center">
<div class="padba bdr1 br">Bottom Auto</div>
<div class="padb0 bdr1 br">Bottom None</div>
<div class="padb1 bdr1 br">Bottom 1</div>
<div class="padb2 bdr1 br">Bottom 2</div>
<div class="padb3 bdr1 br">Bottom 3</div>
<div class="padb4 bdr1 br">Bottom 4</div>
<div class="padb5 bdr1 br">Bottom 5</div>
<div class="padb6 bdr1 br">Bottom 6</div>
</div>
```
### Horizontal
<div class="row row-spacer jst-start aln-center">
<div class="padha bdr1 br">Horizontal Auto</div>
<div class="padh0 bdr1 br">Horizontal None</div>
<div class="padh1 bdr1 br">Horizontal 1</div>
<div class="padh2 bdr1 br">Horizontal 2</div>
<div class="padh3 bdr1 br">Horizontal 3</div>
<div class="padh4 bdr1 br">Horizontal 4</div>
<div class="padh5 bdr1 br">Horizontal 5</div>
<div class="padh6 bdr1 br">Horizontal 6</div>
</div>
```html
<div class="row row-spacer jst-start aln-center">
<div class="padha bdr1 br">Horizontal Auto</div>
<div class="padh0 bdr1 br">Horizontal None</div>
<div class="padh1 bdr1 br">Horizontal 1</div>
<div class="padh2 bdr1 br">Horizontal 2</div>
<div class="padh3 bdr1 br">Horizontal 3</div>
<div class="padh4 bdr1 br">Horizontal 4</div>
<div class="padh5 bdr1 br">Horizontal 5</div>
<div class="padh6 bdr1 br">Horizontal 6</div>
</div>
```
### Vertical
<div class="row row-spacer jst-start aln-center">
<div class="padva bdr1 br">Vertical Auto</div>
<div class="padv0 bdr1 br">Vertical None</div>
<div class="padv1 bdr1 br">Vertical 1</div>
<div class="padv2 bdr1 br">Vertical 2</div>
<div class="padv3 bdr1 br">Vertical 3</div>
<div class="padv4 bdr1 br">Vertical 4</div>
<div class="padv5 bdr1 br">Vertical 5</div>
<div class="padv6 bdr1 br">Vertical 6</div>
</div>
```html
<div class="row row-spacer jst-start aln-center">
<div class="padva bdr1 br">Vertical Auto</div>
<div class="padv0 bdr1 br">Vertical None</div>
<div class="padv1 bdr1 br">Vertical 1</div>
<div class="padv2 bdr1 br">Vertical 2</div>
<div class="padv3 bdr1 br">Vertical 3</div>
<div class="padv4 bdr1 br">Vertical 4</div>
<div class="padv5 bdr1 br">Vertical 5</div>
<div class="padv6 bdr1 br">Vertical 6</div>
</div>
```