How to Add Materialize CSS Framework to a C# .NET MVC Application

July 4, 2018
How to Add Materialize CSS Framework to a C# .NET MVC Application

This tutorial will show Windows users how to easily add Materialize (a modern, responsive CSS framework based on Material Design by Google) to a C# .NET MVC application in Visual Studio 2017. The source code for this tutorial can be found here.

1. Download the Materialize CSS framework here.

How to Add Materialize CSS Framework to a C# .NET MVC Application

2. After downloading Materialize, extract the compressed ZIP file to see the following folders and files:

css
    -materialize.css
    -materialize.min.css
js
    -materialize.js
    -materialize.min.js
LICENSE
README.md

3. We will come back to the Materialize folder in a minute. Next, create an ASP.NET MVC application by opening Visual Studio 2017 and clicking “create new project.”

How to Add Materialize CSS Framework to a C# .NET MVC Application

4. Choose a name for your solution. This one is called SampleMaterializeApp. Then, choose your solution location, and finally, choose “ASP.NET Core Web Application” for the type of application and click OK.

5. After clicking OK, another box will appear. Click “Web Application (Model-View-Controller)” and then click OK. After clicking OK, you should see this screen, or something very similar with the Solution Explorer for your newly created application visible on the right.

How to Add Materialize CSS Framework to a C# .NET MVC Application

6. In the Solutions Explorer, expand the folder called wwwroot to show the files within it.

How to Add Materialize CSS Framework to a C# .NET MVC Application

7. Expand the css folder and delete its contents. Right click on the css folder and click “Add” then “Existing Item” as shown in the picture below. Then, navigate to where you stored the Materialize folder you just downloaded. Open the folder, then css, then materialize.css and click add file. The file will get added to the Solutions Explorer under the css folder.

How to Add Materialize CSS Framework to a C# .NET MVC Application

8. Repeat step #7 for the js folder in the Solutions Explorer. Delete the contents of the js folder and add the existing js file from the Materialize folder. The file you are adding is found in the Materialize js folder and is called materialize.js. Click add file and it will appear under the js folder in the Solutions Explorer.

How to Add Materialize CSS Framework to a C# .NET MVC Application

9. In your Solutions Explorer, navigate to the folder called Views, then Shared, then _Layout.cshtml and open it.

How to Add Materialize CSS Framework to a C# .NET MVC Application

10. In the _Layout.cshtml file, change the stylesheet links in the <head> section from links to Bootstrap to links to Materialize, like in the picture below. To use icons in Materialize, you must also add this line of code to the <head> section. (The code also looks a little different in this picture compared to step #9, because I deleted all of the starter code. See step #12).

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
How to Add Materialize CSS Framework to a C# .NET MVC Application

11. Near the end of the <body> section, be sure to also replace the link to your JavaScript to match where your materialize.js file is located.

How to Add Materialize CSS Framework to a C# .NET MVC Application

12. The starter code included when MVC applications are generated has been deleted (compare the difference between the code pictured in step #9 versus step #11). I replaced the starter code with code for a Materialize Navigation bar.

The <body> section of all other .cshtml files will appear where @Render Body() appears in the <body> section of the shared _Layout.cshtml. This allows us to create a navigation bar (or any other feature we want all pages to share, like a footer) in the _Layout.cshtml folder that will be appear on all other .cshtml files when they are rendered.

How to Add Materialize CSS Framework to a C# .NET MVC Application

13. In your Solutions Explorer, navigate to the Home folder, then Index.cshtml and open it. Delete all the starter code except for what is pictured below.

How to Add Materialize CSS Framework to a C# .NET MVC Application

14. When we run the application (to run the app, click Debug at the top of the screen, then select “start without debugging” from the dropdown), we should see the following page render (or something similar if you changed the text/colors in _Layout.cshtml). We are viewing the Index.cshtml page (which is empty right now) with the Materialize navigation bar from the _Layout.cshtml file at the top.

How to Add Materialize CSS Framework to a C# .NET MVC Application

We have now successfully added Materialize to our C# .NET MVC application!