Grails and BluePrintCSS

In this post, I try out the BluePrint CSS framework and try to see its advantages for making skinning a Grails based project faster and easier.

We recently launched a project which heavily used Ajax and Grails. One of the biggest challenges we saw in this project was the lack of standards when it came to skinning the site via CSS. I was surprised at the amount of hack-and-slash coding that I saw from people who did CSS for a living.

Halfway through the project, I ran into this article on Digg, and saw that Ryan Feeley had posted on his twitter that he had redone his site on the BluePrint CSS framework. I had heard of CSS frameworks before, but it seemed that it was only recently that they have come into vogue. Can they be the solution to our Grails skinning woes?

A CSS framework is nothing more than a set of well-tested, browser compatible stylesheets created by people smarter than me. I can imagine they went through the same pain of trying to get this right. The BluePrintCSS framework is particularly nice because it provides a nice reset of all the browser defaults, and gives you a nice 24 column layout to play with.

Installation

To get started on BluePrint on Grails, download it and copy the files under the blueprint directory into your application’s web-app/css directory.

I put all my files under web-app/css/blueprint

Then, you have to modify your gsp pages to reference this. Since I want all my pages to be blueprinted, I simply edit my main layout gsp located at grails-app/views/layouts/main.gsp

I add the following lines AFTER the main.css stylesheet

<link rel="stylesheet" href="${createLinkTo(dir:'css/blueprint',
 file:'screen.css'}" type="text/css" media="screen, projection">

<link rel="stylesheet" href="${createLinkTo(dir:'css/blueprint',
 file:'print.css'}" type="text/css" media="print">

<!--[if IE]><link rel="stylesheet" href="${createLinkTo(dir:'css/blueprint',
 file:'ie.css'}" type="text/css" media="screen, projection"><![endif]-->

Notice that I changed the css references into Grails createLinkTo tags. The reason I call this after the main css is so that blueprint overrides the default grails template dialogs with it’s own error and success messages.

I also need to add a div with the class container around the area I want BluePrinted. In my case, the whole thing. At the end, my main.css file looks like this

That’s it! Now my grails app has been blueprinted and I can use BluePrintCSS in my code.

OK. We’re not really really done. BluePrintCSS also comes with a few plugins that give you additional functionality. It would make sense to write a Grails tag library for these, and include on each page as needed.

You might also want to modify the default Grails scaffolding templates to move away from their current layout into a table-free/less display and adapt the form.css elements in bluePrintCss. To do so, call grails install-templates and edit your scaffolding your /src/templates/scaffolding directory.

BluePrintCSS in Action

I can spend a lot of time trying to explain how this is better, but you can see it in the blueprintCSS demo page

Yay Blueprint!

So what are the advantages of using this stuff rather than having your highly skilled team of overworked CSS designers do this from scratch? I see four core advantages:

1. Consistency: Blueprint almost brings the convention over configuration paradigm of grails into CSS design, by providing sensible defaults, the team does not need to guess and invent new styles for each of your attributes. Moreover, the framework provides validation and compression scripts for you to define your own core styles based on each project. It makes the work for the designer and front-end developer more predictable and systematic.

2. Style re-use: By using Blueprint as a base, you reduce the amount of new CSS you write.

3. Cross-browser / media compatibility: Blueprint has cross browser fix for IE. If you have ever worked with ie6 ( the dark pits of hell ), then you will appreciate not having to rewrite different parts and pieces of your css. By providing a print css file, it also reduces the amount of new work put in by the designer. If you look into the core of BluePrint, you’ll see that Blueprint also resets a lot of browser specific annoyances, such as the border on images and such. This makes starting with clean CSS files much much simpler.

4. Power: One of the great things about bluePrint is the new flexible grid layout it provides. Essentially, your screen is divided into 24 sections, and you place your divs on the screen by calling <div class=”span-4″></div> to set the location of your content. This eliminates a lot of the woes in div positioning, and it abstracts much of the absolute / relative positioning issues that you find in CSS.

Overall, I really like the idea of Blueprint. It takes out a lot of the creative uncertainty that comes with styling CSS files and forces a consistent yet versatile skeleton to projects. It will definitively be one of the first things I install on the next project I start in Grails.

Of course, the natural next question: Is there a Flex CSS Framework? Is this needed?

7 thoughts on “Grails and BluePrintCSS

  1. Pablo

    Thank you very much! I always have problems with CSS and this could be very helpful.

    PS: The demo page link has an extra “> at the end and is not working properly.

    Reply
  2. Ted Naleid

    We’ve been using the BlueTrip css framework with our grails app and overall have been pretty happy with it. It’s a mixture of some of the parts of BluePrintCSS and Tripoli CSS frameworks.

    I think using a CSS framework can be very helpful for cranking out something quickly and especially if there are developers on your team without a bunch of CSS experience.

    Reply
  3. Jeremy Leipzig

    You’ll notice blueprint will screw up the bottom of grails sortable tables.

    specifically:
    table {margin-bottom:1.4em;width:100%;}
    in the screen.css file
    you’ll probably want to comment this out

    Reply
  4. fredrik

    @Jermey Leipzig

    If you don’t want use the default blueprint tables (or other blueprint elements), instead of commenting them out you can place the main.css as the last css to read in.

    I’ve experienced that it’s best to leave the blueprint files as they are since it makes updating much easier. You just replace them, but if you have done changes you need to save them somehow. I usually keep all my customizations in separate files.

    Reply

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s