Blueprint CSS Framework in MVC3

Blueprint CSS Framework is a very simple and neat but oh-so-powerful CSS framework that I love to use in my MVC projects. It significantly reduces the time it takes to improve the aesthetics of a new eww-looking MVC project. Furthermore, it provides a very solid, 960px grid CSS system to build on. So, you won’t have wasted time working with it.

With the advent of the super amazingly sexy Razor view engine (read more about its super amazingly sexiness blogged about by Scott Gu and many others), using Blueprint feels even more intuitive.

So, without further ado, here are the steps to how it can be set up.

Step 1: Get it! Download the files.

Step 2: Stare at awe at the files. The files that should interest you are in the /blueprint/ directory. Of these, ie.css, print.css, screen.css are minified versions of files you will find in the /bluprint/src/ folder.

Step 3: Include ‘em. Depending on your needs, you may or may not want to include print.css. Either way, include them in _Layout.cshtml that you can find in your /Views/Shared/ folder. Of course, remember to include the files of your interest to your project. If I put put them in my /Content/ folder, for example:

<link href="@Url.Content("~/Content/screen.css")" rel="stylesheet" type="text/css" />

Step 4: Style away!

<div class="container">
    <div class="span-24 prepend-top append-bottom last">
        <h1>Some Title</h1>
    </div>
    <div class="span-24 last">
        @RenderBody()
    </div>
</div>

You might have guessed that the CSS classes like container, prepend-top etc are being provided by Blueprint. What do they do? Exactly what they sound like. For example, the span-24 CSS class renders a column across the page 24 times span-1 which is 30px wide, by the by.

That should get you started with the framework. I’ll be writing a more extensive tutorial on Blueprint soon, so check back.

---