Skip to content

Get started with Metro UI

Metro UI is a free, open source, html-first toolkit for developing websites with HTML, CSS, and JS!

See the Example by Serhii Pimenov on CodePen.

Get started by including production-ready CSS and JavaScript via CDN without the need for any build steps.

  1. Create an HTML file and include the following code:
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Metro UI Demo</title>
<link rel="stylesheet" href="https://cdn.metroui.org.ua/current/metro.css">
<link rel="stylesheet" href="https://cdn.metroui.org.ua/current/icons.css">
</head>
<body class="h-vh-100 d-flex flex-column flex-justify-center flex-align-center">
<div id="root" class="h-100 d-flex flex-center flex-column">
<div class="h1">Counter</div>
<div class="m-2">Counter: {{ counter }}</div>
<div class="m-2"><input class="text-center" type="text" data-model="counter"></div>
<div>Статус: {{ status }}</div>
<div class="m-2 d-flex flex-row gap-2">
<button @click="this.counter++">Inc Counter</button>
<button @click="this.counter--">Dec Counter</button>
</div>
</div>
<script src="https://cdn.metroui.org.ua/current/metro.js"></script>
<script>
var app = new Model({
counter: 0,
status() {
return this.counter === 0
? "Zero"
: this.counter > 0
? "Positive"
: "Negative";
}
});
app.init("#root");
</script>
</body>
</html>
  1. Open the page in your browser of choice to see your Metro UI page. Now you can start building with Metro UI by creating your own layout, adding dozens of components, and using our official examples.
  2. Congratulations! You have successfully created your first Metro UI Reactive App.

Metro UI uses a handful of important global styles and settings, all of which are almost exclusively geared towards the normalization of cross-browser styles.

Metro UI requires the use of the HTML5 doctype. Without it, you may encounter some styling issues.

<!doctype html>
<html lang="en">
...
</html>

Metro UI is designed to make it easy to create responsive mobile-first sites and includes:

  • Responsive, mobile-first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases.
  • Classes for showing and hiding content by device via media query.
  • Spacing classes to modify an element’s appearance with responsive features.

To ensure proper rendering and touch zooming for all devices, add the responsive viewport meta-tag to your <head>.

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

For improved cross-browser rendering, we use a special reset file to correct inconsistencies across browsers and devices while providing slightly more opinionated resets to common HTML elements.