<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>   &lt;div id="hello"&gt;world&lt;/div&gt;   </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 &amp; Bordered</h4>
<table striped condensed bordered lorem="4x5"></table>
<h4>Hover &amp; 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&mdash;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&mdash;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>