Screens - v1.0.0
- Initial Public Release
- Use Center Content with caution. If content is broken you may need to turn it off and center your content with Target.
- When using Jack, make sure that the scroll behavior is not set to fixed.
- Breakpoint - you can turn of snap scrolling at a certain screen width and revert to normal scrolling. This can solve lots of layout problems for small screens.
- Auto Scale - as long as the content is of a reasonable size, the autoscaling feature works really well for small screens.
AutoScaling is now handled intelligently on a per page basis
Turn it on in the Page Stack.
The main control is the Zoom
This changes the behaviour of the Min Width so that instead of just stopping the reduction in scaling at the Minimum it removes scaling completely and the Foundation mobile font sizes will be used.
A WORD ABOUT COLUMNS
Instead of using a 4 column stack, try using 2, 2 column stacks inside another 2 column stack - this will behave a lot better in an autoscaled environment when reduced to mobile sizes.
The AutoScale Algorithm
The new Autoscaling routine is setup to be specific to Screens. That is, it has a higher weighting towards the height than it does to the width - this ensures that your content should fit well to both extreme portrait (iPhone) and extreme Landscape (e.g. MacBook 1"1 & 13") situations.
AutoScale Is Not an excuse for poor content control
Don’t rely on autoscale, rely on good single page design practices. That said, it can make a huge difference in terms of difficult pages and also the finishe
Apply this to any fixed class elements on the page to make them compatible with Screens
Apply this to any elements that must retain normal scrolling behaviour within a page - e.g. maps
<li> elements with the parent class fp-bar (items in a menu) will have the class “active” added when the current page is equal to their position in the
screensUp : Class will trigger move page up event when clicked
screensDown : Class will trigger move page down event when clicked
screensSlideLeft : Class will trigger move page up event when clicked
screensSlideRight : Class will trigger move page down event when clicked
screensToTop : Class will trigger move to first page event when clicked
For more details check out the Screens Product Page. You can also view previous release notes.