Grails and YAML: A Match Made in Germany

Grails is lacking a robust and flexible CSS framework out of the box.  There are many popular CSS frameworks available today including 960 Grid System, Blueprint, and YUI Grids CSS, but one of my favorites is YAML, a.k.a. 'Yet Another Multicolumn Layout' which I use on the grailsblog.com website.   YAML is an open source CSS Framework by Dirk Jesse first released in October of 2005.  It's released under the Creative Commons Attribution 2.0 Germany License.  Let's take a look at how to integrate it into Grails.

  1. Create a new Grails application with 'grails create-app'
  2. Download the 'YAML Simple Project Example' from here and unzip it into a separate directory.  Once unzipped, you should see the following folders and files:

YAML Directory Structure

Figure 1.  YAML Directory Structure

  1. Copy the contents under the simple project's images directory into your Grails' application at projectname/web-app/images/yaml
  2. Copy the contents under the simple project's js directory into your Grails' application at projectname/web-app/js/yaml
  3. Copy the contents under the simple project's css directory into your Grails' application at projectname/web-app/css/yaml
  4. Copy the contents under the simple project's yaml directory into your Grails application at projectname/web-app/yaml
  5. Your Grails application web-app directory folder structure should now look like the following:

Grails web-app directory structure 

Figure 2.  Grails Application web-app Directory Structure

It won't work yet, but we're close.  Some modifications still need to be made to the YAML files we just copied into your Grails' project.

  1. Modify projectname/web-app/css/yaml/my_layout.css
    @import url(../../yaml/core/base.css);  /*  Modified  */

/* import screen layout | Screen-Layout einbinden */
@import url(../../yaml/navigation/nav_shinybuttons.css);  /*  Modified  */

@import url(screen/basemod.css);
@import url(screen/content.css);

/* import print layout | Druck-Layout einbinden */
@import url(../../yaml/print/print_003_draft.css);  /*  Modified  */
  2. Modify projectname/web-app/css/yaml/patches/patch_my_layout.css
    /* Layout independent adjustments | Layout-unabhängige Anpassungen ----------------------------------- */
@import url(../../../yaml/core/iehacks.css);  /*  Modified  */

/* Layout-dependent adjustments | Layout-abhängige Anpassungen --------------------------------------- */
@media screen, projection
{
  /**
   * Bugfix for IE 3-Pixel-Jog Bug
   *
   * @bugfix
   * @affected   IE 5.x/Win, IE6
   * @css-for    IE 5.x/Win, IE6
   * @valid      yes
   */

  * html #col3 { height: 1%; }
  * html #col1 {margin-right: -3px;}
  * html #col2 {margin-left: -3px;}
  * html #col3 { margin-left: 24%; margin-right: 24%; }

 /**
  * min-width/max-width workaround for IE5.x & IE6
  *
  * @workaround
  * @affected   IE 5.x/Win, IE6
  * @css-for    IE 5.x/Win, IE6
  * @valid      no
  */

  * html .page_margins {
    /* Fallback if JavaScript is disabled */
    width: 80em;

    /* JS-Expression for min-/max-width simulation */
  width: expression((document.documentElement && document.documentElement.clientHeight) ? ((document.documentElement.clientWidth < 740) ? "740px" : ((document.documentElement.clientWidth > (80 * 16 * (parseInt(this.parentNode.currentStyle.fontSize) / 100))) ? "80em" : "auto" )) : ((document.body.clientWidth < 740) ? "740px" : ((document.body.clientWidth > (80 * 16 * (parseInt(this.parentNode.currentStyle.fontSize) / 100))) ? "80em" : "auto" )));
  }
}
  3. Modify projectname/grails-app/views/layout/main.gsp, making sure to link to main.css before my_layout.css.  When you're done, it should look like the following:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>YAML | Simple Project Example</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <!-- (en) Add your meta data here -->
    <link rel="stylesheet" href="${createLinkTo(dir:'css',file:'main.css')}" />
    <!-- (de) Fuegen Sie hier ihre Meta-Daten ein -->
    <link rel="stylesheet" href="${createLinkTo(dir:'css/yaml',file:'my_layout.css')}" /> <!-- Modified -->
    <!--[if lte IE 7]>
    <link href="css/patches/patch_my_layout.css" rel="stylesheet" type="text/css" />
    <![endif]-->    
    <link rel="shortcut icon" href="${createLinkTo(dir:'images',file:'favicon.ico')}" type="image/x-icon" />
    <g:layoutHead />
    <g:javascript library="application" />
</head>
<body>
    <div id="spinner" class="spinner" style="display:none;">
        <img src="${createLinkTo(dir:'images',file:'spinner.gif')}" alt="Spinner" />
    </div>
    <div class="page_margins">
    	<div class="page">
    		<div id="header">
    			<div id="topnav">
    				<!-- start: skip link navigation -->
    				<a class="skip" href="#navigation" title="skip link">Skip to the navigation</a><span class="hideme">.</span>
    				<a class="skip" href="#content" title="skip link">Skip to the content</a><span class="hideme">.</span>
    				<!-- end: skip link navigation -->
    				<span><a href="#">Login</a> | <a href="#">Contact</a> | <a href="#">Imprint</a></span> </div>
    			<h1>YAML | «Simple Project» Template</h1>
    			<span>A YAML based Layout in a <em>ready to use</em> project structure</span></div>
    		<!-- begin: main navigation #nav -->
    		<div id="nav"> <a id="navigation" name="navigation"></a>
    			<!-- skiplink anchor: navigation -->
    			<div class="hlist">
    				<ul>
    					<li class="active"><strong>Button 1</strong></li>
    					<li><a href="#">Button 2</a></li>
    					<li><a href="#">Button 3</a></li>
    					<li><a href="#">Button 4</a></li>
    					<li><a href="#">Button 5</a></li>
    				</ul>
    			</div>
    		</div>
    		<!-- end: main navigation -->
    		<!-- begin: main content area #main -->
    		<div id="main">
    			<!-- begin: #col1 - first float column -->
    			<div id="col1">
    				<div id="col1_content" class="clearfix">
    					<h2>Column  #col1</h2>
    					<p>Left column content</p>
    				</div>
    			</div>
    			<!-- end: #col1 -->
    			<!-- begin: #col2 second float column -->
    			<div id="col2">
    				<div id="col2_content" class="clearfix">
    					<h2>Column  #col2</h2>
    					<p>Right column content</p>
    				</div>
    			</div>
    			<!-- end: #col2 -->
    			<!-- begin: #col3 static column -->
    			<div id="col3">
    				<div id="col3_content" class="clearfix"> <a id="content" name="content"></a>
    					<!-- skiplink anchor: Content -->
    					<h2>Column  #col3</h2>
    					<g:layoutBody /> 
    				</div>
    				<div id="ie_clearing"> </div>
    				<!-- End: IE Column Clearing -->
    			</div>
    			<!-- end: #col3 -->
    		</div>
    		<!-- end: #main -->
    		<!-- begin: #footer -->
    		<div id="footer">Footer with copyright notice and status information<br />
    Layout based on <a href="http://www.yaml.de/">YAML</a></div>
    		<!-- end: #footer -->
    	</div>
    </div>
</body>
</html>

That's it!  You have now successfully integrated YAML with your Grails project.  Feel free to tweek the CSS as you see fit and read more about how to use YAML here.

by Dean Del Ponte on April 10, 2009

| Comments (6)

Comments:

Screenprint?

by Patrick Haggood on April 10, 2009 at 9:15 AM CDT
A screenprint below for us YAML-neophytes would be greatly appreciated.

Great!

by ququjoy on April 10, 2009 at 9:56 AM CDT
Very useful infomation...I'm interested in integration of YAML and Grails recent days...

Awesome!

by Jose on April 11, 2009 at 10:53 AM CDT
Thanks for posting Dean.

Not working with GUI Date Objects

by vennela on June 30, 2009 at 5:48 PM CDT
Hi Dean, I am using GUI Date componet. and it is not working, alingment is wierd??? Any help how to sue GUI objects with YAML ??

version

by tw on September 22, 2009 at 9:08 AM CDT
which versions of both grails and yaml were you using?

Which Versions

by Dean Del Ponte on December 15, 2009 at 12:12 AM CST
At the time of this post, I was using Grails 1.0.5 and YAML 3.1
Subject*
Name*
Comment*