Using Metro UI CSS version 2.0 with ASP.NET MVC

Metro UI CSS is now in version 2.0 so the previous post is not useful.

metroexample1

Metro UI CSS’s author is Sergey Pimenov from Kiev, Ukraine.

Metro UI CSS a set of styles to create a site with an interface similar to Windows 8.

metroexample2

You can use NuGet to add Metro UI CSS to your project:

PM> Install-Package Metro.UI.CSS

Well that didn’t work for me and I don’t know why, the package is added to the project but I didn’t see any new files or references added to it.

metro2.0.12

Fortunately there is another package in the NuGet Library you can use but is version 2.0.4 instead of 2.0.12.  You can see it here:

metro2.0.4

This package do the following (from my point of view):

1. Adds a reference to WebActivatorEx

2. In the folder App_Start adds a new file called “MetroUICSSBundleConfig.cs”, I show you the code here:

using System.Web.Optimization;

[assembly: WebActivatorEx.PostApplicationStartMethod(typeof(metrouicssPrueba.App_Start.MetroUICSSBundleConfig), "RegisterBundles")]

namespace metrouicssPrueba.App_Start
{
    public class MetroUICSSBundleConfig
    {
        public static void RegisterBundles()
        {
            // Add @Styles.Render("~/Content/metro-ui/css") in the <head/> of your _Layout.cshtml view
            // Add @Scripts.Render("~/bundles/metro-ui") after jQuery in your _Layout.cshtml view
            // When <compilation debug="true" />, ASP.Net will render the full readable version. When set to <compilation debug="false" />, the minified version will be rendered automatically
            BundleTable.Bundles.Add(new ScriptBundle("~/bundles/metro-ui").Include("~/Scripts/metro-ui/jquery.ui.widget.js").Include("~/Scripts/metro-ui/metro-*"));
            BundleTable.Bundles.Add(new StyleBundle("~/Content/metro-ui/css").Include("~/Content/metro-ui/css/metro-bootstrap.css", "~/Content/metro-ui/css/metro-bootstrap-responsive.css"));
        }
    }
}

You can follow the instructions in the comments:
// Add @Styles.Render("~/Content/metro-ui/css") in the <head/> of your _Layout.cshtml view
// Add @Scripts.Render("~/bundles/metro-ui") after jQuery in your _Layout.cshtml view
// When <compilation debug="true" />, ASP.Net will render the full readable version. When set to <compilation debug="false" />, the minified version will be rendered automatically

3. In the folder “Content” adds a new folder called “metro-ui” inside this folder in creates 2 new folders called “css” and “fonts”

In folder “css”  you can see the following files:

  • metro-bootstrap-responsive.css
  • metro-bootstrap.css

In folder “fonts” you can see the following files:

  • iconFont.dev.svg
  • iconFont.eot
  • iconFont.json
  • iconFont.svg
  • iconFont.ttf
  • iconFont.woff

In the folder “Scripts” it adds a new folder called “metro-ui” and add the following files:

  • jquery.ui.widget.js
  • metro-accordion.js
  • metro-button-set.js
  • metro-calendar.js
  • metro-carousel.js
  • metro-core.js
  • metro-countdown.js
  • metro-date-format.js
  • metro-datepicker.js
  • metro-dialog.js
  • metro-drag-tile.js
  • metro-dropdown.js
  • metro-fluentmenu.js
  • metro-hint.js
  • metro-input-control.js
  • metro-listview.js
  • metro-live-tile.js
  • metro-notify.js
  • metro-plugin-template.js
  • metro-progressbar.js
  • metro-rating.js
  • metro-slider.js
  • metro-stepper.js
  • metro-streamer.js
  • metro-tab-control.js
  • metro-table.js
  • metro-times.js
  • metro-touch-handler.js
  • metro-treeview.js

4. You can add the reference to the Metro UI CSS in the file Views/Shared/_Layout.cshtml. To the CSS files and to the JavaScript files.

Thats it.

Or you can use the manual way like this:

metrouihowto

As you can see in the Metro UI CSS web site. There are 5 steps to start using Metro UI CSS.

I think Step Zero is download the Metro UI CSS zip file (16.7Mb). Here: https://github.com/olton/Metro-UI-CSS/archive/master.zip

1) Create a new project ASP.NET and choose the MVC template.

2) From the zip file copy these 2 CSS files to your “Content” folder:

  • “metro-bootstrap-responsive.css” and
  • “metro-bootstrap.css”

3) In the folder “Scripts” create a new folder name it “Metro”.

Here you should copy the JavaScript files that you are planning to USE. For instance if you want to use an accordion control then add the “metro-accordion.js”.

You can copy from the zip file the following files:

  • metro-accordion.js
  • metro-button-set.js
  • metro-calendar.js
  • metro-carousel.js
  • metro-core.js
  • metro-countdown.js
  • metro-date-format.js
  • metro-datepicker.js
  • metro-dialog.js
  • metro-drag-tile.js
  • metro-dropdown.js
  • metro-fluentmenu.js
  • metro-hint.js
  • metro-initiator.js
  • metro-input-control.js
  • metro-listview.js
  • metro-live-tile.js
  • metro-loader.js
  • metro-locale.js
  • metro-notify.js
  • metro-plugin-template.js
  • metro-progressbar.js
  • metro-rating.js
  • metro-scroll.js
  • metro-slider.js
  • metro-stepper.js
  • metro-streamer.js
  • metro-tab-control.js
  • metro-table.js
  • metro-times.js
  • metro-touch-handler.js
  • metro-treeview.js

4. In your Scripts folder you already have jquery version 1.10.2, you can use the normal file or the minified version. So you need to add from the zip file “jquery.widget.min.js” and “metro.min.js”

5. If you are going to need the fonts, add them to the “Fonts” folder in your project the files needed are:

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

6. In the final code example I use an image from the zip file called “2.jpg” put that file in the “Images” folder in your project.

7. Add a new Html file called it “index.html” and use the following code, it should work:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <link href="Content/metro-bootstrap.css" rel="stylesheet" />
    <link href="Content/metro-bootstrap-responsive.css" rel="stylesheet" />

    <title>PROBANDO METRO UI CSS 2.0</title>
</head>
<body class="metro">

    <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>
    <h3>Table Bordered</h3>
    <div class="example">
        <table class="table bordered">
            <tr>
                <th>Column 1</th>
                <th>Column 2</th>
            </tr>
            <tr>
                <td>one</td>
                <td>two</td>
            </tr>
        </table>
    </div>
    <h3>Table Hovered</h3>
    <div class="example">
        <table class="table 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>
    </div>
    <h3>Input Text and Password</h3>
    <div class="example">
        <label>User Name:</label>
        <div class="input-control text" data-role="input-control">
            <input type="text" placeholder="Type your user name" />
            <button class="btn-clear" tabindex="-1"></button>
        </div>
        <label>Password:</label>
        <div class="input-control password" data-role="input-control">
            <input type="password" placeholder="Type your password" autofocus />
            <button class="btn-reveal" tabindex="-1"></button>
        </div>
    </div>

    <h3>CheckBox and Radio buttons</h3>
    <div class="example">
        <div class="input-control checkbox" data-role="input-control">
            <label>
                <input type="checkbox" checked />
                <span class="check"></span>
                Check me please.
            </label>
        </div>
        <div>
            <div class="input-control radio default-style" data-role="input-control">
                <label>
                    <input type="radio" name="r1" checked />
                    <span class="check"></span>
                    R1
                </label>
            </div>
            <div class="input-control radio default-style" data-role="input-control">
                <label>
                    <input type="radio" name="r1" />
                    <span class="check"></span>
                    R2
                </label>
            </div>
        </div>
    </div>

    <h3>Select</h3>
    <div class="example">
        <form>
            <div class="input-control select" data-role="input-control" >
                <select>
                    <option>Option 1</option>
                    <option>Option 2</option>
                    <option>Option 3</option>
                </select>
            </div>
            <br />
            <div class="input-control select" data-role="input-control">
                <select multiple>
                    <option>Value 1</option>
                    <option>Value 2</option>
                    <option>Value 3</option>
                    <option>Value 4</option>
                </select>
            </div>
        </form>
    </div>
    <h3>Buttons</h3>
    <div class="example">
        <button>Button1</button>
        <button class="default">Button2</button>
        <button disabled="disabled">Button3</button>
        <a class="button">Button4</a>
    </div>

    <h2><i class="icon-accessibility on-left"></i>Switch control</h2>
    <div class="example">
        <div class="input-control switch margin10" data-role="input-control">
            <label>
                Switch me
                <input type="checkbox" checked />
                <span class="check"></span>
            </label>
        </div>

        <div class="input-control switch margin10" data-role="input-control">
            <label>
                Switch me
                <input type="checkbox" />
                <span class="check"></span>
            </label>
        </div>

        <div class="input-control switch margin10" data-role="input-control">
            <label>
                Switch me
                <input type="checkbox" disabled />
                <span class="check"></span>
            </label>
        </div>

        <div class="input-control switch margin10" data-role="input-control">
            <label>
                Switch me
                <input type="checkbox" disabled checked />
                <span class="check"></span>
            </label>
        </div>
    </div>

    <div class="image-container shadow">
            <img src="../Images/2.jpg">
            <div class="overlay-fluid">Sample text</div>
    </div>

    <div class="example">
        <div class="rating large" data-static="false" data-score="3" data-stars="5" data-role="rating" data-show-score="true" data-score-hint="Rating: "></div>
        <div id="rating_1" class="fg-green"></div>
        <div class="rating small fg-red" data-static="false" data-score="3" data-stars="5" data-role="rating" data-show-score="true" data-score-hint="Value: "></div>
    </div>

    <script src="Scripts/jquery-1.10.2.min.js"></script>
    <script src="Scripts/jquery.widget.min.js"></script>
    <script src="Scripts/metro.min.js"></script>
    <script src="Scripts/Metro/metro-rating.js"></script>

    <script>
        $(function () {
            $("#rating_1").rating({
                static: false,
                score: 2,
                stars: 5,
                showHint: true,
                showScore: true,
                click: function (value, rating) {
                    //alert("Rating clicked with value " + value);
                    rating.rate(value);
                }
            });
        });
    </script>
</body>
</html>

The example uses one control the “Rating” control so I had to add the reference to “metro-rating.js”.
The Html file has 2 references to the CSS files from Metro UI CSS:

<link href="Content/metro-bootstrap.css" rel="stylesheet" />
<link href="Content/metro-bootstrap-responsive.css" rel="stylesheet" />

And at the end of the file you can see the references to the JavaScript files

<script src="Scripts/jquery-1.10.2.min.js"></script>
<script src="Scripts/jquery.widget.min.js"></script>
<script src="Scripts/metro.min.js"></script>
<script src="Scripts/Metro/metro-rating.js"></script>

If you need help, inside the zip file there is a folder called “docs” with examples in Html that you can use to understand how to use Metro UI CSS.

Don’t forget that you can use the Metro UI CSS web sites for more examples too. You can use the “view source” command in your browser to take a peek to the code that makes it tick.

Advertisements
This entry was posted in ASP.NET, MVC and tagged , , , , , , , . Bookmark the permalink.

10 Responses to Using Metro UI CSS version 2.0 with ASP.NET MVC

  1. Pingback: How to use Metro UI CSS in ASP.NET MVC 4 ? | pepitosolis

  2. prathap reddy k says:

    please provide sample projects using this CSS, so it will be helpful because i am new to MVC

  3. Antony Adopo says:

    Morning,
    thank you for tutorial.
    Please did you already use the tab-control plugin? because it doesn’t works for me. if yes, please tell me how.
    thanks

  4. selombanybah says:

    Reblogged this on Kossi Selom Banybah and commented:
    Thank you for this post

  5. Valeriu Z says:

    How different is it to apply this to a web forms ASP.NET application? Could you post a blog about it?

  6. Thank you, excellent component.

  7. Saoj says:

    Can you provide a sample for asp.net web application.

  8. Bob says:

    DId not work for me, installed metroUI package from nuget but doesnt seem to apply at all when markup added to the layout file.

  9. Pingback: Fix Widget-min.js Errors - Windows XP, Vista, 7 & 8

  10. bastinmin says:

    not work on me either. tried everything you said.

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