[From the series - creating software books reviews grails web application]
In the previous post we have created home and admin page. Now it is time to create layout of the application. If you visit software books reviews site you can see that layout of the page is header and footer and three columns. If you are not a CSS expert creating such layout can be probably complex so it is good idea to use help of some CSS framework. My CSS framework is blueprint.
Blueprint is the grid based framework with the fixed width. Screen is divided into 24 columns and you can specify "boxes" and number of columns they should span through. The most important thing to remember is that sum of the box widths may not be bigger than 24. It can be smaller but not bigger.
The short example of the web page with the blueprint can look like this:
<div class="container">
<div id="one" class="span-24 last">
<!-- some content -->
</div>
<hr/>
<div id="two" class="span-4 colborder">
<!-- some content -->
</div>
<div id="three" class="span-14 colborder">
<!-- some content -->
</div>
<div class="span-4 last">
</div>
</div>
In this short code example the most important features of the blueprint framework are already visible.
The first div with class container is mandatory and blueprint will work inside this div.
<div id="one" class="span-24 last"> defines box that should spread through all 24 columns. This means that content will take the whole row of the screen. "last" class is used to specified that it is last box in the given row. This class has more sense when the sum of box widths is less than 24 but you want to put next box into the new row.
<hr> is blueprint tag that just makes more space between two rows.
Next three <divs> are actually more interesting. Here you are defining that row should be divided into three columns. First column of the width 4, next column of the width 14, and last column of the width 4. What you can notice immediately is that sum of these numbers is 22.
The reason is that class colborder separates two columns and actually takes the space of the whole column.
Now when we have basic knowledge about blueprint it is time to integrate it into our sbr application. The first step is to download the blueprint framework from their site. When you extract the downloaded zip file, copy the three css files from the blueprint folder. The file to copy are: ie.css, screen.css, and print.css.
You should copy them into web-app/css folder of the sbr application.
Now it is time to define layout of our application. As already mentioned we want that all pages are same and have header/footer and three columns: left, middle and right column. If you have read Starting with front-end in Grails application post then it should be clear that the right place where to specify this is the main.gsp template. This template specifies how all pages that are based on this template will look like. First of all we need to reference css files we have copied to the css folder. To do this change to grails-app/views/layouts/main.gsp to look like this:
<html>
<head>
<title><g:layoutTitle default="Grails" /></title>
<link rel="stylesheet" href="${createLinkTo(dir:'css',file:'main.css')}" />
<g:layoutHead />
<link rel="stylesheet" href="${createLinkTo(dir:'css',file:'screen.css')}" type="text/css" media="screen, projection" />
<link rel="stylesheet" href="${createLinkTo(dir:'css',file:'print.css')}" type="text/css" media="print" />
<link rel="stylesheet" href="${createLinkTo(dir:'css',file:'ie.css')}" type="text/css" media="screen, projection" />
<g:javascript library="application" />
</head>
<body>
<g:layoutBody />
</body>
</html>
The three lines to notice are:
<link rel="stylesheet" href="${createLinkTo(dir:'css',file:'screen.css')}" type="text/css" media="screen, projection" />
<link rel="stylesheet" href="${createLinkTo(dir:'css',file:'print.css')}" type="text/css" media="print" />
<link rel="stylesheet" href="${createLinkTo(dir:'css',file:'ie.css')}" type="text/css" media="screen, projection" />
They are added as specified by the blueprint framework. The only difference is that I have used createLinkTo grails construct.
Now when we are referencing necessary css files we can specify layout of the template.
<html>
<head>
<title><g:layoutTitle default="Grails" /></title>
<link rel="stylesheet" href="${createLinkTo(dir:'css',file:'main.css')}" />
<g:layoutHead />
<link rel="stylesheet" href="${createLinkTo(dir:'css',file:'screen.css')}" type="text/css" media="screen, projection" />
<link rel="stylesheet" href="${createLinkTo(dir:'css',file:'print.css')}" type="text/css" media="print" />
<link rel="stylesheet" href="${createLinkTo(dir:'css',file:'ie.css')}" type="text/css" media="screen, projection" />
<g:javascript library="application" />
</head>
<body>
<div class="container">
<div id="header" class="span-24 last">
header
</div>
<hr/>
<div id="left-sidebar" class="span-4 colborder">
left sidebar
</div>
<div id="content" class="span-14 colborder">
<g:layoutBody />
</div>
<div id="right-sidebar" class="span-4 last">
right sidebar
</div>
<hr/>
<div id="footer" class="span-24 last">
footer
</div>
</div>
</body>
</html>
As you can see that is quiet easy and understandable. And what is good it is all what we need to the to get required layout. If you start the application now you will see that home page of the sbr application has correct layout. Of course we still need to populate all parts with the real content but that will be part of the next posts.
I know that usually I am announcing what will be topic of the next post but this time I am not sure. But for sure good reading is introduction into grails templates and tag libs mechanism that I have described in this and this post.
P.S. Don't forget to write some review or post summary on the software books reviews.
2 comments:
Very nice example for using Blueprint; I've written many web apps but my CSS is severely lacking; I think this one post may have transformed the look of all my apps to come. Thanks!
BTW, where do I post a review on SBR? I went to the site you linked in your article but there's no obvious reference to where I should comment on this blog entry; or are you recommending a general comment on *any* grails books I've read?
I am glad that this post helped and you find it useful.
Regarding SBR, general idea is that software developers write reviews of the software book they have read.
You can write review for the book that is already in the database by clicking 'post review' in the book details.
If the book is not in database you can click 'Post Review' in the navigation area and then provide title and review of the book.
Post a Comment