https://github.com/eddywashere/le-app-frame

Attempts at perfecting the "app frame" look.
https://github.com/eddywashere/le-app-frame

Last synced: 25 days ago
JSON representation

Attempts at perfecting the "app frame" look.

• Host: GitHub
• URL: https://github.com/eddywashere/le-app-frame
• Owner: eddywashere
• Created: 2012-10-08T13:50:51.000Z (about 12 years ago)
• Default Branch: master
• Last Pushed: 2012-12-27T04:32:13.000Z (almost 12 years ago)
• Last Synced: 2024-04-10T09:57:03.282Z (7 months ago)
• Language: JavaScript
• Homepage:
• Size: 148 KB
• Stars: 1
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Le App Frame

Attempts at perfecting the "app frame" look.

### Examples

- Fluid

- Fixed Width

- Max-Width / Responsive

### 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](https://github.com/scottjehl/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](https://github.com/scottjehl/Hide-Address-Bar) hack

- Document the .l-body and .l-header height/padding magic



* Got something better? Fork it!