Blueprint CSS Framework in MVC3Posted: December 11, 2010
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.
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,
screen.css are minified versions of files you will find in the
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
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.