diff --git a/README.md b/README.md index f2d4cb7..5d3dfe0 100644 --- a/README.md +++ b/README.md @@ -12,63 +12,65 @@ As an introduction to this system: 1. Wrap everything in a div element with the `container` class. -'''html +```html
-''' +``` 2. To create rows add div elements with the `row` and `clearfix` classes. -'''html +```html
-''' +``` 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
-''' +``` 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
-''' +``` 4. To hide an element on mobile phones add the class `hide-mobile`. To hide on desktop, use `hide-desktop` instead. -'''html +```html
-''' +``` 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