Adding the Blueprint Toolkit to your Spring Webapp

If you’ve ever taken a look at the Spring MVC sample code, you’ll notice that the screens have a certain style and digging deeper into the JSPs you’ll find that the apps use a number of CSS classes with their <div>s tag such as container and span-12. It turns out that these belong to a CSS Framework called Blueprint and is available to download from either the Blueprint website (http://www.blueprintcss.org/) or from GIT Hub at: git://github.com/joshuaclayton/blueprint-css.git.

Adding Blueprint to your pages is simple, just copy the blueprint directory to your webapp directory, and then reference it from your HTML page by adding the following:

<link rel="stylesheet" href="css/blueprint/screen.css" type="text/css" media="screen, projection">
  <link rel="stylesheet" href="css/blueprint/print.css" type="text/css" media="print"> 
  <!--[if lt IE 8]>
    <link rel="stylesheet" href="css/blueprint/ie.css" type="text/css" media="screen, projection">
  <![endif]-->

…adjusting the directory path accordingly, or if you're using JSPs, then you may want to add something like:

<link rel="stylesheet" href="<c:url value='/resources/blueprint/screen.css'/>" type="text/css" media="screen, projection"/>
  <link rel="stylesheet" href="<c:url value='/resources/blueprint/print.css'/>" type="text/css" media="print" /> 
  <!--[if lt IE 8]>
    <link rel="stylesheet" href="<c:url value='/resources/blueprint/ie.css' />" type="text/css" media="screen, projection" />
  <![endif]-->    

You can also add in some fancy fonts by using the following CSS file:

<!-- Import fancy-type plugin for the sample page. -->
  <link rel="stylesheet" href="<c:url value='/resources/blueprint/plugins/fancy-type/screen.css' />" type="text/css" media="screen, projection" />

To get you started, there is a good tutorial available on the Blueprint website.