Friday, January 23, 2009

Grails Templates and the 960 Grid System

I stumbled across the 960 Grid System and wanted to see if it could serve as the layout foundation in a Grails application. I am pleased with the results and believe this will help speed up the initial design of new web sites. Having read several articles and blog posts demonstrating the use of templates in Grails, I could have started from scratch but decided to follow along with Mo and add the 960 Grid System to the mix.

My first impression was, "That's a lot of stylesheets!" It took me awhile to decide if I liked the modularization of the CSS but I grew to appreciate it because it helped me focus. This is the same reason I like breaking a layout into Grails templates. I haven't tried to make the result look good yet, it is intended to demonstrate a quick way to customize the structure of your layouts.

I ended up with five templates stored in a folder named common. I added a stylesheet specific to the application named layout.css since I named the application layout. Later I decided that was a confusing name but luckily this is just a quick proof of concept. I did not include the standard main.css but of course you can if desired.

The only feature of 960 Grid System that didn't perform as I wanted it to right out of the box (no offense Dave Klein) was centering the page in Internet Explorer. In order to center the page in IE I added the wrapper div with text-align: center. This required me to tweak container_12 to return everything to text-align: left. This demonstrates a very simple example but it should be easy to see how you could use Grails templates and the 960 Grid System to create just about any fixed layout you could want.

Here is main.gsp:
<html>
<head>
<title><g:layouttitle default="Layout Example"></title>
<link rel="stylesheet" href="${createLinkTo(dir:'css',file:'reset.css')}">
<link rel="stylesheet" href="${createLinkTo(dir:'css',file:'960.css')}">
<link rel="stylesheet" href="${createLinkTo(dir:'css',file:'text.css')}">
<link rel="stylesheet" href="${createLinkTo(dir:'css',file:'layout.css')}">
<g:layouthead>
</head>
<body>
<div id="wrapper">
<div class="container_12">

<div class="grid_12">
<g:render template="/common/topbar">
</div>

<div class="grid_12">
<g:render template="/common/header">
</div>

<div class="grid_12">
<g:render template="/common/menu">
</div>

<div class="grid_8">
<div id="content">
<g:layoutbody>
</div>
</div>

<div class="grid_4">
<g:render template="/common/sidepanel">
</div>

<div class="clear">

<div class="grid_12">
<g:render template="/common/footer">
</div>

</div>
</div>
</body>
</html>

Here is layout.css:
body
{
background: #99BADD;
}

#wrapper {
text-align: center;
}

.container_12 {
text-align: left;
}

#topbar {
background: url(../images/30-y.gif) repeat-x;
height: 30px;
margin-top: 20px;
}

#header {
background: url(../images/120-y.gif) repeat-x;
height: 120px;
text-align: center;
margin-top: 20px;
}

#menu {
background: url(../images/60-y.gif) repeat-x;
height: 60px;
margin-top: 20px;
}

#content {
background: url(../images/620-x.gif) repeat-y;
width: 620px;
margin-top: 20px;
}

#sidepanel {
background: url(../images/300-x.gif) repeat-y;
width: 300px;
margin-top: 20px;
}

#footer {
background: url(../images/45-y.gif) repeat-x;
height: 45px;
text-align: center;
margin-bottom: 20px;
}

5 comments:

  1. Thanks for bringing this my attention. I think I will be adopting the 960 Grid System in future projects, looks VERY handy.

    ReplyDelete
  2. Looks like I will need to revisit this topic with Grails 1.1, Automatically make templates available as GSP tags. This is going to be sweet.

    ReplyDelete
  3. I was working on a reasonable palette today and realized I didn't have a doctype defined. IE was using quirks mode. Once that was corrected the wrapper div wasn't necessary for centering the page. Next I am going to see if the new navigation plugin can be used instead of a menu template.

    ReplyDelete
  4. Thanks for writing this blog. My previous code was based on a custom layout but it was getting troublesome with IE and writing the css classes. I first used 960 to design a static layout structure and it was working fine with IE, Chrome and Firefox but as soon as i pushed it into grails gsp things went not as planned. i realized that my initial work was also fine but grails was just messing around itself. i really didnt want to put any css hacks but i guess now i have to. though its strange that it still works well with chrome and firefox. does anyone know why grails has a pms system for IE.

    ReplyDelete
  5. Have a look at OOCSS. This framework sounds better to me.

    ReplyDelete