Update 9 sept 2013: I originally wrote this post with Bootstrap 2.3. Because this post is quite popular, I updated it for Bootstrap 3]
We are going to create a new project. I always start with a blank solution and then add the project, so that I can name the solution and the web project separately. I am going to name the Solution “CloudAuction” and the MVC4 project “Auction.Web”.
I am going to start with Internet Application project template. This template already has a simple controller and view so that we can use it to start setting up the page layout.
This will result in a new website that can be run directly. You will get the well-known MVC starter site. It even has a responsive design (that we’ll replace with something better shortly). If you compile and run, you’ll see this result:
The responsive design that comes with the Internet template is very basic however. Microsoft has never been that great with front-end web technologies, so we’ll need to turn somewhere else to help us out with that. We will useBootstrap as the basis for the front end technology.
I am a huge fan of Bootstrap. It enables me, as a non-designer with very limited css skills, to make sites that look very professional. If you implement responsive design, the site will even work and look well on small screens and mobile devices, without much effort.
In order to be able to modify the styling easily in our MVC project, we need to get the LESS sources in our project. To get these, I am going to import the Twitter.Bootstrap.Less package. Using the package manager console, type:
PM> Install-Package Twitter.Bootstrap.Less
We’ll be using HTML5, but we want our site to work on IE7 and 8 too, so we are also going to need this:
PM> Install-Package html5shiv
The 3.0 version of the Twitter.Bootstrap.Less package will install all of the Bootstrap .less files in the folder /Content/bootstrap. The top-level filebootstrap.less imports all the other files in this folder, and can be compiled to .css. With Bootstrap 2.3, I used the Dotless HttpHandler to do this dynamically. However, Dotless cant’t currently compile the Bootstrap 3 files because it does not (yet?) support Less 1.4. Luckily, the new version of the Web Essentials Visual Studio Add-in recently added support for Less 1.4, and it compiles Bootstrap 3 without any problem. So we will use Web Essentials to pre-compile the Less files in Visual Studio.
Leave the /Content/bootstrap folder where the NuGet puts them (so we can update easily in the future), but copy the bootstrap.less and variables.less files over to a new folder /Content/themes/default. This will be the place for our theme-specific content files. Update the @import statements in bootstrap.less so they point back to the original /Content/bootstrap folder, using a relative path (i.e. @import “..\..\bootstrap\normalize.less”). This is done so we can modify the the appearance of our site without overwriting bootstrap files. We can also easily add other theme folders and place Bootswatch themes in there.
If you save of bootstrap.less, Web Essentials will automatically compile a linked file bootstrap.css and bootstrap.min.css from the combined .less sources. I set the build action of all .less files to “None”, as they don’t have to be deployed after compilation.
Now we are ready to create our Bootstrap-based page layout and menu. Go tohttp://getbootstrap.com/getting-started/ to see several starter templates, I am using the Jumbotron site as my template.
Here is a basic _Layout.cshtml file. Place it in /Views/Shared. Also design (or steal) some icons for shortcuts and place them in a new “ico” folder under the Content folder.
The navigation bar on top of the page is copied from the Bootstrap samples, with one small MVC addition: it sets a class “active” on the currently active menuitem, so that it will be highlighted by the standard bootstrap styling. The username/login feature is left out for now, I will add it back in another post. The menu is in _NavBar.cshtml, also located in Views/Shared:
Our homepage is in Views/Home/Index.cshtml. It is almost the same as the original one from the MVC template, but it is modified with some Bootstrap css classes.
bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include( "~/Scripts/bootstrap*"));
By including this script bundle in a page, the advanced Bootstrap components (popup, typeahead etc) will start to work. In another post I will show how to use the bootstrap carousel component on a page, using knockout.js and SignalR to feed it with images.
With all that in place, we can compile-run our new website, and see MVC4 working server-side, and Bootstrap 3 client-side. The responsive design is working. You can test the page on various devices, it works on almost every smartphone and also on other devices with a browser, such as smart TVs and game consoles. Our project is ready to get started!
[This post is part of the series Development of a mobile website with apps and social features]