1. Download the Materialize CSS framework here.
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.”
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.
6. In the Solutions Explorer, expand the folder called wwwroot to show the files within it.
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.
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.
9. In your Solutions Explorer, navigate to the folder called Views, then Shared, then _Layout.cshtml and open it.
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">
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.
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.
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.
We have now successfully added Materialize to our C# .NET MVC application!