An Introduction to Material Design for MVC

An Introduction to Material Design for MVC

Material design is a versatile set of guidelines that support the best practices of user interface design. It provides uniform specifications for themes, layouts, animation, components, and typography to let you express your brand with confidence. Material design is inspired by the physical world and its texture -- how they reflect light, and cast shadows with a minimalist and clean approach.

Google announced Material and it’s specification in mid-2014, defining Material as based on paper and ink with advanced implementations. As of today, all of Google’s mobile applications for Android have applied Material.

How to use Material Design with ComponentOne MVC Controls

ComponentOne MVC controls lets you add Material design look and feel by using Material Design Lite. It does not rely on any JS framework. It only takes two steps to add material support in your application. 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.

There are two ways to use our inbuilt Material themes: with HTML/tag helpers and with our theme builder.

ComponentOne MVC HTML/Tag Helpers

All the resources used with ComponentOne controls are registered when you create a web application using our MVC template. By default, when you create an MVC application with ComponentOne controls, it uses a default theme. You are provided many different pre-defined visual themes. The themes are consistent across all the ComponentOne controls for your project.

  • If you are using ComponentOne Template you can use the application Wizard to set the theme.

    An Introduction to Material Design for MVC

  • If you are using a Visual Studio Template you can set material theme manually while registering resources for your application.

    To apply material theme in your application, you need to add the following code in _Layout.cshtml (Views/Shared/_Layout.cshtml)

// If using tag helpers
<c1-styles theme="material" />
// If using html helpers
@Html.C1().Styles().Theme("material")

Material themes are written in a specific format to allow several combinations of primary/accent colours. The format is:

material[.{{primary_colour}}-{{secondary_colour}}]

Here is list of several primary/accent colors that you can use as material theme.

Using a Theme Builder

We’ve also made an interactive theme builder. This builder allows you to choose colors and preview your theme with our controls before adding them to your application. If you are using 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 you an interactive theme builder, that will decide what resources you need to download and include in you web application.

You can also preview how these different combinations of primary and accent colours looks with C1 MVC controls.

Follow these steps:

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

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

  1. Use our theme builder to decide some colour combinations. After deciding some arbitrary colour combination, you would be provided with a code to include in your layout page.

    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" />

  2. You can optionally include Material Icons in your application:

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

    Here is a live version of our MVC controls with a Material theme.

Download Now!

Nilay Vishwakarma

comments powered by Disqus