Contrary to the vast majority of responsive utilities developped, evfdm is not based on the media screen query. Instead, each viewport can have a different "media size" which will determine how the elements inside will respond. This allow for much more dynamic comportement (for instance, some part of the page being collapsed while other are not).
The possibilities are the same as the bootstrap grid.
Using a single set of .col-md-* grid classes, you can create a basic grid system that starts out stacked in extra small to small container before becoming horizontal on medium+ container. Place grid columns in any .row.
Build on the previous example by creating even more dynamic and powerful layouts with `.col-sm-*` classes.
Move columns to the right using `.col-md-offset-*` classes. These classes increase the left margin of a column by * columns. For example, `.col-md-offset-4` moves `.col-md-4` over four columns.
Easily change the order of our built-in grid columns with .col-md-push-* and .col-md-pull-* modifier classes.
Like in bootstrap, you can use the responsive class container to format content.
Green checkmarks indicate the element is visible in your current viewport.
Here, green checkmarks also indicate the element is hidden in your current viewport.
This directive is responsible for putting the proper ev-viewport-*size* class on a container depanding on its size. For performance reason it doesn't watch the width of the element. So each time a resize happens, the event module-layout-changed must be triggered in order for the class to update if the size has changed.
The default upper limits are are <300px very small, <450px small, <700px medium and >=700px large. They can be overriden.
It is possible to specify a max size and min size for viewport well, with the classes ev-min-*size* and ev-max-*size. For instance, if you want a viewport that don't go below md size, you can add ev-min-md
Below is a div with the class ev-min-sm et ev-max-md