All the Way to the Beginning: 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;
}

4 comments:

KevinJanuary 27, 2009 at 12:37 PM
Thanks for bringing this my attention. I think I will be adopting the 960 Grid System in future projects, looks VERY handy.
UnknownJanuary 27, 2009 at 9:26 PM
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.
UnknownJanuary 29, 2009 at 9:16 PM
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.
AnonymousSeptember 27, 2009 at 1:34 AM
Have a look at OOCSS. This framework sounds better to me.

Friday, January 23, 2009

Grails Templates and the 960 Grid System

4 comments: