Part 2 – Starting the Project and Bootstrap Integration
In the previous article. I defined the user stories for the web site RateMyMehndi.com as well as I selected the technologies that I would be using to build this application. In this blog post I will directly dive into starting the project, and integrating it with Twitter Bootstrap to get a rich HTML5 template ready to start building our application.
Setting up the Visual Studio Project
Before you get started with the project make sure that you have ASP.NET MVC 4 installed for Visual Studio else you can download it from ASP.NET MVC 4 Beta. Once you have everything in place, fire up Visual Studio (as administrator since we want to create a new IIS project) got to File menu –> New Project to bring up the New Project dialog (Figure 1 below).
Figure 1: New Project dialog
Expand the Visual C#, Web project templates and select the ASP.NET MVC4 Web Application template. You can also see that I prefer to store my project in the c:\apps folder rather than in My Documents folders which Visual Studio tries to save by default. You can choose where you want to save your folder so that you can easily access it later. I have also provided the name of the project and solution as RateMyMehndi. Click OK to create the project, and VS opens the New ASP.NET MVC4 Project (Figure 2) dialog.
Figure 2: New ASP.NET MVC4 Project
There are different MVC4 templates provided by Microsoft which act as starting points for different kinds of applications. I want to start from scratch so I select the Basic template and click OK to create the project. Visual Studio will go ahead and create an empty MVC4 project with basic JavaScript's and some other plumbing files but no controllers. If you do not want any JavaScript files to be generated then Empty project template can also be selected. Now we have the project setup we can move ahead with building our application.
Setting up HTML5, CCS3 boilerplate template
UI Design and consistency of UI is one of the most important aspects of any website. Since I plan to use HTML5 instead of starting the UI from scratch there are some very useful HTML5 based boilerplate templates which not only provide a standards compliant HTML5 markup but are also supplied with a rich CSS3 and JavaScript framework making it very easy to build good looking, consistent and standards compliant websites very quickly. These templates also provide responsive layouts for mobile browsers. There are a wide variety of websites offering such templates like 960 Grid System, 1kb Grid, Blueprint CSS, one of the most popular and widely used template system from Twitter Bootstrap, HTML5 Boilerplate and Initializr which uses the HTML5 Boilerplate template but provides far more flexible options. Template systems like HTML5 Boilerplate go a step ahead and also provide lots of commonly used IE hacks as well as other important tags and scripts to make your development experience faster. Which template system is the best? Well it totally depends on what are the needs of your project, each one of them allows you to configure the various elements of the template and download a custom version so that the size of the template is at minimum. Its interesting to see how much effort has been put in to minimize the size of these templates while providing some very rich features for developers.
In my RateMyMehndi web application, I have decided to use the template from Bootstrap since its one of the simplest and most popular template available. You can look through the Bootstrap website to learn more about using the template. Download the zip file from the Bootstrap website and extract its content to a known folder.
Merging Bootstrap with ASP.NET MVC4 template
When you extract the Bootstrap zip file it contains 3 folders css, img and js containing respective files. In order to use them we need to copy over the files into our Visual Studio. Expand the css folder from Bootstrap and copy the bootstrap-responsive.min.css file into your visual studio projects Content folder, in my case the full path to copy the file is C:\apps\RateMyMehndi\RateMyMehndi\Content. You can see that bootstrap provides 2 different style sheets one is normal bootstrap.css and another is bootstrap-responsive.css the later allows you to define layouts that automatically adapt themselves on mobile devices. Hence I choose to use the responsive layout css. They also provide the minified versions of the same css file for faster download on the client side, again since I do not plan to debug or modify their original css, I use the minified version.
Then from the js folder copy the file bootstrap-min.js to your visual studio projects Scripts folder, in my case the full path to copy the js file is C:\apps\RateMyMehndi\RateMyMehndi\Scripts. Bootstrap provides a single JavaScript file bootstrap.js as well its minified version. Since I do not plan to debug or modify their JavaScript, I use the minified version directly.
Once the files have been copied over, fire up Visual Studio and open the Solution Explorer window. In the Solutions Explorer window click on the Show All Files icon (circled in Figure 3 below). This will show all the files in the project folder, the ones which are not included in the project are shown greyed out.
Figure 3: Solutions Explorer – Show All Files
You can see from Figure 3 above that under the Content folder the file bootstrap-responsive.min.css and under the Scripts folder the file bootstrap.min.js which I had copied over are shown in gray. Right-click on the bootstrap-responsive.min.css file in Solution Explorer and select Include in Project from the context menu. Repeat the same step for including the bootstrap.min.js file into the Solution. Once these files have been included in the solution you are ready to use them in your project as well as when you are ready to deploy the application these files will get automatically get copied in the final deployment package. The next step is to delete the Site.css style sheet file under the Content folder, this file contains the default styles defined by Microsoft in the empty template, since we want to use the styles from the boostrap template its best to delete the default file. Right-click on Site.css in Solution Explorer and select Delete from the context menu and confirm the alert to delete the file.
In Solution Explorer expand the App_Start folder and open the BundleConfig.cs file. This file has the configuration for bundling of JavaScript and CSS files in MVC 4. Bundling is a great feature of MVC4 which allows you to bundle multiple different JavaScript/CSS files into a single JavaScript/CSS file at runtime. This significantly reduces the round trip the browser needs to make to download all the separate JavaScripts/CSS files required by the application, thus speeding up your applications load time. We need to update this file to include our bootstrap files in the Bundling configuration.
using System.Web;
using System.Web.Optimization;
namespace RateMyMehndi
{
public class BundleConfig
{
public static void RegisterBundles(BundleCollection bundles)
{
bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
"~/Scripts/jquery-1.*"));
bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(
"~/Scripts/jquery-ui*"));
bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
"~/Scripts/jquery.unobtrusive*",
"~/Scripts/jquery.validate*"));
bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
"~/Scripts/modernizr-*"));
bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include( "~/Scripts/bootstrap-*"));
bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/bootstrap-*"));
bundles.Add(new StyleBundle("~/Content/themes/base/css").Include(
"~/Content/themes/base/jquery.ui.core.css",
"~/Content/themes/base/jquery.ui.resizable.css",
"~/Content/themes/base/jquery.ui.selectable.css",
"~/Content/themes/base/jquery.ui.accordion.css",
"~/Content/themes/base/jquery.ui.autocomplete.css",
"~/Content/themes/base/jquery.ui.button.css",
"~/Content/themes/base/jquery.ui.dialog.css",
"~/Content/themes/base/jquery.ui.slider.css",
"~/Content/themes/base/jquery.ui.tabs.css",
"~/Content/themes/base/jquery.ui.datepicker.css",
"~/Content/themes/base/jquery.ui.progressbar.css",
"~/Content/themes/base/jquery.ui.theme.css"));
}
}
}
Listing 1: BundleConfig.cs
If you look at line number 23, you can see that I am calling the Add method on the BundleCollection object bundles to include a new script to the bundle. I create a new object of type ScriptBundle giving it a virtual path of “~/bundles/bootstrap”, this virtual path name will be used when we want to inclue this particular script bundle on our page. Then I call the Include method of ScriptBundle class and pass the virtual path to the actual JavaScript file to include in the bundle. You can either provide the full name of the file or wildcard character * is also allowed.
On line 26 similar to the above code, I add the bootstrap style sheet to the bundle using the StyleBundle class instead.
Rough Site Layout
Now that I have the project setup the next step for me is to build a rough layout of the various elements on the website. This helps me setup the basic layout template in my project. Based on the layout required I will update the _Layout.cshtml master template file so that it provides areas to plug-in partial pages. Figure 4 (below) shows the various high-level elements of my website, the site is divided into 3 common areas of header, content and footer. The header area holds the logo and navigation menu. The content area will hold the main mehndi design, rating and comments for the design as well as a side column to show case the top artists and top mehndi designs. The footer will hold the usual copyright notice.
Figure 4: RateMyMehndi rough site layout
Based on the rough layout that I have decided to use for the website, the next step is to update the _Layout.cshtml layout file for my MVC4 project to represent the above structure using HTML5 semantic markup. Open the _Layout.cshtml file from Solution Explorer, expand Views –> Shared. In MVC4 project this folder contains the views which are shared across screens.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@ViewBag.Title</title>
@Styles.Render("~/Content/themes/base/css", "~/Content/css")
</head>
<body>
<!-- Start of Bootstrap container -->
<div class="container">
<!-- Start of header Row -->
<header>
<div class="row">
<div class="span7">
<h1>Welcome to Rate My Mehndi.com</h1>
</div>
<div class="span5">
<!-- Show Facebook Login details -->
</div>
</div>
<menu>
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<ul class="nav">
<li class="active"><a href="@Url.Content("~/")">Home</a></li>
</ul>
</div>
</div>
</div>
</menu>
</header>
<!-- end of header row -->
<!-- start of content row -->
<section>
<div class="row">
@RenderBody()
</div>
</section>
<!-- end of content row -->
<footer>
<!-- Start of footer Row -->
<div id="footer" class="row">
<div class="span12">Copyright 2012 - RateMyMehndi.com. All Rights Reserved.</div>
</div>
<!-- end of footer row -->
</footer>
</div>
<!-- End of bootstrap container -->
@Scripts.Render("~/bundles/jquery")
@RenderSection("scripts", required: false)
</body>
</html>
Listing 2: _Layout.cshtml containing basic page layout
Listing 2 shows the _Layout.cshtml file updated with basic HTML5 mark-up using bootstrap. In bootstrap, the page layout is contained within the top level div at line 16 with the css class container, which contains all the inner layout elements on the page. As shown in Figure 4 the page is divided into three major parts Header, Container and Footer using the HTML5 tags Header, Section and Footer respectively. Within each of the 3 sections I have defined div elements with css class row from bootstrap. This element allows you to define separate rows within the container div defined below body tag. Under the header I have defined a navigation menu using the HTML5 tag Menu. The menu tag contains an unordered list with the menu items, right now I have defined only one link to Home. The bootstrap css classes navbar, navbar-inner, container and nav are all used to defined a navigation bar. Since I am using the bootstrap css files, the menu item is automatically styled by used the above tags.
This concludes this blog post where I have created an ASP.NET MVC 4 project in Visual Studio and integrated it with Twitter Bootstrap. In the next post I’ll start working on the first user story and integrating with Facebook.