How to use Metro UI CSS in ASP.NET MVC 4 ?

Metro UI CSS allows to create a Web site in the style of Windows 8 quickly and without distractions on routine tasks. You can find more info here: http://metroui.org.ua/

UPDATE. This article is about version 0.95 now Metro UI CSS is in version 2.0 and the following is no longer accurate so you better read this other post https://pepitosolis.wordpress.com/2013/12/29/using-metro-ui-css-version-2-0-with-asp-net-mvc/

To use Metro UI CSS in your ASP.NET MVC 4 project do the following:

Download the Metro UI CSS file “Metro-UI-CSS-master.zip” from https://github.com/olton/Metro-UI-CSS you need to copy some files from this zip to your project.

Copy the following files:

1. In Visual Studio in your “Content” folder copy these 2 files: modern.css and modern-responsive.css, the file theme-dark.css is only necessary if you are intending to use it.

2. Depending on what project template you used you may or may not have the folder “Images”, if you don’t have the folder create it. You should copy these files if you are intending to use them. So copy to your “Images” folder the files in the zip inside “images”:

  • preloader-w8-cycle-black.gif
  • preloader-w8-cycle-white.gif
  • preloader-w8-line-black.gif
  • preloader-w8-line-white.gif

3. In your “Scripts” folder copy the files in the zip inside the folder “javascript”, once again you should copy the files that you are going to use. The files are:

  • accordion.js
  • buttonset.js
  • calendar.js
  • carousel.js
  • contextmenu.js
  • dialog.js
  • dropdown.js
  • input-control.js
  • pagecontrol.js
  • pagelist.js
  • rating.js
  • slider.js
  • start-menu.js
  • tile-drag.js
  • tile-slider.js

4. Create a folder called “less” and copy the files in the zip inside the folder “less”. Copy them if you are going to use “less” in your web server.

5. Create a folder called “fonts” and from the zip file copy the files in the folder “fonts”:

  • iconFont.eot
  • iconFont.svg
  • iconFont.ttf
  • iconFont.woff

Open file “modern.css” and “find and replace”

../fonts/iconFont

replace with

/fonts/iconFont

This is necessary to load the icons correctly. For instance: when using checkboxes because the “check” image is inside the iconFont.* file.

There are 4 different font files:

  • iconFont.eot
  • iconFont.svg
  • iconFont.ttf
  • iconFont.woff

In Visual Studio open the file App_Start/BundleConfig.cs and add the following lines:

bundles.Add(new ScriptBundle("~/bundles/metro").Include(
    "~/Scripts/dialog.js",
    "~/Scripts/dropdown.js",
    "~/Scripts/accordion.js",
    "~/Scripts/buttonset.js",
    "~/Scripts/carousel.js",
    "~/Scripts/input-control.js",
    "~/Scripts/pagecontrol.js",
    "~/Scripts/pagelist.js",
    "~/Scripts/rating.js",
    "~/Scripts/slider.js",
    "~/Scripts/tile-slider.js",
    "~/Scripts/tile-drag.js",
    "~/Scripts/calendar.js"));
bundles.Add(new StyleBundle("~/Content/css").Include(
    "~/Content/modern.css",
    "~/Content/modern-responsive.css",
    "~/Content/site.css"));

Put bundles.Add(new ScriptBundle(“~/bundles/metro”)… after the jQuery bundles. And the StyleBundle in the same location as the previous StyleBundle, comment or delete the previous StyleBundle.

Complete BundleConfig.cs listing:

using System.Web;
using System.Web.Optimization;

namespace MvcApplication3
{
    public class BundleConfig
    {
        // For more information on Bundling, visit http://go.microsoft.com/fwlink/?LinkId=254725
        public static void RegisterBundles(BundleCollection bundles)
        {
            bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                        "~/Scripts/jquery-{version}.js"));

            bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(
                        "~/Scripts/jquery-ui-{version}.js"));

            bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                        "~/Scripts/jquery.unobtrusive*",
                        "~/Scripts/jquery.validate*"));

            bundles.Add(new ScriptBundle("~/bundles/metro").Include(
 "~/Scripts/dialog.js",
 "~/Scripts/dropdown.js",
 "~/Scripts/accordion.js",
 "~/Scripts/buttonset.js",
 "~/Scripts/carousel.js",
 "~/Scripts/input-control.js",
 "~/Scripts/pagecontrol.js",
 "~/Scripts/pagelist.js",
 "~/Scripts/rating.js",
 "~/Scripts/slider.js",
 "~/Scripts/tile-slider.js",
 "~/Scripts/tile-drag.js",
 "~/Scripts/calendar.js"));

            // Use the development version of Modernizr to develop with and learn from. Then, when you're
            // ready for production, use the build tool at http://modernizr.com to pick only the tests you need.
            bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
                        "~/Scripts/modernizr-*"));

            bundles.Add(new StyleBundle("~/Content/css").Include(
 "~/Content/modern.css",
 "~/Content/modern-responsive.css",
 "~/Content/site.css"));

            //bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/site.css"));

            bundles.Add(new StyleBundle("~/Content/themes/base/css").Include(
                        "~/Content/themes/base/jquery.ui.core.css",
                        "~/Content/themes/base/jquery.ui.resizable.css",
                        "~/Content/themes/base/jquery.ui.selectable.css",
                        "~/Content/themes/base/jquery.ui.accordion.css",
                        "~/Content/themes/base/jquery.ui.autocomplete.css",
                        "~/Content/themes/base/jquery.ui.button.css",
                        "~/Content/themes/base/jquery.ui.dialog.css",
                        "~/Content/themes/base/jquery.ui.slider.css",
                        "~/Content/themes/base/jquery.ui.tabs.css",
                        "~/Content/themes/base/jquery.ui.datepicker.css",
                        "~/Content/themes/base/jquery.ui.progressbar.css",
                        "~/Content/themes/base/jquery.ui.theme.css"));
        }
    }
}

UPDATE: As cmmaung commented when you add in the bundle “start-menu.js”

//"~/Scripts/start-menu.js",

You will get an error in the file “start-menu.js” line 128 $(“body”).mousewheel… This error happens in Internet Explorer (tested in version 10 and 11) but works OK in Chrome and Firefox. I commented that line and runs fine but I didn’t correct the error yet. You can look in the following link for more information: http://www.sitepoint.com/html5-javascript-mouse-wheel/

Finally in Visual Studio open the file Views/Shared/_Layout.cshtml and

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>@ViewBag.Title</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
</head>
<body class="metrouicss">
    @RenderBody()
    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/metro")
    @RenderSection("scripts", required: false)
</body>
</html>

The metro container class “metrouicss” in body class is required to start using Metro UI CSS.

Example in a view called Index.cshtml

metrouicss

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

<span class="label">Default</span>

<table class="hovered">
   <tr>
      <th>Header 1</th>
      <th>Header 2</th>
   </tr>
   <tr>
      <td>row 1, cell 1</td>
      <td>row 1, cell 2</td>
   </tr>
   <tr>
      <td>row 2, cell 1</td>
      <td>row 2, cell 2</td>
   </tr>
</table>

<label class="input-control checkbox">
    <input type="checkbox" />
    <span class="helper">Checkbox Caption</span>
</label>

   <label class="input-control radio">
        <input type="radio" />
        <span class="helper">CheckBox Caption</span>
    </label>

    <label class="input-control switch">
        <input type="checkbox" />
        <span class="helper">CheckBox Caption</span>
    </label>
<div class="input-control select">
   <select>
      <option>Option 1</option>
      <option>Option 2</option>
   </select>
</div>

<button>Button1</button>
    <button class="default">Button2</button>
    <button disabled="disabled">Button3</button>
    <a class="button">Button4</a>

<div class="image-collection">
    <div>
       <img alt="" src="~/Content/themes/base/images/2.jpg" />
       <div class="overlay">Sample text</div>
    </div>
</div>

    <div class="rating" data-role="rating">
    </div>

There is a NuGet package but it still requires some of the above changes. The package is called RTL Metro UI CSS 0.95-a.

To install, run the following command in the Package Manager Console

PM> Install-Package RTL-Metro-UI-CSS -Pre

It’s free but don’t forget to placed back link to Metro UI CSS site.

Example:
Style with <a href="http://metroui.org.ua">Metro UI CSS</a>

Advertisements
This entry was posted in MVC, Visual Studio 2012 and tagged , , , , . Bookmark the permalink.

8 Responses to How to use Metro UI CSS in ASP.NET MVC 4 ?

  1. selombanybah says:

    Reblogged this on Kossi Selom Banybah and commented:
    Very Useful

  2. selombanybah says:

    Very useful. Thx

  3. cmmaung says:

    I got the error 😦

    Line: 128
    Error: Object doesn’t support property or method ‘mousewheel’

    • pepitosolis says:

      Hi, in BundleConfig.cs the line that it’s related to the error is in:

      bundles.Add(new ScriptBundle("~/bundles/metro").Include(
      "~/Scripts/accordion.js",
      "~/Scripts/buttonset.js",
      "~/Scripts/calendar.js",
      "~/Scripts/carousel.js",
      "~/Scripts/contextmenu.js", //missing contextmenu.js
      "~/Scripts/dialog.js",
      "~/Scripts/dropdown.js",
      "~/Scripts/input-control.js",
      "~/Scripts/pagecontrol.js",
      "~/Scripts/pagelist.js",
      "~/Scripts/rating.js",
      "~/Scripts/slider.js",
      "~/Scripts/start-menu.js", //missing startmenu
      "~/Scripts/tile-drag.js",
      "~/Scripts/tile-slider.js"));

      I remember I got that error too, I pinpointed the error to the line:
      "~/Scripts/start-menu.js",
      So comment that line and you won’t receive the error.
      By the way I’m just looking at my code and I didn’t have the lines with the comment //missing … I don’t remember why I remove those lines.

  4. Thank you for your work. At the link to Metro UI CSS I only find version 2.0
    Some of the files you mentioned don’t exist there, starting with the *.css-files. Could you please check this?

    Thank you very much in advance!

  5. karthikvadla says:

    Hello,

    Very impressive. I thought to work on this, i followed you instructions and downloaded metro ui css from the mentioned site. I could see few files like (modern.css, modern-responsive.css, theme-dark.css)to add to in my project. Can you please help me out with this.

    And am new to this asp.net MVC 4 with metro ui css, Any references from your side will help me a lot.

    Thanks.
    Karthik

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s