Strategy for small resolutions + JSHint #23
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Added an setting `suspendBelow`. When set Nested will be _suspended_ at this resolution and below. As soon as the viewport becomes bigger that the width specified Nested is applied again. Code clean up using JSHint guidelines, still a few warnings about unused variables though.
Otherwise the container can be too short
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This pull request contains two main things:
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
suspendBelowwhich by default isnulland 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:
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:Hope all this make sense!
Cheers,
Jérémy