Adding CSS UI Frameworks in ASP.NET MVC Application

VR Karthikeyan

Rate me:

3.77/5 (6 votes)

13 Apr 2016CPOL2 min read

48.4K

Change the look and feel of ASP.NET MVC application by adding different UI CSS frameworks

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:

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
- roboto
  - Roboto font files
font
- material-design-icons
  - Icon files
- roboto
  - Roboto font files

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.

HTML

<!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.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Written By

VR Karthikeyan

Software Developer (Senior) IVY Software Development Services

India

This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.