Appcelerator Blog

The Leading Resource for All Things Mobile

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

0 Flares 0 Flares ×

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 and 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, a 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 like at this point:

midway 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:

finished

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:

0 Flares Twitter 0 Facebook 0 Google+ 0 LinkedIn 0 Email -- 0 Flares ×

Sign up for updates!

Become a mobile leader. Take the first step to scale mobile innovation throughout your enterprise.
Get in touch
computer and tablet showing Appcelerator software
Start free, grow from there.
0 Flares Twitter 0 Facebook 0 Google+ 0 LinkedIn 0 Email -- 0 Flares ×