Introduction

Are you tired of Bootstrap? Get started with Metro 4, the popular framework for building responsive, mobile-first sites in Metro style, with the Metro CDN and a template starter page.

Quick start

Looking to quickly add Metro 4 to your project? Use Metro CDN, provided for free by the folks at KeyCDN. Using a package manager or need to download the source files? Go to to the downloads page.

Copy-paste the stylesheet <link> into your <head> before all other stylesheets to load our CSS.


                    <link rel="stylesheet" href="https://cdn.metroui.org.ua/v4/css/metro-all.min.css">

If you need only general part of styles, use this links:


                    <link rel="stylesheet" href="https://cdn.metroui.org.ua/v4/css/metro.min.css">
                    <link rel="stylesheet" href="https://cdn.metroui.org.ua/v4/css/metro-colors.min.css">
                    <link rel="stylesheet" href="https://cdn.metroui.org.ua/v4/css/metro-rtl.min.css">
                    <link rel="stylesheet" href="https://cdn.metroui.org.ua/v4/css/metro-icons.min.css">

Add our optional JavaScript plugins and jQuery near the end of your pages, right before the closing </body> tag. Be sure to place jQuery first, as our JavaScript plugins depend on them.


                    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
                    <script src="https://cdn.metroui.org.ua/v4/js/metro.min.js"></script>

And that’s it - you’re on your way to a fully Metro 4 site. If you’re at all unsure about the general page structure, keep reading for an example page template.

Starter template

Be sure to have your pages set up with the latest design and development standards. That means using an HTML5 doctype and including a viewport meta tag for proper responsive behaviors. Put it all together and your pages should look like this:


                    <!DOCTYPE html>
                    <html lang="en">
                      <head>
                        <!-- Required meta tags -->
                        <meta charset="utf-8">
                        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

                        <!-- Metro 4 -->
                        <link rel="stylesheet" href="https://cdn.metroui.org.ua/v4/css/metro-all.min.css">
                      </head>
                      <body>
                        <h1>Hello, world!</h1>

                        <!-- jQuery first, then Metro UI JS -->
                        <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
                        <script src="https://cdn.metroui.org.ua/v4/js/metro.min.js"></script>
                      </body>
                    </html>

That’s all you need for overall page requirements.

HTML5 doctype

Metro 4 requires the use of the HTML5 doctype.


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

Responsive meta tag

Metro 4 is developed mobile first, a strategy in which we optimize code for mobile devices first and then scale up components as necessary using CSS media queries. 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">

Short demo

Metro 4

The Components Library


                    <!DOCTYPE html>
                    <html lang="en">
                      <head>
                        <meta charset="utf-8">
                        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
                        <link rel="stylesheet" href="https://cdn.metroui.org.ua/v4/css/metro-all.min.css">
                      </head>
                      <body>
                        <h1 class="text-center">Metro 4</h1>
                        <h3 class="text-center">The Components Library</h3>
                        <div data-role="cube"></div>

                        <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
                        <script src="https://cdn.metroui.org.ua/v4/js/metro.min.js"></script>
                      </body>
                    </html>

Table of contents