suprb/Nested — pull request #23 by jchatard (2013-10-15 17:10:41+00:00)
Title: Strategy for small resolutions + JSHint

This pull request contains two main things:

* JSHint code clean up
* Add small devices strategy (read what follows)

As a few other issues, I realized that Nested doesn't play nicely with small resolutions. The reason is in fact quite simple. When the horizontal resolution of the viewport is _smaller_ than an item width (especially when you have items defined as size21, size32, etc. i.e. items which are bigger than the smallest ones) Nested is not able to re-layout. Which makes sense.

What I needed to achieve for a responsive website was to reduce the size of all items so that they could fit on the screen. I, for example have items (size21) which are 600px wide, and as a consequence they don't fit on iPhones (320pt). The absolute positioning doesn't allow us to make them fit on the screen. So a part of those items are simply hidden.

After some time thinking about a way to handle this situation, I came to the conclusion that the best way would be to _disable_ Nested when the resolution of the viewport becomes smaller than the biggest item.

So I added a new setting `suspendBelow` which by default is `null` and thus does nothing more than before.

If you set this parameter to let say `600`, what happens is that as soon as the viewport reaches a horizontal resolution smaller than 600px wide, Nested is _suspended_ and all your items start behaving as they would if you had never fired Nested. Meaning, all your original CSS rules apply again. Of course, as soon as the resolution becomes again higher than 600px Nested re-applies its behavior.

The plugin does this during two different situations:

* on viewport resize
* when it's fired for the first time

The second situation is important, because this prevents small devices from crashing upon page load.

So this is not a plug and play solution. What you still need to do for small devices is to create CSS rules which _you_ think make sense for your project. So maybe I should add something, a class on the `

` tag for example to be able to target those 2 situations:

* when Nested is applied
* when Nested is suspended.

Hope all this make sense!

Cheers,
Jérémy