Fix markdown syntax in README

This commit is contained in:
Tyler Hallada 2014-07-11 18:28:07 -04:00
parent 03a340a225
commit 031b61b91e

View File

@ -12,63 +12,65 @@ As an introduction to this system:
1. Wrap everything in a div element with the `container` class.
'''html
```html
<div class="container"></div>
'''
```
2. To create rows add div elements with the `row` and `clearfix` classes.
'''html
```html
<div class="container">
<div class="row clearfix"></div>
</div>
'''
```
2. To create columns add div elements with the `column` class. Then add a class
to describe the width of the column with respect to the container. The possible
widths are:
* full: 100% width
* two-thirds: 66.7% width
* half: 50% width
* third: 33.3% width
* fourth: 25% width
* three-fourths: 75% width
CSS class name | width percentage
--------------- | ----------------
full | 100%
two-thirds | 66.7%
half | 50%
third | 33.3%
fourth | 25%
three-fourths | 75%
These are purely for convienence. A more precise width can be specified in the
CSS if desired with the `width` attribute.
'''html
```html
<div class="container">
<div class="row clearfix">
<div class="column full"></div>
</div>
</div>
'''
```
3. Columns stack up right to left. To force a column out of order all the way to
the right use the `flow-opposite` class on the column.
'''html
```html
<div class="container">
<div class="row clearfix">
<div class="column half"></div>
<div class="column half flow-opposite"></div>
</div>
</div>
'''
```
4. To hide an element on mobile phones add the class `hide-mobile`. To hide on
desktop, use `hide-desktop` instead.
'''html
```html
<div class="container">
<div class="row clearfix">
<div class="column half hide-mobile"></div>
<div class="column half hide-desktop"></div>
</div>
</div>
'''
```
5. Another note: I use [box-sizing (as suggested by Paul
Irish)](http://www.paulirish.com/2012/box-sizing-border-box-ftw/), which I think