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
Setting up HTML5, CCS3 boilerplate template
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.
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.
public class BundleConfig
public static void RegisterBundles(BundleCollection bundles)
bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include( "~/Scripts/bootstrap-*"));
Listing 1: BundleConfig.cs
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.
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Start of Bootstrap container -->
<!-- Start of header Row -->
<h1>Welcome to Rate My Mehndi.com</h1>
<!-- Show Facebook Login details -->
<li class="active"><a href="@Url.Content("~/")">Home</a></li>
<!-- end of header row -->
<!-- start of content row -->
<!-- end of content row -->
<!-- Start of footer Row -->
<div id="footer" class="row">
<div class="span12">Copyright 2012 - RateMyMehndi.com. All Rights Reserved.</div>
<!-- end of footer row -->
<!-- End of bootstrap container -->
@RenderSection("scripts", required: false)
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.