Add grid description to README
This commit is contained in:
18
README.md
18
README.md
@@ -35,3 +35,21 @@ Boilerplate for [`Charcoal`](#http://charcoal.locomotive.ca) projects by Locomot
|
||||
classes (e.g. `.hidden {}`).
|
||||
|
||||
*From [ITCSS](https://twitter.com/itcss_io)*
|
||||
|
||||
### Grid
|
||||
|
||||
We are using a simple inline-block grid system.
|
||||
|
||||
**Simple usage**
|
||||
|
||||
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 *(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.
|
||||
|
||||
*[Demo](http://codepen.io/AntoineBoulanger/pen/EaLNxe)*
|
||||
|
||||
Reference in New Issue
Block a user