Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/p3drosola/css-mobile-app-layout
CSS only mobile app layout boilerplate
https://github.com/p3drosola/css-mobile-app-layout
Last synced: 8 days ago
JSON representation
CSS only mobile app layout boilerplate
- Host: GitHub
- URL: https://github.com/p3drosola/css-mobile-app-layout
- Owner: p3drosola
- Created: 2014-08-18T15:32:55.000Z (about 10 years ago)
- Default Branch: master
- Last Pushed: 2014-08-19T11:58:32.000Z (about 10 years ago)
- Last Synced: 2024-08-06T03:01:58.822Z (3 months ago)
- Homepage:
- Size: 191 KB
- Stars: 1
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# CSS Only Mobile App Layout
As we all know HTML + CSS were designed for styling documents.
Building an application layout where the screen is split up into various areas, vertically and horizontally is not easy.
Especially as those areas start expanding, collapsing & scrolling.
Buy using [display:table](http://caniuse.com/css-table), absolute positiong, and nesting elements properly we can arrive at a workable solution that doesn't require hard-coding positioning values all over the place.
This is not a revolutionary concept. It's more like "let me just put it here so I'll use it next time, instead of spending an hour figuring it out".
And maybe it'll save you some time too.
[Try the demo](https://rawgit.com/p3drosola/css-mobile-app-layout/master/index.html). Use the buttons to toggle the various elements, and watch the layout adapt itself. Then read the source, there's literally only about 30 lines that are remotely interesting.
### Tab bars
In Andorid the tab bar is between the header & the content. While in iOS it's stuck to the bottom of the screen. Since we're using document flow to get the height to adapt itself we're dependant on the DOM order. So we're generating two tab bars. You'd use your JS framework to show/hide the right one.
### Status bar
This is the pink row above the main block. We needed it our app to show network status, but you might not need it. I left it because it shows how to use nesting to avoid hard-coding positioning values.
## Screenshots iOS
## Screenshots Android
