API Development

How-To: Full Page CSS 3 Layout (Desktop)

| Appcelerator |

Cross-browser full page layouts have long been a pain point for web developers. Luckily, for Titanium Desktop developers, you get to use all the CSS 3 goodness Webkit has to offer across all platforms! Today we’ll take a look at how to employ CSS 3 Box Layouts- check out some brief tutorials here. 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, the main content area that takes up the rest of the available space, and then a sidebar within that flexible space:

 

 

 

 

Main Content

 

 

 

 

Let’s style the app, header, content, and footer divs first:
html,body {margin:0;padding:0;}

#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 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 and run in the Titanium Developer desktop Sandbox), is embedded from Gist below: