<template src="template/main.xml" colour="RdYlGn" code="css" type="Bootstrap" title="CSS">
<markdown>
## Grid system
<div style="font-size:16px;" highlight="xml">```
<row>
<column></column>
...
</row>
```</div>
Create columns using the `<column>` tag, wrapped in `<row>`s.
If all columns are the same width, you don't need any more markup (you can only do this for 1,2,3,4,6 or 12 columns in a row):
</markdown>
<example class="columns">
<mirror>
<row>
<column>
<h4>Column 1</h4>
<lorem>
</column>
<column>
<h4>Column 2</h4>
<lorem>
</column>
<column>
<h4>Column 3</h4>
<lorem>
</column>
</row>
</mirror>
</example>
<markdown>
### Responsive columns
<div style="font-size:16px;" highlight="xml">```
<row|column xs sm md lg>
```</div>
You can set responsive column widths using the 4 size attributes: `xs` `sm` `md` `lg`. Set them to the column width (in 12ths)
You can set these attributes for each `<column>`, or apply them globally by putting them in the `<row>`.
Local attributes in the `<column>` tag will override the global value.
</markdown>
<example class="columns">
<mirror>
<row lg="3" md="4" sm="6">
<column lg="4"><h4>Column 1</h4><lorem short></column>
<column lg="2"><h4>Column 2</h4><lorem short></column>
<column><h4>Column 3</h4><lorem short></column>
<column><h4>Column 4</h4><lorem short></column>
<column><h4>Column 5</h4><lorem short></column>
<column><h4>Column 6</h4><lorem short></column>
</row>
</mirror>
</example>
<markdown>
Note in the HTML in the last example, clearfix blocks are automatically added to give the correct column flow.
### Offset, Push & Pull
<div style="font-size:16px;" highlight="xml">```
<column *-offset *-pull *-push></column>
```</div>
You can also add offsets using the `*-offset` attributes(`xs-offset`, `sm-offset`, `md-offset` and `lg-offset`)
You can also add in pushes (right) and pulls (left) using `*-push` `*-pull` attributes.
</markdown>
<example show class="columns">
<mirror>
<row>
<column xs="3" xs-offset="1">
<h4>Column 1</h4><lorem short>
</column>
<column xs="2" xs-offset="2">
<h4>Column 2</h4><lorem short>
</column>
<column xs="3" xs-offset="1">
<h4>Column 2</h4><lorem short>
</column>
</row>
</mirror>
</example>
<markdown>
### Automatic Reordering
<div style="font-size:16px;" highlight="xml">```
<column *-order>
```</div>
The most common use for pushes and pulls is to reorder columns. To make this all easier, there's another attribute: `*-order`.
To reorder a row, specify a `*-order` attribute in every column. Each one gives the new location of the column, starting at 1 for the 1st column on the left:
</markdown>
<example show class="columns">
<mirror>
<row sm="3">
<column sm-order="4">
<h4>Column A</h4><lorem short>
</column>
<column sm-order="3">
<h4>Column B</h4><lorem short>
</column>
<column sm-order="2">
<h4>Column C</h4><lorem short>
</column>
<column sm-order="1">
<h4>Column D</h4><lorem short>
</column>
</row>
</mirror>
</example>
<markdown>
You can only reorder across one row.
Take the example below: at `lg` screen size, all 4 columns are in one row.
At `sm`, the columns are spread onto two rows. A & B on the top row, and C & D on the second row.
You can swap columns A and B, and/or columns C and D, but not between rows (in the example, we swap both).
Notice how each new 'row' starts at 1 (first column) or 2 (2nd column)
</markdown>
<example show class="columns">
<mirror>
<row>
<column lg="3" sm="6" sm-order="2">
<h4>Column 1</h4><lorem short>
</column>
<column lg="3" sm="6" sm-order="1">
<h4>Column 2</h4><lorem short>
</column>
<column lg="3" sm="6" sm-order="2">
<h4>Column 3</h4><lorem short>
</column>
<column lg="3" sm="6" sm-order="1">
<h4>Column 4</h4><lorem short>
</column>
</row>
</mirror>
</example>
<markdown>
### Odd-numbered columns
The columns are based on Bootstrap's 12-grid system.
But you can put any number of columns in, and the Bootstrap mixin functions will be used to create a new column group.
</markdown>
<example show class="columns">
<mirror>
<row>
<column><h4>Column 1</h4><lorem short></column>
<column><h4>Column 2</h4><lorem short></column>
<column><h4>Column 3</h4><lorem short></column>
<column><h4>Column 4</h4><lorem short></column>
<column><h4>Column 5</h4><lorem short></column>
</row>
</mirror>
</example>
<markdown>
#### Fractional Sizes
The 5 column above is the same as setting each column with `xs="1/5"`. You can set alternative sizes using fractions:
</markdown>
<example show class="columns">
<mirror>
<row>
<column xs="1/7"><h4>Column 1</h4><lorem short></column>
<column xs="1/7"><h4>Column 2</h4><lorem short></column>
<column xs="2/7"><h4>Column 3</h4><lorem short></column>
<column xs="1/7"><h4>Column 4</h4><lorem short></column>
<column xs="1/7" xs-offset="1"><h4>Column 5</h4><lorem short></column>
</row>
</mirror>
</example>
<markdown>
All the `*-offset`, `*-pull`, `*-push` and `*-order` still work.
So, just to show off, let's have 9 columns for the largest size `lg`, moving down to 7 columns (2 on the next row), 5 & 4, then finally down to a classic 3 x 3.
And reorder the top row, just for fun
</markdown>
<example show class="columns">
<mirror>
<row lg="1/9" md="1/7" xs="4">
<column lg-order="9" md-order="7" sm="1/5" sm-order="5" xs-order="3"><h4>Column 1</h4><lorem short></column>
<column lg-order="8" md-order="6" sm="1/5" sm-order="4" xs-order="2"><h4>Column 2</h4><lorem short></column>
<column lg-order="7" md-order="5" sm="1/5" sm-order="3" xs-order="1"><h4>Column 3</h4><lorem short></column>
<column lg-order="6" md-order="4" sm="1/5" sm-order="2" xs-order="3"><h4>Column 4</h4><lorem short></column>
<column lg-order="5" md-order="3" sm="1/5" sm-order="1" xs-order="2"><h4>Column 5</h4><lorem short></column>
<column lg-order="4" md-order="2" sm="3" sm-order="4" xs-order="1"><h4>Column 6</h4><lorem short></column>
<column lg-order="3" md-order="1" sm="3" sm-order="3" xs-order="3"><h4>Column 7</h4><lorem short></column>
<column lg-order="2" md="6" md-order="2" sm="3" sm-order="2" xs-order="2"><h4>Column 8</h4><lorem short></column>
<column lg-order="1" md="6" md-order="1" sm="3" sm-order="1" xs-order="1"><h4>Column 9</h4><lorem short></column>
</row>
</mirror>
</example>
<markdown>
For more on Bootstrap columns, consult [the documentation](http://getbootstrap.com/css/#grid)
## Typography
There are a range of shortcuts for `p` and `h` tags:
</markdown>
<example show>
<mirror>
<p lead>Lead Text</p>
<p left>Left Aligned Text</p>
<p center>Center Aligned Text</p>
<p right>Right Aligned Text</p>
<p justify lorem><strong>Justified Text:</strong></p>
<p nowrap lorem><strong>No-Wrap Text:</strong></p>
<p lowercase>Lowercase Text</p>
<p uppercase>Uppercase Text</p>
<p capitalize>capitalized text</p>
</mirror>
</example>
<markdown>
You can also set the text or background to any of the **brand colors** (*primary*, *success*, *info*, *warning*, & *danger*). You can also make the text *muted*.
</markdown>
<example show>
<mirror>
<p muted>Muted Text</p>
<p primary>Primary Text</p>
<p success>Success Text</p>
<p info>Info Text</p>
<p warning>Warning Text</p>
<p danger>Danger Text</p>
<p bg-primary>Primary Text</p>
<p bg-success>Success Text</p>
<p bg-info>Info Text</p>
<p bg-warning>Warning Text</p>
<p bg-danger>Danger Text</p>
</mirror>
</example>
<markdown>
### Blockquotes
You can put quotes in a blockquote. Citations should be put in a footer at the bottom - or if you're just putting a `<cite>` you can leave the footer (the `<cite>` will automatically be wrapped in a footer).
The `title` attribute will be auto-filled.
</markdown>
<example show>
<mirror>
<blockquote>
<lorem short>
<footer>Written by <cite>some Roman guy</cite></footer>
</blockquote>
<blockquote reverse>
<lorem short>
<cite>Or he may have been Greek, I'm not sure</cite>
</blockquote>
</mirror>
</example>
<markdown>
### Lists
A couple of shortcuts: unstyle `<ul>` or `<ol>` lists with the `unstyled` attribute, or make them inline with `inline`. Horizontal description lists (`<dl>`) can be made using `horizontal`
</markdown>
<example show>
<mirror>
<ul inline>
<li>Inline 1</li><li>Inline 2</li><li>Inline 3</li><li>Inline 4</li>
</ul>
<ul unstyled>
<li>Unstyled 1</li>
<li>Unstyled 2</li>
<li>Unstyled 3
<ul>
<li>Doesn't work on nested lists</li>
<li>They still have bullet points</li>
</ul></li>
<li>Unstyled 4</li>
</ul>
<dl horizontal>
<dt>Description 1</dt>
<dd><lorem></dd>
<dt>Description 2</dt>
<dd><lorem></dd>
</dl>
</mirror>
</example>
<markdown>
## Code
Highlight your code using **highlight.js**. Add the `highlight` attribute to any wrapper.
Optionally give the language, otherwise hightlight.js will auto-detect.
Note that for html (or OctoML for that matter) use `xml`.
</markdown>
<example show>
<mirror>
<pre highlight="css"><code> #hello { content: "world"; } </code></pre>
<div highlight="xml">
<pre><code> <div id="hello">world</div> </code></pre>
</div>
<pre highlight="javascript"><code> function hello() { console.log('world'); } </code></pre>
</mirror>
</example>
<markdown>
## Tables
There are shortcut attributes for various styles of table:
`striped`
`bordered`
`hover`
`condensed`
`responsive`
</markdown>
<example show>
<mirror>
<h4>Striped, Condensed & Bordered</h4>
<table striped condensed bordered lorem="4x5"></table>
<h4>Hover & Responsive</h4>
<table hover responsive lorem="5x4"></table>
</mirror>
</example>
<markdown>
You can apply any of the *brand colors* to rows or cells
</markdown>
<example show>
<mirror>
<table>
<tr lorem="5"></tr>
<tr active lorem="5"></tr>
<tr info lorem="5"></tr>
<tr success lorem="5"></tr>
<tr warning lorem="5"></tr>
<tr danger lorem="5"></tr>
<tr lorem="5"></tr>
<tr>
<td active><lorem short></td>
<td info><lorem short></td>
<td success><lorem short></td>
<td warning><lorem short></td>
<td danger><lorem short></td>
</tr>
</table>
</mirror>
</example>
<markdown>
## Forms
Any *input element* inside a `<form>` element will be styled.
There are 5 types of input element: 3 single tags for text inputs (`<input>`), checkboxes and radios (`<check>`,`<radio>`), `<textarea>`s and `<select>`s.
There is also a shortcut for a `<submit>` button (this is equivalent to an `<input btn type="submit">`)
Add the `label` attribute to place a label before the input. For a screenreader-only label use `sr`, or use both (the screenreader text will appear after the visible label).
If the label is the same as the placeholder (for text inputs), you can use the shortcut attribute `label-placeholder` (or `sr-placeholder`).
There is no `sr-label` attribute, because that doesn't make any sense.
### Basic Example
</markdown>
<example show>
<mirror>
<form>
<input type="email" label="Email address" placeholder="Enter email">
<input type="password" label-placeholder="Password">
<input type="file" label="File input" help="Example block-level help text here.">
<check label="Check me out">
<submit primary>Submit</submit>
</form>
</mirror>
</example>
<markdown>
### Groups
You can collect form elements into groups using the `<group>` tag.
This allows you to specify global attributes for all elements (such as `inline` and `lg`|`sm`).
You can also use it to apply attributes to all its child elements. In the example below, the same `name` is given to a group of `<radio>` inputs.
</markdown>
<example show>
<mirror>
<form>
<group>
<check label="Option one is this and that—be sure to include why it's great">
<check disabled label="Option two is disabled">
</group>
<group name="optionsRadio">
<radio checked value="option1" label="Option one is this and that—be sure to include why it's great">
<radio value="option2" label="Option two can be something else and selecting it will deselect option one">
<radio value="option3" disabled label="Option three is disabled">
</group>
</form>
</mirror>
</example>
<markdown>
### Inline example
To put input elements inline, add `inline` to a `<form>` or `<group>`.
</markdown>
<example show>
<mirror>
<form inline>
<input type="text" label="Name" placeholder="Jane Doe">
<input type="email" label="Email" placeholder="jane.doe@example.com">
<submit>Send invitation</submit>
</form>
<br><br>
<form>
<group inline>
<input type="email" sr="Email address" placeholder="Enter email">
<input type="password" sr-placeholder="Password">
<check label="Remember me">
<submit>Sign in</submit>
</group>
</form>
</mirror>
</example>
<markdown>
### Add-ons
Text `<input>`s can have add-ons at the beginning or end using the `before` and `after` attributes.
</markdown>
<example show>
<mirror>
<form inline>
<input type="text" before="$" after=".00" sr="Amount (in dollars)" placeholder="Amount">
<submit primary>Transfer cash</submit>
</form>
</mirror>
</example>
<markdown>
### Horizontal Forms
You can use the `<grid>` tag to put the form in a horizontal group. You can set the ratio for sizes `md` and `lg`.
Anything smaller and the labels are stacked.
For items like `<radio>` or `<check>` where the label appears afterwards, you can add a label with a `<group>`
</markdown>
<example show>
<mirror>
<form>
<grid md="2,10">
<select label="Month" options="January-December"></select>
<select label="Years" multiple options="1900-2015"></select>
<input type="text" label="Email">
<group label="Me">
<check label="Remember Me?">
<check label="And Me?">
</group>
<group label="Radio Boxes" name="radio1">
<radio label="hello">
<radio label="goodbye">
</group>
<textarea label="Textarea Label" cols="3">Initial Text</textarea>
</grid>
</form>
</mirror>
</example>
<example show>
<mirror>
<form>
<group inline>
<check label="1" value="option1">
<check label="2" value="option2">
<check label="3" value="option3">
</group>
<group inline name="inlineRadioOptions">
<radio label="1" value="option1">
<radio label="2" value="option2">
<radio label="3" value="option3">
</group>
<check name="noValueCheck">
<radio name="noValueRadio">
</form>
</mirror>
</example>
<example show>
<mirror>
<form inline>
<p sr="Email">email@example.com</p>
<input type="password" sr-placeholder="Password">
<submit>Confirm identity</submit>
</form>
</mirror>
</example>
<example show>
<mirror>
<form>
<input type="text" success icon label="Input with success">
<input type="text" warning icon label="Input with warning">
<input type="text" error icon label="Input with error">
<check success label="Checkbox with success">
<check warning label="Checkbox with warning">
<check error label="Checkbox with error">
</form>
</mirror>
</example>
<example show>
<mirror>
<form>
<grid md="4,8">
<input success icon type="text" label="Input with success">
<input success icon type="text" label="Input group with success" before="@">
</grid>
</form>
</mirror>
</example>
<example show>
<mirror>
<form inline>
<input success icon type="text" label="Input with success">
</form>
<form inline>
<input success icon type="text" label="Input group with success" before="@">
</form>
</mirror>
</example>
<example show>
<mirror>
<form>
<input type="text" success icon sr="Hidden label">
<input type="text" success icon before="@" sr="Input group with success">
</form>
</mirror>
</example>
<example show>
<mirror>
<form>
<div class="form-group">
<input lg type="text" placeholder="Large input">
</div>
<group>
<input type="text" placeholder="Default input">
</group>
<group>
<input sm type="text" placeholder="Small input">
</group>
<select lg type="text" options="Large select,1-10"></select>
<select type="text" options="Default select,1-10"></select>
<select sm type="text" options="Small select,10-10"></select>
</form>
</mirror>
</example>
<example show>
<mirror>
<form>
<grid md="2,10">
<input lg type="text" label="Large label" placeholder="Large input">
<input sm type="text" label="Small label" placeholder="Small input">
</grid>
</form>
</mirror>
</example>
<example show>
<mirror>
<form>
<input type="text" label="Input with help text" help="A block of help text that breaks onto a new line and may extend beyond one line.">
</form>
</mirror>
</example>
<markdown>
## Buttons
To create stylised buttons use the `<btn>` tag. You can also add `btn` as an attribute to links (`<a>`) or `<input>`s. As with the Submit button in example below, you can override `type="button" with your own value`.
You can add any *brand color* as an attribute, as well as size (`xs`,`sm`,`md`,`lg`), and `block` for block-level buttons
</markdown>
<example show>
<mirror>
<btn primary>Button</btn>
<a btn info href="#">Link</a>
<input btn success type="submit" value="Submit">
<input btn danger value="Cancel">
</mirror>
</example>
<markdown>
You can add any *brand color* as an attribute, as well as size (`xs`,`sm`,`md`,`lg`), and `block` for block-level buttons
</markdown>
<example show>
<mirror>
<btn primary lg>Large Button</btn>
<btn success>Default Size</btn>
<btn warning sm>Small</btn>
<btn danger xs>Extra Small</btn>
<row>
<column>
<btn block>Block button (Default)</btn>
<btn block primary>Primary</btn>
</column>
<column>
<btn block success>Success</btn>
<btn block info>Info</btn>
</column>
<column>
<btn block warning>Warning</btn>
<btn block danger>Danger</btn>
</column>
</row>
</mirror>
</example>
<markdown>
## Images
There are shortcut attributes to make images `responsive` or centered (`center`).
You can also shape the image to a `circle` or give it `rounded` corners:
</markdown>
<example show>
<mirror>
<div style="text-align:center;">
<p>Responsive Centered</p>
<img src="img/pic1.jpg" responsive>
<p>Rounded</p>
<img rounded src="img/doge.png">
<p>Circle</p>
<img circle src="img/doge.png">
</div>
</mirror>
</example>
</template>