I am interested in incorporating the METRO UI CSS into my application:
Begin by creating an ASP NET MVC Project
To download METRO UI MVC, follow these steps:
Package Manager Console: PM> Install-Package Metro.UI.CSSAdjust the bundles to include the following components:
bundles.Add(new ScriptBundle("~/bundles/jquery").Include( "~/Scripts/jquery-{version}.js", "~/Scripts/metro-ui/jquery.ui.widget.js", "~/Scripts/metro-ui/metro.min.js" )); bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include( "~/Scripts/jquery.validate*", "~/Scripts/metro-ui/jquery.ui.widget.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 ScriptBundle("~/bundles/bootstrap").Include( "~/Scripts/bootstrap.js", "~/Scripts/respond.js")); bundles.Add(new StyleBundle("~/Content/css").Include( //"~/Content/bootstrap.css", //"~/Content/site.css", "~/Content/metro-ui/css/metro-bootstrap.css", "~/Content/metro-ui/css/metro-bootstrap-responsive.css", "~/Content/metro-ui/css/iconFont.min.css")); }
This code should be added to the head section of your _Layout.cshtml file:
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@ViewBag.Title - My ASP.NET Application</title>
<link href="Content/metro-bootstrap.css" rel="stylesheet" />
<link href="Content/metro-bootstrap-responsive.css" rel="stylesheet" />
<script src="Scripts/jquery-1.10.2.js"></script>
<script src="Scripts/jquery.widget.min.js"></script>
<script src="Scripts/metro.min.js"></script>
@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")
@Styles.Render("~/Content/metro-ui/css")
</head>
Prior to closing the body tag, make sure to include the following:
<body class="metro">
(...)
@RenderBody()
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/metro-ui")
@Scripts.Render("~/bundles/bootstrap")
@RenderSection("scripts", required: false)
</body>
</html>
This is what my segment of the solution explorer looks like:
For instance, in the View for controller: Home, action: Index, I have included a link to view further information:
The end result is that clicking on the list items (e.g., Base CSS) does not yield any response...
Further documentation can be found here: https://github.com/olton/Metro-UI-CSS/blob/master/docs/navbar.html
What could be causing this issue?