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.
292 lines (264 loc) • 8.85 kB
Markdown
# Margin
## Classes
```html
<div class="mrga">Auto</div>
<div class="mrg0">None</div>
<div class="mrg1">1</div>
<div class="mrg2">2</div>
<div class="mrg3">3</div>
<div class="mrg4">4</div>
<div class="mrg5">5</div>
<div class="mrg6">6</div>
<div class="mrgla">Left Auto</div>
<div class="mrgl0">Left None</div>
<div class="mrgl1">Left 1</div>
<div class="mrgl2">Left 2</div>
<div class="mrgl3">Left 3</div>
<div class="mrgl4">Left 4</div>
<div class="mrgl5">Left 5</div>
<div class="mrgl6">Left 6</div>
<div class="mrgra">Right Auto</div>
<div class="mrgr0">Right None</div>
<div class="mrgr1">Right 1</div>
<div class="mrgr2">Right 2</div>
<div class="mrgr3">Right 3</div>
<div class="mrgr4">Right 4</div>
<div class="mrgr5">Right 5</div>
<div class="mrgr6">Right 6</div>
<div class="mrgta">Top Auto</div>
<div class="mrgt0">Top None</div>
<div class="mrgt1">Top 1</div>
<div class="mrgt2">Top 2</div>
<div class="mrgt3">Top 3</div>
<div class="mrgt4">Top 4</div>
<div class="mrgt5">Top 5</div>
<div class="mrgt6">Top 6</div>
<div class="mrgba">Bottom Auto</div>
<div class="mrgb0">Bottom None</div>
<div class="mrgb1">Bottom 1</div>
<div class="mrgb2">Bottom 2</div>
<div class="mrgb3">Bottom 3</div>
<div class="mrgb4">Bottom 4</div>
<div class="mrgb5">Bottom 5</div>
<div class="mrgb6">Bottom 6</div>
<div class="mrgha">Horizontal Auto</div>
<div class="mrgh0">Horizontal None</div>
<div class="mrgh1">Horizontal 1</div>
<div class="mrgh2">Horizontal 2</div>
<div class="mrgh3">Horizontal 3</div>
<div class="mrgh4">Horizontal 4</div>
<div class="mrgh5">Horizontal 5</div>
<div class="mrgh6">Horizontal 6</div>
<div class="mrgva">Vertical Auto</div>
<div class="mrgv0">Vertical None</div>
<div class="mrgv1">Vertical 1</div>
<div class="mrgv2">Vertical 2</div>
<div class="mrgv3">Vertical 3</div>
<div class="mrgv4">Vertical 4</div>
<div class="mrgv5">Vertical 5</div>
<div class="mrgv6">Vertical 6</div>
```
## Usage
### All Sides
<div class="row jst-start aln-center">
<div class="mrg0 pad4 bdr1 br">None</div>
<div class="mrg1 pad4 bdr1 br">1</div>
<div class="mrg2 pad4 bdr1 br">2</div>
<div class="mrg3 pad4 bdr1 br">3</div>
<div class="mrg4 pad4 bdr1 br">4</div>
<div class="mrg5 pad4 bdr1 br">5</div>
<div class="mrg6 pad4 bdr1 br">6</div>
</div>
```html
<div class="row jst-start aln-center">
<div class="mrg0 pad4 bdr1 br">None</div>
<div class="mrg1 pad4 bdr1 br">1</div>
<div class="mrg2 pad4 bdr1 br">2</div>
<div class="mrg3 pad4 bdr1 br">3</div>
<div class="mrg4 pad4 bdr1 br">4</div>
<div class="mrg5 pad4 bdr1 br">5</div>
<div class="mrg6 pad4 bdr1 br">6</div>
</div>
```
<div class="div row">
<div class="mrga pad4 bdr1 br">Auto</div>
</div>
```html
<div class="div row">
<div class="mrga pad4 bdr1 br">Auto</div>
</div>
```
### Left
<div class="row jst-start aln-center">
<div class="mrgl0 pad4 bdr1 br">Left None</div>
<div class="mrgl1 pad4 bdr1 br">Left 1</div>
<div class="mrgl2 pad4 bdr1 br">Left 2</div>
<div class="mrgl3 pad4 bdr1 br">Left 3</div>
<div class="mrgl4 pad4 bdr1 br">Left 4</div>
<div class="mrgl5 pad4 bdr1 br">Left 5</div>
<div class="mrgl6 pad4 bdr1 br">Left 6</div>
</div>
```html
<div class="row jst-start aln-center">
<div class="mrgl0 pad4 bdr1 br">Left None</div>
<div class="mrgl1 pad4 bdr1 br">Left 1</div>
<div class="mrgl2 pad4 bdr1 br">Left 2</div>
<div class="mrgl3 pad4 bdr1 br">Left 3</div>
<div class="mrgl4 pad4 bdr1 br">Left 4</div>
<div class="mrgl5 pad4 bdr1 br">Left 5</div>
<div class="mrgl6 pad4 bdr1 br">Left 6</div>
</div>
```
<div class="div row">
<div class="mrgla pad4 bdr1 br">Left Auto</div>
</div>
```html
<div class="div row">
<div class="mrgla pad4 bdr1 br">Left Auto</div>
</div>
```
### Right
<div class="row jst-start aln-center">
<div class="mrgr0 pad4 bdr1 br">Right None</div>
<div class="mrgr1 pad4 bdr1 br">Right 1</div>
<div class="mrgr2 pad4 bdr1 br">Right 2</div>
<div class="mrgr3 pad4 bdr1 br">Right 3</div>
<div class="mrgr4 pad4 bdr1 br">Right 4</div>
<div class="mrgr5 pad4 bdr1 br">Right 5</div>
<div class="mrgr6 pad4 bdr1 br">Right 6</div>
</div>
```html
<div class="row jst-start aln-center">
<div class="mrgr0 pad4 bdr1 br">Right None</div>
<div class="mrgr1 pad4 bdr1 br">Right 1</div>
<div class="mrgr2 pad4 bdr1 br">Right 2</div>
<div class="mrgr3 pad4 bdr1 br">Right 3</div>
<div class="mrgr4 pad4 bdr1 br">Right 4</div>
<div class="mrgr5 pad4 bdr1 br">Right 5</div>
<div class="mrgr6 pad4 bdr1 br">Right 6</div>
</div>
```
<div class="div row">
<div class="mrgra pad4 bdr1 br">Right Auto</div>
</div>
```html
<div class="div row">
<div class="mrgra pad4 bdr1 br">Right Auto</div>
</div>
```
### Top
<div class="col aln-start">
<div class="mrgt0 pad4 bdr1 br">Top None</div>
<div class="mrgt1 pad4 bdr1 br">Top 1</div>
<div class="mrgt2 pad4 bdr1 br">Top 2</div>
<div class="mrgt3 pad4 bdr1 br">Top 3</div>
<div class="mrgt4 pad4 bdr1 br">Top 4</div>
<div class="mrgt5 pad4 bdr1 br">Top 5</div>
<div class="mrgt6 pad4 bdr1 br">Top 6</div>
</div>
```html
<div class="col aln-start">
<div class="mrgt0 pad4 bdr1 br">Top None</div>
<div class="mrgt1 pad4 bdr1 br">Top 1</div>
<div class="mrgt2 pad4 bdr1 br">Top 2</div>
<div class="mrgt3 pad4 bdr1 br">Top 3</div>
<div class="mrgt4 pad4 bdr1 br">Top 4</div>
<div class="mrgt5 pad4 bdr1 br">Top 5</div>
<div class="mrgt6 pad4 bdr1 br">Top 6</div>
</div>
```
<div class="div row">
<div class="mrgta pad4 bdr1 br">Top Auto</div>
</div>
```html
<div class="div row">
<div class="mrgta pad4 bdr1 br">Top Auto</div>
</div>
```
### Bottom
<div class="col aln-start">
<div class="mrgb0 pad4 bdr1 br">Bottom None</div>
<div class="mrgb1 pad4 bdr1 br">Bottom 1</div>
<div class="mrgb2 pad4 bdr1 br">Bottom 2</div>
<div class="mrgb3 pad4 bdr1 br">Bottom 3</div>
<div class="mrgb4 pad4 bdr1 br">Bottom 4</div>
<div class="mrgb5 pad4 bdr1 br">Bottom 5</div>
<div class="mrgb6 pad4 bdr1 br">Bottom 6</div>
</div>
```html
<div class="col aln-start">
<div class="mrgb0 pad4 bdr1 br">Bottom None</div>
<div class="mrgb1 pad4 bdr1 br">Bottom 1</div>
<div class="mrgb2 pad4 bdr1 br">Bottom 2</div>
<div class="mrgb3 pad4 bdr1 br">Bottom 3</div>
<div class="mrgb4 pad4 bdr1 br">Bottom 4</div>
<div class="mrgb5 pad4 bdr1 br">Bottom 5</div>
<div class="mrgb6 pad4 bdr1 br">Bottom 6</div>
</div>
```
<div class="div row">
<div class="mrgba pad4 bdr1 br">Bottom Auto</div>
</div>
```html
<div class="div row">
<div class="mrgba pad4 bdr1 br">Bottom Auto</div>
</div>
```
### Horizontal
<div class="row jst-start aln-center">
<div class="mrgh0 pad4 bdr1 br">Horizontal None</div>
<div class="mrgh1 pad4 bdr1 br">Horizontal 1</div>
<div class="mrgh2 pad4 bdr1 br">Horizontal 2</div>
<div class="mrgh3 pad4 bdr1 br">Horizontal 3</div>
<div class="mrgh4 pad4 bdr1 br">Horizontal 4</div>
<div class="mrgh5 pad4 bdr1 br">Horizontal 5</div>
<div class="mrgh6 pad4 bdr1 br">Horizontal 6</div>
</div>
```html
<div class="row jst-start aln-center">
<div class="mrgh0 pad4 bdr1 br">Horizontal None</div>
<div class="mrgh1 pad4 bdr1 br">Horizontal 1</div>
<div class="mrgh2 pad4 bdr1 br">Horizontal 2</div>
<div class="mrgh3 pad4 bdr1 br">Horizontal 3</div>
<div class="mrgh4 pad4 bdr1 br">Horizontal 4</div>
<div class="mrgh5 pad4 bdr1 br">Horizontal 5</div>
<div class="mrgh6 pad4 bdr1 br">Horizontal 6</div>
</div>
```
<div class="div row">
<div class="mrgha pad4 bdr1 br">Horizontal Auto</div>
</div>
```html
<div class="div row">
<div class="mrgha pad4 bdr1 br">Horizontal Auto</div>
</div>
```
### Vertical
<div class="col aln-start">
<div class="mrgv0 pad4 bdr1 br">Vertical None</div>
<div class="mrgv1 pad4 bdr1 br">Vertical 1</div>
<div class="mrgv2 pad4 bdr1 br">Vertical 2</div>
<div class="mrgv3 pad4 bdr1 br">Vertical 3</div>
<div class="mrgv4 pad4 bdr1 br">Vertical 4</div>
<div class="mrgv5 pad4 bdr1 br">Vertical 5</div>
<div class="mrgv6 pad4 bdr1 br">Vertical 6</div>
</div>
```html
<div class="col aln-start">
<div class="mrgv0 pad4 bdr1 br">Vertical None</div>
<div class="mrgv1 pad4 bdr1 br">Vertical 1</div>
<div class="mrgv2 pad4 bdr1 br">Vertical 2</div>
<div class="mrgv3 pad4 bdr1 br">Vertical 3</div>
<div class="mrgv4 pad4 bdr1 br">Vertical 4</div>
<div class="mrgv5 pad4 bdr1 br">Vertical 5</div>
<div class="mrgv6 pad4 bdr1 br">Vertical 6</div>
</div>
```
<div class="div row">
<div class="mrgva pad4 bdr1 br">Vertical Auto</div>
</div>
```html
<div class="div row">
<div class="mrgva pad4 bdr1 br">Vertical Auto</div>
</div>
```