diff --git a/README.md b/README.md index 12bccb6..d8d1e52 100644 --- a/README.md +++ b/README.md @@ -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)*