Le App Frame
Attempts at perfecting the "app frame" look.
- Fixed Header/Footer *1
- Proper 100% width row sections
- Scrollable content area
- Media query for max height to reset header/footer (footer is still sticky*2)
- Uses hide-address-bar to normalize app frame in mobile browsers *3
- Fixed header/footer: Header and Footer both require their height to be set in the css.
- Sticky Footer: Footer will stay at the bottom of the screen if the page does not have enough content to push it lower. Footer requires its height to be set in the css.
- hide-address-bar is used because the app frame header and footer are not fixed on the initial scroll. After the first scroll, the header and footer css works as it should. By triggering this initial scroll event, we get the expected css behavior.
- Remove hide-address-bar hack
- Document the .l-body and .l-header height/padding magic
* Got something better? Fork it!