Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Attempts at perfecting the "app frame" look.
JavaScript
branch: master

Fetching latest commit…

Cannot retrieve the latest commit at this time

Failed to load latest commit information.
css
fixed
fluid
js
max-width
README.md

README.md

Le App Frame

Attempts at perfecting the "app frame" look.

Examples

Features

  • 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

  1. Fixed header/footer: Header and Footer both require their height to be set in the css.
  2. 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.
  3. 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.

Todo

  • Remove hide-address-bar hack
  • Document the .l-body and .l-header height/padding magic

* Got something better? Fork it!

Something went wrong with that request. Please try again.