Web Buzz Forum - Grails Templates and the 960 Grid System

Articles |
News |
Weblogs |
Books |
Forums

Artima Forums | Articles | Weblogs | Java Answers | News

Sponsored Link •

Web Buzz Forum
Grails Templates and the 960 Grid System

0 replies on 1 page.

Welcome Guest
Sign In

Back to Topic List

Reply to this Topic

Search Forum

Threaded View


Previous Topic		Next Topic

Flat View: This topic has 0 replies on 1 page

Ed Tennant

Posts: 46
Nickname: edt
Registered: Jan, 2009

Ed Tennant is a portal administrator and Grails developer.

Grails Templates and the 960 Grid System

Posted: Jan 26, 2009 3:04 PM

This post originated from an RSS feed registered with Web Buzz by Ed Tennant.
Original Post: Grails Templates and the 960 Grid System Feed Title: All the Way to the Beginning Feed URL: http://allthewaytothebeginning.blogspot.com/feeds/posts/default Feed Description: Beginning Groovy and Grails topics including books, training, developing with NetBeans, Grails plugins, and hosting.	Latest Web Buzz Posts Latest Web Buzz Posts by Ed Tennant Latest Posts From All the Way to the Beginning

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

Read: Grails Templates and the 960 Grid System

Previous Topic

Next Topic


	Web Artima.com