Metro UI CSS is now in version 2.0 so the previous post is not useful.
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.
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.
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:
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:
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.
