Created
February 14, 2015 01:13
-
-
Save sondreb/a6294e9cc1fc32a937a0 to your computer and use it in GitHub Desktop.
Game (app) layout using flex-layout, works on IE, FireFox and Chrome
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>Game Title</title> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no"> | |
| <style> | |
| *, *:before, *:after | |
| { | |
| box-sizing: border-box; | |
| } | |
| html, body | |
| { | |
| width: 100%; | |
| height: 100%; | |
| margin: 0; | |
| padding: 0; | |
| } | |
| body | |
| { | |
| display: flex; | |
| flex-direction: column; | |
| flex: 1; | |
| } | |
| header | |
| { | |
| background-color: black; | |
| color: white; | |
| text-align: right; | |
| font-size: 2em; | |
| padding: 10px; | |
| border-bottom: 1px solid black; | |
| } | |
| footer | |
| { | |
| background-color: gray; | |
| padding: 5px; | |
| border-top: 1px solid black; | |
| } | |
| .nav-content | |
| { | |
| flex: 1; | |
| display: flex; | |
| flex-direction: row; | |
| } | |
| .nav-content-left | |
| { | |
| background-color: green; | |
| width: 200px; | |
| display: flex; | |
| flex-direction: column; | |
| border-right: 1px solid black; | |
| } | |
| .nav-content-right | |
| { | |
| flex: 1; | |
| overflow: auto; | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| .actions | |
| { | |
| background-color: gray; | |
| flex: 1; | |
| padding: 5px; | |
| } | |
| .map | |
| { | |
| height: 100px; | |
| background-color: : green; | |
| border-top: 1px solid black; | |
| } | |
| #board | |
| { | |
| background-color: silver; | |
| width: 100%; | |
| height: 100%; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- | |
| This is a great foundation for a game, app or website, that uses flex styling to create a 100% width/height UI. | |
| No fuzz, no extra containers, bare-bone and works for all modern browsers, IE, Chrome and FireFox. | |
| --> | |
| <header> | |
| Game Title | |
| </header> | |
| <div class="nav-content"> | |
| <div class="nav-content-left"> | |
| <div class="actions">UserName: 100</div> | |
| <div class="map">The World Map</div> | |
| </div> | |
| <div class="nav-content-right"><canvas id="board"></canvas></div> | |
| </div> | |
| <footer> | |
| Copyright and Status | |
| </footer> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment