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.
178 lines (172 loc) • 4.63 kB
Markdown
# Spacer
Spaces all direct children of a container using margin.
## Classes
```html
<div class="row-spacer1">Row spacer 1</div>
<div class="row-spacer2 row-spacer">Row spacer 2</div>
<div class="row-spacer3">Row spacer 3</div>
<div class="row-spacer4">Row spacer 4</div>
<div class="row-spacer5">Row spacer 5</div>
<div class="row-spacer6">Row spacer 6</div>
<div class="col-spacer1">Column spacer 1</div>
<div class="col-spacer2 col-spacer">Column spacer 2</div>
<div class="col-spacer3">Column spacer 3</div>
<div class="col-spacer4">Column spacer 4</div>
<div class="col-spacer5">Column spacer 5</div>
<div class="col-spacer6">Column spacer 6</div>
```
## Usage
### Row
<div class="col col-spacer">
<div class="row bdr1 br pad3">
<span>Text</span>
<span>Text</span>
<span>Text</span>
</div>
<div class="row bdr1 br pad3 row-spacer1">
<span>Text</span>
<span>Text</span>
<span>Text</span>
</div>
<div class="row bdr1 br pad3 row-spacer2">
<span>Text</span>
<span>Text</span>
<span>Text</span>
</div>
<div class="row bdr1 br pad3 row-spacer3">
<span>Text</span>
<span>Text</span>
<span>Text</span>
</div>
<div class="row bdr1 br pad3 row-spacer4">
<span>Text</span>
<span>Text</span>
<span>Text</span>
</div>
<div class="row bdr1 br pad3 row-spacer5">
<span>Text</span>
<span>Text</span>
<span>Text</span>
</div>
<div class="row bdr1 br pad3 row-spacer6">
<span>Text</span>
<span>Text</span>
<span>Text</span>
</div>
</div>
```html
<div class="col col-spacer">
<div class="row bdr1 br pad3">
<span>Text</span>
<span>Text</span>
<span>Text</span>
</div>
<div class="row bdr1 br pad3 row-spacer1">
<span>Text</span>
<span>Text</span>
<span>Text</span>
</div>
<div class="row bdr1 br pad3 row-spacer2">
<span>Text</span>
<span>Text</span>
<span>Text</span>
</div>
<div class="row bdr1 br pad3 row-spacer3">
<span>Text</span>
<span>Text</span>
<span>Text</span>
</div>
<div class="row bdr1 br pad3 row-spacer4">
<span>Text</span>
<span>Text</span>
<span>Text</span>
</div>
<div class="row bdr1 br pad3 row-spacer5">
<span>Text</span>
<span>Text</span>
<span>Text</span>
</div>
<div class="row bdr1 br pad3 row-spacer6">
<span>Text</span>
<span>Text</span>
<span>Text</span>
</div>
</div>
```
### Column
<div class="row row-spacer">
<div class="col bdr1 br pad3">
<span>Text</span>
<span>Text</span>
<span>Text</span>
</div>
<div class="col bdr1 br pad3 col-spacer1">
<span>Text</span>
<span>Text</span>
<span>Text</span>
</div>
<div class="col bdr1 br pad3 col-spacer2">
<span>Text</span>
<span>Text</span>
<span>Text</span>
</div>
<div class="col bdr1 br pad3 col-spacer3">
<span>Text</span>
<span>Text</span>
<span>Text</span>
</div>
<div class="col bdr1 br pad3 col-spacer4">
<span>Text</span>
<span>Text</span>
<span>Text</span>
</div>
<div class="col bdr1 br pad3 col-spacer5">
<span>Text</span>
<span>Text</span>
<span>Text</span>
</div>
<div class="col bdr1 br pad3 col-spacer6">
<span>Text</span>
<span>Text</span>
<span>Text</span>
</div>
</div>
```html
<div class="row row-spacer">
<div class="col bdr1 br pad3">
<span>Text</span>
<span>Text</span>
<span>Text</span>
</div>
<div class="col bdr1 br pad3 col-spacer1">
<span>Text</span>
<span>Text</span>
<span>Text</span>
</div>
<div class="col bdr1 br pad3 col-spacer2">
<span>Text</span>
<span>Text</span>
<span>Text</span>
</div>
<div class="col bdr1 br pad3 col-spacer3">
<span>Text</span>
<span>Text</span>
<span>Text</span>
</div>
<div class="col bdr1 br pad3 col-spacer4">
<span>Text</span>
<span>Text</span>
<span>Text</span>
</div>
<div class="col bdr1 br pad3 col-spacer5">
<span>Text</span>
<span>Text</span>
<span>Text</span>
</div>
<div class="col bdr1 br pad3 col-spacer6">
<span>Text</span>
<span>Text</span>
<span>Text</span>
</div>
</div>
```