Get the latest code from Github,
In continuation of my earlier blogs on Introduction to Spring MVC, in this blog I will talk about Kickstrap, Less and how Kickstrap can be integrated with our Spring MVC based bookstore application.
If you go to Kickstrap website they mention that it is Twitter Bootstrap on Steroids. It is heavily based on Less which is a dynamic stylesheet language. You can download Kickstrap from here.
Advantages of using Kickstrap is,
- We can achieve Responsive web design refer Responsive Web Design using Twitter Bootstrap, Spring MVC.
- Changing to different theme is easy
As a 1st step we need to copy the Kickstrap in the application folder as below,
The tiles definition in tiles.xml in Spring MVC is as below,
<tiles-definitions> <definition name="template" template="/WEB-INF/templates/template.jsp"> <put-attribute name="header" value="/WEB-INF/templates/header.jsp"/> <put-attribute name="footer" value="/WEB-INF/templates/footer.jsp"/> </definition> ... </tiles-definitions>
In the template.jsp you need to add Kickstrap.less and less-1.3.0.min.js as below,
<link rel="stylesheet/less" type="text/css" href="/bookstore-example-with-mvc/resources/css/kickstrap.less"> <script src="/bookstore-example-with-mvc/resources/css/Kickstrap/js/less-1.3.0.min.js"></script>
If you see the template.jsp, we use some of the css class of Kickstrap like “container”, “row-fluid” and others. row-fluid helps in responsive web design.
Changing to different theme
In Kickstrap changing to different theme is easy. Open the theme.less, currently we are using cerulean theme, as below
@import "Kickstrap/themes/cerulean/variables.less"; @import "Kickstrap/themes/cerulean/bootswatch.less";
Now run the below command and open the browser and type http://localhost:8080/bookstore-example-with-mvc,
mvn clean tomcat7:run
The theme looks as below,
Below are the themes when you drilldown Kickstrap folder as shown below,
If you want to change it to, let us say cyborg theme, you need to change kickstrap.less as below,
@import "Kickstrap/themes/cyborg/variables.less"; @import "Kickstrap/themes/cyborg/bootswatch.less";
Now run the below command and open the browser and type http://localhost:8080/bookstore-example-with-mvc, you will see the change in theme,
mvn clean tomcat7:run
The theme is changed and looks as below,
I hope this blog helped you.
Reference:
Pro Spring MVC: With Web Flow by by Marten Deinum, Koen Serneels