Nested
Nested copied to clipboard
suprb
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 <body> 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
