An Introduction to Material Design for MVC

Material design is a popular set of guidelines developed by Google to help us provide a consistent and clean style across our software and web apps. The design provides a uniform specification for themes, layouts, animation, components, and typography so you can express your brand with confidence. Ten years later, material design is still very popular.

In this blog, we’ll walk you through applying a material design lite theme to an ASP.NET Core application using .NET 8 and the ComponentOne ASP.NET MVC control templates. We’ll cover how to create a new application with a pre-set theme, how to apply a theme to an existing application, and how to build a custom theme.

Ready to Get Started? Download ComponentOne Today!

What is a Material Design Lite Theme

A theme is a collection of settings, including colors, fonts, images, and skins, that get applied differently across each UI control. The ComponentOne ASP.NET MVC Edition supports over 20 built-in themes that you can directly set in your web application.

Material Design Lite lets you add a material design look and feel to your web apps without relying on any JS framework. The ComponentOne ASP.NET controls support a material design lite theme created using Material Design Lite that supports 288 different color schemes built-in! More on choosing that later.

How to Quickly Create a New Material Theme Application

The quickest way to create a new material-themed ASP.NET MVC or ASP.NET Core application is to download the ComponentOne ASP.NET MVC Edition of your choice.

Open Visual Studio and you will see a couple of new project templates. Select one matching the version and language of your preference, and create the project.

In the final step, you’ll see the ComponentOne ASP.NET MVC Application Wizard dialog. This lets you pre-configure several things for the application, including architecture, data binding, and even a theme.

Choose the “material” theme in the Wizard - and for the sake of this example, you can also choose the Model Binding option. This creates a true MVC structure for your application, complete with some example model data binding - perfect for beginners.

Build and run the application to see the material design lite theme applied to a FlexGrid datagrid. Next, we’ll look at how the theme is applied, which can be helpful for adding it to an existing application.

How to Apply a Material Theme to an ASP.NET Core Application

You can set the theme in the project wizard, or you can set the theme at the time of registering resources. To add and apply the material theme to an existing project:

• Add a project reference to C1.AspNetCore.Mvc for ASP.NET Core applications or C1.Web.Mvc for .NET Framework)
• Add the following code in your main html page (_Layout.cshtml page for most project templates).

@Html.C1().Styles().Theme("material.deep_orange-red")

You’ll notice the material theme here includes a primary and accent color. The ComponentOne ASP.NET MVC Material theme supports 288 different material design lite theme colors. Check out the full list of colors in the documentation.

Run the application to see the deep orange color. You’ll notice this impacts the style more with more controls.

How to Create a Custom Material Theme

The ComponentOne controls for the web are built upon the Wijmo controls. The Wijmo team has released an interactive theme builder, which can also be used with our ASP.NET MVC controls.

The theme builder lets you choose colors and preview your theme with our controls before adding them to your application. If you use a combination (of primary and accent colors), you would have to include a specific CSS file compared to some other combination. Therefore, we felt it was necessary to provide an interactive theme builder that can provide you with the necessary resources.

To preview the custom theme with our ASP.NET MVC controls, follow these steps:

1. Include the Material Lite JavaScript file in the _Layout page of your application.

<script defer src="https://code.getmdl.io/1.1.1/material.min.js"></script>

2. Use the Wijmo theme builder to design your custom theme. Then download or copy the code to include in your layout page. For example:

<link rel="stylesheet" href="https://code.getmdl.io/1.1.1/material.deep_purple-pink.min.css"> 
<link rel="stylesheet" href="http://cdn.wijmo.com/5.latest/styles/themes/material/wijmo.theme.material.deep_purple-pink.min.css" />

Note that you can optionally include Material Icons in your application:

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

Conclusion

Now, you see, adding material themes to your web application only takes a few steps. Our material theme should work in all evergreen browsers alike, with full support in Chrome for Android and Mobile Safari. For older browsers like IE9, we degrade to CSS only.

Ready to Get Started? Download ComponentOne Today!