Integrating Kickstrap with Spring MVC application

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,

As a 1st step we need to copy the Kickstrap in the application folder as below,

kickstrap bookstore-app

kickstrap bookstore-app

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,

cerulean-theme

cerulean-theme

Below are the themes when you drilldown Kickstrap folder as shown below,

themes-bookstore-app

themes-bookstore-app

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,

cyborg-theme

cyborg-theme

I hope this blog helped you.

Reference:

Pro Spring MVC: With Web Flow by by Marten Deinum, Koen Serneels

About these ads

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s