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.

Role of a leader in an innovative process        

Everybody knows that being an engineer means also having ability to motivate a group. But what pepole ignore is influencing a group and let them do what they have to do and in their best way is an art.

I remember when i attended to a workshop organised by federation of Junior Entreprise connecting all JE around the world. The main purpose of this workshop was to explain how each person has her own role in the innovation process. This can totally be applicated in an innovative project.

The speaker who was one of executive manager in Phillips explained this topic. So what i realize is the role of this person having the responsibility of motivating, managing his team and affecting them tasks has to be an artist to success his work specially when we talk about innovation.