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
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