Grails Cookbook - A collection of tutorials and examples

How to Create Great Looking Grails User Interface (GUI)

I believe many developers are using Grails for small freelance projects. And since most developers are non-artistic, working with designs is difficult and consumes so much time.
A few years ago, I was mainly using RichUI and Grails-UI plugins. But since these plugins are just widget components, I still need to a design my own page layouts. It still does not solve the problem of creating a nice looking application while having no artist in the team.
Today, I no longer have this problem.

Twitter Bootstrap

There is a big chance that you already read about Twitter Bootstrap. It has revolutionized web design in recent time and now adopted by many top web sites.
If you are unfamiliar, it is a great library to boost a team's productivity when working with user interface concerns. It has a grid layout system that helps to easily build visual structures and layouts. It supports fixed, fluid, and responsive designs. It also have provisions for most things needed in a web application. E.g. typography, forms, buttons, navigation and other interface components.
When you download Bootstrap, it already contain several page layout and default design. If you need a quick look and feel, you can use these right away in your projects. The default examples already look great both on desktops and mobile devices.


You can copy the CSS, image, and Javascript files of downloaded Bootstrap package somewhere in your Grails web-app directory. Then create layout GSP files based from the sample HTML pages included in the package. Optionally, you can write custom tag library to shorten your HTML codes.

Free Themes

If you are bored with the stock Bootstrap examples, there are some sites that provides free ready made themes. Themes provided are usually just the same as the original package, but with new CSS and Javascript files for the new designs.
For free beautiful themes, you can take a look at Bootswatch. Here are some samples of their designs:


Beautiful Commercial Themes

If you are working on a project that needs a design to impress your clients, you can go for commercial themes. In my personal projects, I bought themes from WrapBootstrap with great success and results. They have a large collection of designs for different purposes. Each design are carefully crafted by professionals whose expertise are mainly in user interface. Plus, they also include many features not found in the original Bootstrap - all integrated with sample HTML pages.


When I was creating my own designs before, I typically spend around 1-3 weeks and still end up with something I'm not happy with. Even when I use great libraries such as Kendo UI and Wijmo. When I switched to WrapBootstrap, the time needed for user interface work dropped down to just few hours. And with results that I am definitely proud of.

Final Note

If you have found this post to be useful and has decided to try WrapBootstrap, I would appreciate if you could use this link for your purchase. Disclaimer: The links in this post to WrapBootstrap are affiliate links, and they will give me a minor portion of your purchase to me as commission. However you will not be paying more than other customers.
Tags: design, ui