roobie/docs/layout/display.md

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.

# Display
Favor `row` and `col` classes.  If you don't use them, our layouts won't work correctly.

## Classes
```html
<div class="row">Row</div>
<div class="rowr">Row reverse</div>
<div class="col">Column</div>
<div class="colr">Column reverse</div>
<div class="flx">Flex</div>
<div class="blk">Block</div>
<div class="inl">Inline</div>
<div class="inl-blk">Inline block</div>
<div class="inl-flx">Inline Flex</div>
<div class="show">Show</div>
<div class="hide">Hide</div>
```
## Usage


### Row
<div class="row">
    <button type="button" class="btn btn-outline">Button 1</button>
    <button type="button" class="btn btn-outline">Button 2</button>
    <button type="button" class="btn btn-outline">Button 3</button>
</div>

```html
<div class="row">
    <button type="button" class="btn btn-outline">Button 1</button>
    <button type="button" class="btn btn-outline">Button 2</button>
    <button type="button" class="btn btn-outline">Button 3</button>
</div>
```
### Row Reverse
<div class="rowr">
    <button type="button" class="btn btn-outline">Button 1</button>
    <button type="button" class="btn btn-outline">Button 2</button>
    <button type="button" class="btn btn-outline">Button 3</button>
</div>

```html
<div class="rowr">
    <button type="button" class="btn btn-outline">Button 1</button>
    <button type="button" class="btn btn-outline">Button 2</button>
    <button type="button" class="btn btn-outline">Button 3</button>
</div>
```

### Column
<div class="col">
    <button type="button" class="btn btn-outline">Button 1</button>
    <button type="button" class="btn btn-outline">Button 2</button>
    <button type="button" class="btn btn-outline">Button 3</button>
</div>

```html
<div class="col">
    <button type="button" class="btn btn-outline">Button 1</button>
    <button type="button" class="btn btn-outline">Button 2</button>
    <button type="button" class="btn btn-outline">Button 3</button>
</div>
```

### Column Reverse
<div class="colr">
    <button type="button" class="btn btn-outline">Button 1</button>
    <button type="button" class="btn btn-outline">Button 2</button>
    <button type="button" class="btn btn-outline">Button 3</button>
</div>

```html
<div class="colr">
    <button type="button" class="btn btn-outline">Button 1</button>
    <button type="button" class="btn btn-outline">Button 2</button>
    <button type="button" class="btn btn-outline">Button 3</button>
</div>
```