Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Integrating Kickstrap with Spring MVC application

DZone's Guide to

Integrating Kickstrap with Spring MVC application

· Java Zone
Free Resource

What every Java engineer should know about microservices: Reactive Microservices Architecture.  Brought to you in partnership with Lightbend.

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





 

Microservices for Java, explained. Revitalize your legacy systems (and your career) with Reactive Microservices Architecture, a free O'Reilly book. Brought to you in partnership with Lightbend.

Topics:

Published at DZone with permission of Krishna Prasad, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

The best of DZone straight to your inbox.

SEE AN EXAMPLE
Please provide a valid email address.

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.
Subscribe

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}