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;
}
