ch4o5/locomotive-boilerplate
Template
1
0
Fork 0
mirror of https://github.com/locomotivemtl/locomotive-boilerplate.git synced 2026-01-15 00:55:08 +08:00
Code Issues Projects Releases Wiki Activity

Update grid README

Browse Source
This commit is contained in:
Antoine Boulanger
2015-03-23 12:56:15 -04:00
parent 2c5cba9de5
commit c07834c3f8
1 changed files with 5 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
README.md
View File

@@ -55,11 +55,11 @@ We are using a simple inline-block grid system.
**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 helpers *(ex: `%third`, `%two-thirds`)*, inside a single block.
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 the classes names you want, inside a single block.
- 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 .
- Include the grid mixins in your components classes.
- Create custom width grid items by including the `grid__item` mixin and adding the widths you need or just include the helpers mixins with fractions like names.
- Add media queries, on the helpers mixins or on your custom components to change the grid items widths, for your content, on different screen sizes.
*[Demo](http://codepen.io/AntoineBoulanger/pen/EaLNxe)*