Full Page CSS3 Layouts - LemontechSA/TideSDK GitHub Wiki

Cross-browser full page layouts have long been a pain point for web developers. Luckily, for TideSDK developers, you get to use all the CSS 3 goodness Webkit has to offer across all platforms!

Lets look at how to employ CSS 3 Box Layouts. Check out some brief tutorials:

• Introducing the Flexible Box Layout Module
• CSS3 Flexbox Part 1

Using a few lines of CSS, we can create a flexible fullscreen layout that automatically resizes along with our window. First, we'll create the markup for the page. In this case, we'll want to have a header, a footer, a main content area that takes up the rest of the available space, and then a sidebar within that flexible space:

<div id="app"> 
  <div id="header">This is the header</div> 
  <div id="content"> 
    <div id="sidebar">Sidebar</div> 
    <div id="main">Main Content</div> 
  </div> 
  <div id="footer"> 
  © 2010 Awesome Productions Ltd.
  </div> 
</div> 

Let's style the app, header, content, and footer divs first:

#app { 
height:100%; 
/* This sets the containing element up to use a box layout */ 
display: -webkit-box; 
/* We want to layout our first container vertically */ 
-webkit-box-orient: vertical; 
/* we want our child elements to stretch to fit the container */ 
-webkit-box-align:stretch; 
} 

#header { 
height:50px; 
background-color:#cdcdcd; 
} 

#footer { 
height:30px; 
background-color:#cdcdcd; 
} 

#content { 
/* content should take up 100% of the rest of the space */ 
-webkit-box-flex:1; 
}

That's a good start - here's what the app would like like at this point:

Now we need to set up the horizontal alignment of our main content. We need to modify the styling for #content to use a horizontal box layout, and set -webkit-box-flex on the #main div to instruct it to take up the rest of the available space:

#content { 
-webkit-box-flex:1; 
display: -webkit-box; 
-webkit-box-orient: horizontal; 
-webkit-box-align:stretch; 
} 

#sidebar { width:120px; background-color:#676767;} 

#main { 
-webkit-box-flex:1; 
background-color:green; 
}

Now, when we launch our app, we've successfully realized our resizable, flexible layout:

CSS 3 FTW! Hopefully this technique will be useful to you when creating your next desktop application's layout. The complete source code for this application, which you should be able to drop in to a fresh Desktop project and run, is provided in this gist

The following copyright and attribution applies to this document:

• Copyright © 2012 Appcelerator Inc. All rights reserved.
• Copyright © 2012 David Pratt (for TideSDK). All rights reserved.

CONTRIBUTORS:

• David Pratt