Introduction
This tip is about adding custom CSS UI framework to ASP.NET MVC application, in order to customize its look and feel.
CSS Frameworks
There are many CSS UI frameworks available on the internet. Some of them are listed below:
Refer to these links for more CSS frameworks:
- http://www.awwwards.com/what-are-frameworks-22-best-responsive-css-frameworks-for-web-design.html
- http://www.cssauthor.com/css-frameworks/
These frameworks give a nice look and feel for our web applications.
How to Use?
In this tip, I will show the steps to add a UI CSS framework to an ASP.NET MVC application to change its appearance. In this example, I am using Materialize CSS framework.
Step 1. Download CSS Framework
Just download the Materialize CSS framework from this link - Materialize. After downloading compressed ZIP archive, just extract it, you will see the following folders and files:
- css
- materialize.css
- materialize.min.css
- js
- materialize.js
- materialize.min.js
- fonts
- font
- material-design-icons
- roboto
Step 2. Adding It to ASP.NET MVC Application
Just open your ASP.NET MVC application or create a new application in Visual Studio. Now you can see Content folder in Solution explorer. If you are creating a new ASP.NET MVC application, Content folder will be created after adding one view to the application. This Content folder contains some default css files like bootstrap.css, Site.css, etc.,
Just delete those files in the Content folder, and create new folders (css, js, fonts) like the folders in the materialize framework. And add the corresponding files to these folders by right clicking on the folders -> Add - Existing Item.
Step 3. Enabling CSS Framework in _Layout.cshtml File
We are having _Layout.cshtml file in the Shared folder of Views folder. Just open this file, and change it according to your needs. It's very important to add references to the files of Materialize UI. Just refer to the below code of _Layout.cshtml.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>@ViewBag.Title - My ASP.NET Application</title>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
<link href="~/Content/css/materialize.min.css" rel="stylesheet"
type="text/css" />
<script type="text/javascript"
src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="~/Content/js/materialize.min.js"></script>
</head>
<body>
<nav>
<div class="nav-wrapper teal">
<div class="container">
<a href="#"
class="brand-logo">ASP with Material Design</a>
<ul id="nav-mobile" class="right hide-on-med-and-down">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
</nav>
<div class="container">
@RenderBody()
<hr />
</div>
<footer class="page-footer teal">
<div class="container">
<div class="row">
<div class="col l6 s12">
<h5 class="white-text">My ASP.NET Application</h5>
<p class="grey-text text-lighten-4">
You can use rows and columns here to organize your footer content.</p>
</div>
<div class="col l4 offset-l2 s12">
<h5 class="white-text">Sitemap</h5>
<ul>
<li><a class="grey-text text-lighten-3"
href="#!">Link 1</a></li>
<li><a class="grey-text text-lighten-3"
href="#!">Link 2</a></li>
<li><a class="grey-text text-lighten-3"
href="#!">Link 3</a></li>
<li><a class="grey-text text-lighten-3"
href="#!">Link 4</a></li>
</ul>
</div>
</div>
</div>
<div class="footer-copyright">
<div class="container">
© 2014 Copyright Text
<a class="grey-text text-lighten-4 right"
href="#!">More Links</a>
</div>
</div>
</footer>
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
</body>
</html>
Now, we have successfully added Materialize CSS UI framework to our web application. Like this approach, you can add any CSS UI framework to ASP.NET MVC application.
