Create ASP.Net MVC websites: CSS UI Kits, frameworks, bootstraps and boilerplates
When it comes to building web applications, my one true weakness is design. I am not a designer. I know enough CSS and HTML to hold my own, but designing a website layout from scratch … that’s not me.
In recent years a number of front-end frameworks have become very popular with developers as it helps them to quickly build a fully functional or prototype website without having to invest an exorbitant amount of time in designing the site from scratch. One of the most popular front-end frameworks at the time of writing this article was Twitter Bootstrap. Foundation from Zurb is another front-end framework boasting that it is the most responsive framework in the world.
If you are interested in building a Metro or rather Flat UI styled website, the way to go is definitely the Metro UI CSS framework.
So, this is all great, but why should you be using CSS frameworks? What are the pros and the cons? What are the benefits, and what are the pitfalls you should look out for?
In this article, which will be the first in a series of articles, we’ll dive into the various types of UI frameworks and begin to look at how you can start using the Foundation framework.
- What are frameworks, bootstraps and boilerplates?
- Using the Foundation HTML/CSS Frameworks to create ASP.Net MVC websites
Frameworks, bootstraps, boilerplates. Say what?
If you’ve been researching frameworks for building websites, you would’ve come across terms such as grid systems and boilerplates. So what exactly does it mean? Well, essentially they all refer to a compilation of assets (HTML, CSS, JavaScript and images files) that are designed to help you speed up development of your websites.
Boilerplate
In most cases a boilerplate refers to a set of templates focused on accomplishing a specific goal or standard. They provide a starting point for a project based on specific best practices.
For example, Skeleton is a small boilerplate that focusses on creating responsive and mobile-friendly websites, whereas HTML5 Boilerplate focuses on assets for building HTML5 websites and apps.
Framework
Frameworks provide a system for building sites or applications and usually focuse on responsive design and a standard user interface. Frameworks are vast as they are varied and are usually the result of designers creating a base project or starting point for their own projects to allow them to build their sites more efficiently.
One such framework is Foundation from Zurb. This is a comprehensive framework that has its own grid system, user interface and JavaScript extensions and utilities.
Another framework that is worth looking at is Metro UI CSS, which provides a grid system, typography and a range of components to speed up the creation of Windows 8 styles websites or applications.
Bootstrap
The term bootstrap rose to popularity mostly due to Twitter Bootstrap released by Twitter. It is by far one of the most popular frameworks on the internet and contains HTML and CSS design templates for forms, navigation, typography and other components.
Using the Foundation HTML/CSS Frameworks with ASP.Net MVC
Ok, so now that you have a general idea of what I’m talking about with regards to frameworks etc. let’s have a quick look at how you can use one of the most popular frameworks. We’ll only cover how to set up your MVC project to start using the framework and go into more detail in future articles.
To get started with Foundation, head over to foundation.zurb.com and click on the “Download Foundation 4” button.
From there you can decide to either customize Foundation or download the default version. For this exercise, let’s download the Default CSS by clicking the big blue “Download Foundation CSS” button. This download contains all the CSS style sheets and JavaScript files you’ll need to build and style your Foundation website.
Creating the Visual Studio project
Next, we need to create a new ASP.NET MVC 4 Application in Visual Studio.
When prompted, select the Empty template from the list of project templates:
This will create an empty ASP.Net MVC 4 project and we’ll add the necessary View, Controllers, JavaScript and CSS.
In the Foundation zip file, we’ve downloaded earlier, you’ll find the following files and folders:
- A css folder – contains all the necessary Foundation style sheets. You’ll find both a minimized and normal version of the main style sheet in this folder.
- An img folder – this folder will be empty as Foundation does not ship with any images, for the purpose of this exercise, we’ll ignore this folder.
- A js folder – contains the foundation.min.js file, which is a minimized version of all the Foundation JavaScript components and extensions. It also contains a subfolder called vendor; this folder contains the jQuery and zepto libraries.
- humans.txt – This is not a Foundation specific file, but rather a nice way to include information about the humans that was involved in the project. Read more about it on humanstxt.org
- index.html – This is a starting point for any project, it contains the Html structure for a page using Foundation.
- robots.txt – A file used by web crawlers to index you website. Read more on robotstxt.org
Setting up the Visual Studio project structure
Since we’ve chosen an Empty project template earlier, we have a pretty barebones version of an ASP.Net MVC project in Visual Studio. We first need to add some folders, go ahead and add the following folders to your project:
- css
- js
I like to keep the folder names short and the same as the framework I’m using. But if you would like to call it something else, you can. Your project layout should resemble the following in Solution Explorer:
Next, you need to add the files inside the Foundation zip file to our project. When adding the JavaScript files, include the foundation and vendor folders. After you’ve added the files, your project layout should resemble the following:
Adding a Layout page
With the folder and file structure in place we need to add a Layout page. First create a new folder under the Views folder, called Shared. Right-click on the new Shared folder and select Add > New Item…
Select the MVC 4 Layout Page (Razor) item template and call it _Layout.cshtml
Next, using the index.html files, that was included in the Foundation download, as a guide, we need to setup our _Layout.cshtml file to include the Foundations style sheet and JavaScript files.
The final version of the _Layout.cshtml file should look like the following where I’ve used the Url.Content MVC helper to link to all the style sheets and JavaScript files:
<!DOCTYPE html> <!--[if IE 8]><html class="no-js lt-ie9" lang="en" > <![endif]--> <!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]--> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>@ViewBag.Title</title> <link rel="stylesheet" href="@Url.Content("~/css/foundation.css")"> <script src="@Url.Content("~/js/vendor/custom.modernizr.js")"></script> </head> <body> <div class="row"> <div class="large-12 columns"> <h2>Welcome to Foundation</h2> <p>This is version 4.3.1.</p> <hr /> </div> </div> @RenderBody(); <script> document.write('<script src=' + ('__proto__' in {} ? '@Url.Content("~/js/vendor/zepto")' : '@Url.Content("~/js/vendor/jquery")') + '.js><\/script>') </script> <script src="@Url.Content("~/js/foundation.min.js")"></script> <script> $(document).foundation(); </script> @RenderSection("scripts", false) </body> </html>
Adding a Home Controller
The final step is to add a Home Controller, so that when we run the website it shows some content. To do this, right-click on the Controllers folder inside the Visual Studio Solution Explorer and select Add >h; Controller.
In the Add Controller dialog, change the controller name to HomController, and select “Empty MVC Controller” in the Template drop-down list.
A new HomeController.cs class is created inside the Controllers folder and it contains only one Index method.
Next, we need to add a view for the Index controller action. To do this right-click inside the Index method and select Add View from the context-menu.
In the Add View dialog, leave the View name field as “Index” and check the “Use a layout or master page” check box. Select the layout file, we’ve added earlier and click the Add button.
A new Index.cshtml file will be created in the Home folder under the Views folder. Change its mark-up to the following:
@{
ViewBag.Title = "Index";
Layout = "~/Views/_Layout.cshtml";
}
<div class="row">
<div class="large-8 columns">
<h3>The Grid</h3>
<!-- Grid Example -->
<div class="row">
<div class="large-12 columns">
<div class="panel">
<p>This is a twelve column section in a row. Each of these includes a div.panel element so you can see where the columns are - it's not required at all for the grid.</p>
</div>
</div>
</div>
<div class="row">
<div class="large-6 columns">
<div class="panel">
<p>Six columns</p>
</div>
</div>
<div class="large-6 columns">
<div class="panel">
<p>Six columns</p>
</div>
</div>
</div>
<div class="row">
<div class="large-4 columns">
<div class="panel">
<p>Four columns</p>
</div>
</div>
<div class="large-4 columns">
<div class="panel">
<p>Four columns</p>
</div>
</div>
<div class="large-4 columns">
<div class="panel">
<p>Four columns</p>
</div>
</div>
</div>
<h3>Buttons</h3>
<div class="row">
<div class="large-6 columns">
<p><a href="#" class="small button">Small Button</a></p>
<p><a href="#" class="button">Medium Button</a></p>
<p><a href="#" class="large button">Large Button</a></p>
</div>
<div class="large-6 columns">
<p><a href="#" class="small alert button">Small Alert Button</a></p>
<p><a href="#" class="success button">Medium Success Button</a></p>
<p><a href="#" class="large secondary button">Large Secondary Button</a></p>
</div>
</div>
</div>
<div class="large-4 columns">
<h4>Getting Started</h4>
<p>We're stoked you want to try Foundation! To get going, this file (index.html) includes some basic styles you can modify, play around with, or totally destroy to get going.</p>
<h4>Other Resources</h4>
<p>Once you've exhausted the fun in this document, you should check out:</p>
<ul class="disc">
<li><a href="https://foundation.zurb.com/docs">Foundation Documentation</a><br />
Everything you need to know about using the framework.</li>
<li><a href="https://github.com/zurb/foundation">Foundation on Github</a><br />
Latest code, issue reports, feature requests and more.</li>
<li><a href="https://twitter.com/foundationzurb"><text>@@foundationzurb</text></a><br />
Ping us on Twitter if you have questions. If you build something with this we'd love to see it (and send you a totally boss sticker).</li>
</ul>
</div>
</div>
You are now ready to build and run the website. The final result should look as follows:
You are now ready to start using the Foundation framework. In the coming articles we’ll delve deeper into the Foundation as well as other HTML/CSS UI frameworks and tools.
Thank you for reading. Until next time, keep coding!
Available downloads:
Sample ASP.Net MVC web-site project