novoland-developer-networks/OfficialSite
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Update grid README for placeholder selectors grid

Browse Source
This commit is contained in:
Antoine Boulanger
2015-03-06 11:08:43 -05:00
parent 91be5a344f
commit 135a9d015b
1 changed files with 6 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
README.md
View File

@@ -40,16 +40,13 @@ Boilerplate for [`Charcoal`](#http://charcoal.locomotive.ca) projects by Locomot
We are using a simple inline-block grid system.
**Simple usage**
**Usage**
Insert a `.grid` block and add `.grid__item` elements inside it.
Insert a `%grid` block and add `%grid__item` elements inside it.
No rows that contain floats, no twelve columns system; just the number of items you want, with fractions like names helpers *(ex: `%third`, `%two-thirds`)*, inside a single block.
No rows that contain floats, no twelve columns system; just the number of items you want, with fractions like names *(ex: `.third`, `.two-thirds`)*, inside a single block.
**Extended usage**
- Extend the classes for more semantic ones to your components or use the classes as is.
- Create custom width grid items by extending the `grid__item` class and adding widths in a fraction format, with the `span()` function.
- Add media queries with the `$from` and `$to` variables to change the grid items widths, for your content, on different screen sizes.
- Extend the placeholder selectors *(`%`)* for more semantic ones to your components.
- Create custom width grid items by extending the `%grid__item` and adding widths in a fraction format, with the `span()` function.
- Add media queries, on the helpers selectors or on your custom components, with the `$from` and `$to` variables to change the grid items widths, for your content, on different screen sizes .
*[Demo](http://codepen.io/AntoineBoulanger/pen/EaLNxe)*