Sunday, June 26, 2016

Grails3 Twitter Bootstrap installing a theme

So Grails 3 and twitter boostrap, where is the bootstrap plugin and how do I install a theme?
First there is no plugin (well there are some plugins that seem to modify your scaffoldin, fields plugin) but Grails 3 has bootstrap as standard really.

But you have bought a theme like Material and want to get it into your app.

Get Theme

So download the Material theme unpack it and run the setup (npm install).
Lets say we want to install the jQuery light theme your theme directory should have a structure similar to:
 --Export
     |
     +--AngularJs
     |
     +--Documenation
     |
     +--jQuery
          |
          +--dark
          |
          +--light
               |
               +--css
               |
               +--fonts
               |
               +--img
               |
               +--js
               |
               +--less
               |
               +--media
               |
               +--node_modules
               |
               +--vendors
               |
               Loads html

Copy the entire light directory into your grails directory at the assets location [app]/grails-app/assets
Rename it to material.

If you run the app, you should be able to access your theme material, with the urls like
http://localhost:8080/assets/index.html
http://localhost:8080/assets/css/demo.css

Material.gsp

Now take a material theme html page, like index.html and copy it into your [app]grails-app/views/layouts directory calling it something like material.gsp.

Now lets edit the material.gsp to take out content and render our grails app in there. Find the


<section id="content">

And replace all the content in it so it looks like this. Basically nothing but including a body 

<section id="content">
     <g:layoutBody/>
</section>

Replace all links to css and js includes directories to point to the new assets directory in material.gsp so these links

<link href="vendors/bower_components/fullcalendar/dist/fullcalendar.min.css" rel="stylesheet">
<script src="vendors/bower_components/jquery/dist/jquery.min.js"></script>

Become these

<link href="/assets/vendors/bower_components/fullcalendar/dist/fullcalendar.min.css" rel="stylesheet">
<script src="/assets/vendors/bower_components/jquery/dist/jquery.min.js"></script>

Use

Now we just need tell our page to use this new layout so go to your index.gsp and make the head look as follows (change the content) 
<head>
    <meta name="layout" content="material"/>
Now your index.gsp page should render in this new theme

Next Steps

This just quickly shows you how to get a theme in, you still need to change the navigation and add whatever content you want, but it is a start
Posted by at

1 comment:

Subscribe to: Post Comments (Atom)