metro4
Version:
The front-end framework for Build responsive, mobile-first projects on the web with the first front-end component library in Metro Style
257 lines (242 loc) • 16.1 kB
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">
<meta name="twitter:site" content="@metroui">
<meta name="twitter:creator" content="@pimenov_sergey">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="Metro 4 Components Library">
<meta name="twitter:description" content="Metro 4 is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with responsive grid system, extensive prebuilt components, and powerful plugins built on jQuery.">
<meta name="twitter:image" content="https://metroui.org.ua/images/m4-logo-social.png">
<meta property="og:url" content="https://metroui.org.ua/v4/index.html">
<meta property="og:title" content="Metro 4 Components Library">
<meta property="og:description" content="Metro 4 is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with responsive grid system, extensive prebuilt components, and powerful plugins built on jQuery.">
<meta property="og:type" content="website">
<meta property="og:image" content="https://metroui.org.ua/images/m4-logo-social.png">
<meta property="og:image:secure_url" content="https://metroui.org.ua/images/m4-logo-social.png">
<meta property="og:image:type" content="image/png">
<meta property="og:image:width" content="968">
<meta property="og:image:height" content="504">
<meta name="author" content="Sergey Pimenov">
<meta name="description" content="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. The most popular HTML, CSS, and JS library in Metro style.">
<meta name="keywords" content="HTML, CSS, JS, Metro, CSS3, Javascript, HTML5, UI, Library, Web, Development, Framework">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<link rel="icon" href="favicon.ico" type="image/x-icon">
<link href="metro/css/metro-all.css?ver=@@b-version" rel="stylesheet">
<link href="highlight/styles/github.css" rel="stylesheet">
<link href="docsearch/docsearch.min.css" rel="stylesheet">
<link href="css/site.css" rel="stylesheet">
<title>Metro 4 - Popular HTML, CSS and JS library</title>
</head>
<body class="m4-cloak">
<div class="container-fluid bg-brandColor2">
<header class="container topbar topbar-expand-sm">
<a href="/" class="topbar-brand fg-white border bd-white border-radius pr-2 pl-2">m<sup>4</sup></a>
<ul class="topbar-menu ml-2-sm">
<li><a href="index-old.html">Home</a></li>
<li><a href="intro.html">Guide</a></li>
<li><a href="examples.html">Examples</a></li>
<li class="d-none"><a href="#">Builder</a></li>
<li><a href="sponsors-old.html">Sponsors</a></li>
<li class="d-block d-none-md"><a href="https://github.com/olton/Metro-UI-CSS" target="_blank">Github</a></li>
</ul>
<ul class="topbar-menu d-none d-flex-md" style="margin-left: auto">
<li><a href="https://github.com/olton/Metro-UI-CSS" target="_blank"><span class="mif-github mif-2x"></span></a></li>
</ul>
</header>
</div>
<div id="spider-navigator">
<ul class="inline-list">
<li class="done"><a href="intro.html">Introduction</a></li>
<li class="done"><a href="download.html">Download</a></li>
<li class="done"><a href="contents.html">Contents</a></li>
<li class="done"><a href="browsers.html">Browsers & devices</a></li>
<li class="done"><a href="media.html">Media breakpoints</a></li>
<li class="done"><a href="events.html">Define Events</a></li>
<li class="done"><a href="i18n.html">i18n</a></li>
<li class="done"><a href="configuring.html">Configuring</a></li>
<li class="done"><a href="vuejs.html">Configuring</a></li>
<li class="done"><a href="containers.html">Containers</a></li>
<li class="done"><a href="grid.html">Grid system</a></li>
<li class="done"><a href="typography.html">Typography</a></li>
<li class="done"><a href="tables.html">Tables</a></li>
<li class="done"><a href="forms.html">Forms</a></li>
<li class="done"><a href="buttons.html">Buttons</a></li>
<li class="done"><a href="images.html">Images</a></li>
<li class="done"><a href="figures.html">Figures</a></li>
<li class="done"><a href="app-bar.html">App bar</a></li>
<li class="done"><a href="sidenavigation.html">Side navigation</a></li>
<li class="done"><a href="menu.html">Menu</a></li>
<li class="done"><a href="ribbon-menu.html">Ribbon Menu</a></li>
<li class="done"><a href="accordion.html">Accordion</a></li>
<li class="done"><a href="tabs.html">Tabs</a></li>
<li class="done"><a href="master.html">Master</a></li>
<li class="done"><a href="keypad.html">Keypad</a></li>
<li class="done"><a href="treeview.html">TreeView</a></li>
<li class="done"><a href="listview.html">ListView</a></li>
<li class="done"><a href="slider.html">Slider</a></li>
<li class="done"><a href="stepper.html">Stepper</a></li>
<li class="done"><a href="wizard.html">Wizard</a></li>
<li class="done"><a href="navview.html">Navigation View</a></li>
<li class="done"><a href="charms.html">Charms</a></li>
<li class="done"><a href="tiles.html">Tiles</a></li>
<li class="done"><a href="carousel.html">Carousel</a></li>
<li class="done"><a href="popovers.html">Popovers</a></li>
<li class="done"><a href="panels.html">Panels</a></li>
<li class="done"><a href="cards.html">Cards</a></li>
<li class="done"><a href="rating.html">Rating</a></li>
<li class="done"><a href="progress.html">Progress & Activity</a></li>
<li class="done"><a href="donut.html">Donut</a></li>
<li class="done"><a href="streamer.html">Streamer</a></li>
<li class="done"><a href="ripple.html">Ripple</a></li>
<li class="done"><a href="storage.html">Storage</a></li>
<li class="done"><a href="gravatar.html">Gravatar</a></li>
<li class="done"><a href="cube.html">Cube</a></li>
<li class="done"><a href="hints.html">Hints</a></li>
<li class="done"><a href="toast.html">Toasts</a></li>
<li class="done"><a href="notify.html">Notify system</a></li>
<li class="done"><a href="dialog.html">Dialogs</a></li>
<li class="done"><a href="windows.html">Windows</a></li>
<li class="done"><a href="calendar.html">Calendar</a></li>
<li class="done"><a href="calendarpicker.html">Calendar picker</a></li>
<li class="done"><a href="datepicker.html">Date picker</a></li>
<li class="done"><a href="timepicker.html">Time picker</a></li>
<li class="done"><a href="countdown.html">Countdown</a></li>
<li class="done"><a href="dateformat.html">Formatting date</a></li>
<li class="done"><a href="video.html">Video player</a></li>
<li class="done"><a href="audio.html">Audio player</a></li>
<li class="done"><a href="dropdown.html">Dropdown</a></li>
<li class="done"><a href="collapse.html">Collapse</a></li>
<li class="done"><a href="validator.html">Form validator</a></li>
<li class="done"><a href="draggable.html">Draggable</a></li>
<li class="done"><a href="hotkeys.html">Hotkeys</a></li>
<li class="done"><a href="scroll-events.html">Scroll events</a></li>
<li class="done"><a href="mouse-wheel.html">Mouse wheel</a></li>
<li class="done"><a href="micro-tpl.html">Micro templates</a></li>
<li class="done"><a href="color-module.html">Color module</a></li>
<li class="done"><a href="clear.html">Clear float</a></li>
<li class="done"><a href="colors.html">Colors</a></li>
<li class="done"><a href="display.html">Display & visibility</a></li>
<li class="done"><a href="embed.html">Embed</a></li>
<li class="done"><a href="flex.html">Flex</a></li>
<li class="done"><a href="float.html">Float</a></li>
<li class="done"><a href="position.html">Position</a></li>
<li class="done"><a href="sizing.html">Sizing</a></li>
<li class="done"><a href="spacing.html">Spacing</a></li>
<li class="done"><a href="border.html">Border</a></li>
<li class="done"><a href="easing.html">Easing</a></li>
<li class="done"><a href="animation.html">Animations</a></li>
<li class="done"><a href="extensions.html">Extensions</a></li>
<li class="done"><a href="functions.html">Functions</a></li>
<li class="done"><a href="icons.html">Metro Icon Font</a></li>
<li class="done"><a href="color-schemes.html">Color Schemes</a></li>
</ul>
</div>
<div class="container-fluid" id="hero-wrapper">
<div class="container hero pt-md-3 pb-md-3">
<div class="row flex-align-center">
<div class="cell-md-6 order-md-2">
<div class="img-container p-4-md">
<img src="images/logo.png">
</div>
<div class="text-center">
<div class="info-button">
<a href="https://github.com/olton/Metro-UI-CSS" class="button"><span class="mif-eye"></span> Watch</a>
<a href="https://github.com/olton/Metro-UI-CSS/watchers" class="info" id="github-watch">589</a>
</div>
<div class="info-button">
<a href="https://github.com/olton/Metro-UI-CSS" class="button"><span class="mif-star-full"></span> Star</a>
<a href="https://github.com/olton/Metro-UI-CSS/stargazers" class="info" id="github-star">5,546</a>
</div>
<div class="info-button mt-1 mt-0-md">
<a href="https://github.com/olton/Metro-UI-CSS" class="button"><span class="mif-flow-tree"></span> Fork</a>
<a href="https://github.com/olton/Metro-UI-CSS/network" class="info" id="github-fork">1,841</a>
</div>
</div>
</div>
<div class="cell-md-6 p-md-5 text-center text-left-md">
<h1 class="d-none d-block-md">Metro 4</h1>
<p class="text-leader">
<strong>Are you tired of Bootstrap or did not fall in love it?</strong>
<br />
Build responsive, mobile-first projects on the web with the first front-end component library in Metro Style.
</p>
<p class="text-leader2">
Metro 4 is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with responsive grid system, extensive prebuilt components, and powerful plugins built on jQuery.
</p>
<div class="row flex-justify-around mt-4">
<a href="intro.html" class="cell button brand1 same-color outline large m-1 success">Get started</a>
<a href="download.html" class="cell button outline large m-1 success">Download</a>
<a href="https://www.patreon.com/bePatron?u=8975658" class="cell button outline large m-1 alert">Become a Patron</a>
</div>
<p class="text-small mt-2">Currently <span class="version-number"></span></p>
<div class="mt-4">
<hr/>
<ul class="inline-list">
<li>Previous version:</li>
<li><a href="https://github.com/olton/Metro-UI-CSS/tree/metrouicss-0.95">v0.x</a></li>
<li><a href="https://github.com/olton/Metro-UI-CSS/tree/metrouicss-2x">v2.x</a></li>
<li><a href="https://github.com/olton/Metro-UI-CSS/tree/metrouicss-3x">v3.x</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<footer class="container-fluid pt-5 pb-3 pl-0 pr-0 bg-grayWhite">
<div class="container">
<div class="row">
<div class="cell-md-6">
<ul class="inline-list h-menu no-hover bg-grayWhite" style="margin-left: -.5rem">
<li><a href="https://github.com/olton/Metro-UI-CSS">Github</a></li>
<li><a href="https://www.facebook.com/metrouicss/">Facebook</a></li>
<li><a href="https://github.com/olton/Metro-UI-CSS/issues">Issues</a></li>
<li><a href="https://www.patreon.com/metroui">Donate</a></li>
</ul>
<p class="mt-0">
Metro 4 (Metro UI CSS) © 2012-2018 by <a href="mailto:sergey@pimenov.com.ua" class="no-wrap">Sergey Pimenov</a>.
<br />
<span class="no-wrap">Domain by <a href="https://imena.ua/">Imena.ua</a>.</span>
<span class="no-wrap">Hosting by <a href="https://mirohost.net/">Mirohost</a>.</span>
<span class="no-wrap">Metro CDN by <a href="https://www.keycdn.com/">KeyCDN</a>.</span>
<span class="no-wrap">IDE PhpStorm by <a href="https://www.jetbrains.com/">JetBrains</a>.</span>
<br />
Currently <span class="version-number"></span>. Code licensed <a href="https://github.com/olton/Metro-UI-CSS/blob/master/LICENSE">MIT</a>, docs <a href="https://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.
</p>
</div>
<div class="cell-md-6">
<!-- ads-html -->
</div>
</div>
</div>
</footer>
<script src="js/jquery-3.3.1.min.js"></script>
<script src="metro/js/metro.js?ver=@@b-version"></script>
<script src="particles/particles.min.js"></script>
<script>
particlesJS.load('hero-wrapper', 'particles/particles.json', function(){});
$(".version-number").html(Metro.ver());
setTimeout(function(){
var b = $(".adsbygoogle");
var h = 0;
$.each(b, function(){
var bl = $(this);
if (bl.height() < 50 || Metro.utils.getStyleOne(bl, 'display') === 'none') {
bl.parent().html("<div class='bg-red fg-white p-4 text-center h3 text-light'>With your help, I can make Metro 4 even better! Please, disable AdBlock or AdGuard. Thank you for support!</div>");
}
});
}, 1000);
Metro.utils.github("olton/Metro-UI-CSS", function(data){
$("#github-fork").text(Number(data.forks).format(0, 0, ","));
$("#github-star").text(Number(data.stargazers_count).format(0, 0, ","));
$("#github-watch").text(Number(data.subscribers_count).format(0, 0, ","));
$("#github-owner").text(data.owner.login);
$("#github-project").text(data.name);
})
</script>
<!-- ads-script -->
<!-- ga-script -->
<!-- hit-ua -->
</body>
</html>