How to integrate foundation in grails module to have better UI navigation

Foundation is an open source framework created in 2011 which includes best practices related to CSS and Jquery plugins. The goal behind Foundation product is to have something more fluid and important to work on different screens and on different orientations.

Faster to restyle.


faster to code.

faster to learn.


My purpose of this article is not to talk about history or different applications related to foundation, but just to show one case study ;)
I propose to show some recomandation of foundation integration in a grails project.
Steps to follow are simple :

1) Download foundation lib from the official web site
http://foundation.zurb.com/develop/download.html

You can choose as beginning Foundation Default CSS

2) Add Foundation CSS files to your project under ../web-app/css/foundation

    foundation.min.css : is core CSS of this lib, try to not modify this file
    foudation.css : can be customised with styles and themes that suit your app
    Example customising side of navigation bar
/* Side Nav */
.side-nav {
    display: block;
    margin: 0;
    padding: 0.875em 0;
    list-style-type: none;
    list-style-position: inside; }
.side-nav li {
    margin: 0 0 0.4375em 0;
    font-size: 0.875em; }
.side-nav li a {
    display: block;
    color: #2ba6cb; }
.side-nav li.active a {
    color: #4d4d4d;
    font-weight: bold; }
.side-nav li.divider {
    border-top: 1px solid;
    height: 0;
    padding: 0;
    list-style: none;
    border-top-color: #e6e6e6; }

3) Add Foundation JS files to your grails app under ../web-app/js/foundation

4) Include CSS styles in the header of your gsp main page
    And Do not forget to add JS scripts at the end depending on UI that you will use later
example
<script src="${resource(dir: 'js', file: 'foundation/foundation.section.js')}" type="text/javascript"></script>

For section

5) Now you can try to add some UI components like
side navigation
example

Horizontal Tab

<dl class="tabs" data-tab> <dd class="active"><a href="#panel2-1">Tab 1</a></dd> <dd><a href="#panel2-2">Tab 2</a></dd> <dd><a href="#panel2-3">Tab 3</a></dd> <dd><a href="#panel2-4">Tab 4</a></dd> </dl> <div class="tabs-content"> <div class="content active" id="panel2-1"> <p>First panel content goes here...</p> </div> <div class="content" id="panel2-2"> <p>Second panel content goes here...</p> </div> <div class="content" id="panel2-3"> <p>Third panel content goes here...</p> </div> <div class="content" id="panel2-4"> <p>Fourth panel content goes here...</p> </div> </div>

Or Top Bar for Navigation

<nav class="top-bar" data-topbar> <ul class="title-area"> <li class="name"> <h1><a href="#">My Site</a></h1> </li> <li class="toggle-topbar menu-icon"><a href="#">Menu</a></li> </ul> <section class="top-bar-section"> <!-- Right Nav Section --> <ul class="right"> <li class="active"><a href="#">Right Button Active</a></li> <li class="has-dropdown"> <a href="#">Right Button with Dropdown</a> <ul class="dropdown"> <li><a href="#">First link in dropdown</a></li> </ul> </li> </ul>
<!-- could add other sections on the left ;) -->
</section>
</nav>

See Documentation for more details.