Ember Flex Grid
Ember components for a responsive, mobile-first grid system based on flex.
Installation
npm install --save-dev ember-flex-grid
Usage
Now, you can use the grid with the following:
{{#flex-grid}} {{#flex-grid-row}} {{#flex-grid-item columns=2}} {{! ... }} {{/flex-grid-item}} {{#flex-grid-item columns=10}} {{! ... }} {{/flex-grid-item}} {{/flex-grid-row}} {{#flex-grid-row}} {{#flex-grid-item columns=12}} {{#flex-grid-row}} {{#flex-grid-item columns=4}} With {{/flex-grid-item}} {{#flex-grid-item columns=4}} Nested {{/flex-grid-item}} {{#flex-grid-item columns=4}} Grids {{/flex-grid-item}} {{/flex-grid-item}} {{/flex-grid-row}}{{/flex-grid}}
Using the viewport options:
{{#flex-grid}} {{#flex-grid-row}} {{#flex-grid-item columns=2 viewport='sm'}} 2 {{/flex-grid-item}} {{#flex-grid-item columns=10 viewport='sm'}} 10 {{/flex-grid-item}} {{/flex-grid-row}}{{/flex-grid}}
TODO
- Viewport support
- Improve viewport support, so one can set column numbers for multiple viewport sizes
- Update flex grid CSS
- Use prefixed CSS
Development
Installation
git clone
this repositorynpm install
bower install
Running
ember server
- Visit your app at http://localhost:4200.
Running Tests
ember test
ember test --server
Building
ember build
For more information on using ember-cli, visit http://www.ember-cli.com/.
License
MIT
Contributing
- Fork it
- npm install
- bower install
- Create your feature branch (
git checkout -b my-new-feature
) - Commit your changes (
git commit -am 'Add some feature'
) - Push to the branch (
git push origin my-new-feature
) - Create new Pull Request
Crafted with <3 by John Otander.