metro4

<!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"> <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" style="padding-top: 50px"> <div class="container-fluid bg-darkMagenta fg-white pos-fixed fixed-top z-top"> <header class="app-bar container bg-darkMagenta fg-white pos-relative" data-role="appbar" data-expand-point="md"> <a href="index.html" class="d-block d-none-md brand fg-white no-hover"><span class="border bd-white border-radius p-2">m<sup>4</sup></span></a> <a href="index.html" class="d-none d-block-md brand fg-white no-hover">METRO 4</a> <ul class="app-bar-menu ml-auto text-upper"> <li><a href="intro.html">Guide</a></li> <li><a href="https://sandbox.org.ua">Sandbox</a></li> <li><a href="https://builder.metroui.org.ua">Builder</a></li> <li><a href="examples.html">Examples</a></li> <li><a href="support.html" class="text-bold fg-yellow"><span class="d-block ani-vertical">Support Me</span></a></li> <li><a href="https://forum.metroui.org.ua">Forum</a></li> <li> <a href="https://github.com/olton/Metro-UI-CSS" target="_blank"> <span class="mif-github mif-2x d-none d-block-md"></span> <span class="d-block d-none-md">Github</span> </a> </li> </ul> </header> </div> <div class="hero hero-bg text-center neb neb-hero"> <div> <a href="/" class="d-none d-inline-block-md no-decor fg-white border bd-white border-radius p-4 h1">m<sup>4</sup></a> </div> <h1 class="fg-white mt-10"><span class="reduce-1 enlarge-1-md">Up Your Work to the Next Level</span></h1> <h4 class="fg-light text-upper text-light mt-4"><span class="reduce-1 enlarge-1-md">Choose <strong>Metro 4</strong> for your sites</span></h4> <p class="fg-white text-small"><span class="mif-chevron-left"></span><span class="version-number"></span><span class="mif-chevron-right"></span></p> <div class="d-flex flex-justify-center flex-align-center mt-4 text-small"> <a href="https://github.com/olton/Metro-UI-CSS/watchers" class="m-1 fg-gray no-decor fg-white-hover transition"><span class="mif-eye"></span> <span id="github-watchers" data-role="counter" data-step="5">0</span></a> <a href="https://github.com/olton/Metro-UI-CSS/stargazers" class="enlarge-5 m-1 fg-lightGray no-decor fg-white-hover transition"><span class="mif-star-full"></span> <span id="github-stars" data-role="counter" data-step="50">0</span></a> <a href="https://github.com/olton/Metro-UI-CSS/network/members" class="m-1 fg-gray no-decor fg-white-hover transition"><span class="mif-flow-tree"></span> <span id="github-forks" data-role="counter" data-step="10">0</span></a> </div> </div> <div class="container-fluid bg-white fg-dark pt-10 pb-20 neb neb-white"> <div class="container text-center"> <div class="feature-table row mt-10 pos-absolute-md"> <div class="cell-md-4"> <div class="info-panel rounded no-overflow shadow-3"> <div class="info-panel-header bg-green fg-white">Open Source</div> <div class="info-panel-content"> <div class="mx-10 my-6"><span class="mif-file-code mif-8x fg-green"></span></div> <span class="text-leader2">Metro 4 is an open source project</span> </div> <div class="info-panel-footer"> <a href="download.html" class="button large outline success rounded">Download</a> </div> </div> </div> <div class="cell-md-4"> <div class="info-panel rounded no-overflow shadow-3"> <div class="info-panel-header bg-steel fg-white">Easy to use</div> <div class="info-panel-content"> <div class="mx-10 my-6"><span class="mif-rocket mif-8x fg-steel"></span></div> <span class="text-leader2">To use Metro 4 you do not even need to know javascript</span> </div> <div class="info-panel-footer"> <a href="intro.html" class="button large outline secondary rounded">Get started</a> </div> </div> </div> <div class="cell-md-4"> <div class="info-panel rounded no-overflow shadow-3"> <div class="info-panel-header bg-orange fg-white">For developers</div> <div class="info-panel-content"> <div class="mx-10 my-6"><span class="mif-github mif-8x fg-orange"></span></div> <span class="text-leader2">Metro 4 is easily expandable to our own needs</span> </div> <div class="info-panel-footer"> <a href="https://github.com/olton/Metro-UI-CSS" class="button large outline warning rounded">Get source</a> </div> </div> </div> </div> </div> </div> <div class="container-fluid bg-light pt-10 pb-20 neb neb-light"> <div class="container text-center"> <div class="h1 m-10"><span class="reduce-1 enlarge-1-md">What is it?</span></div> <div class="text-leader"> <p class="reduce-1 enlarge-1-md pl-5-fs pr-5-fs pl-20-md pr-20-md"> 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> <hr class="mt-10 mb-10 w-50" style="background-color: #E1E1E1">  <div class="example p-0 no-border"></div> <hr class="mt-10 mb-10 w-50" style="background-color: #E1E1E1"> <div class="text-leader2"> <p class="reduce-1 enlarge-1-md pl-5-fs pr-5-fs pl-20-md pr-20-md"> Build responsive, mobile-first projects on the web with the first front-end component library in Metro Style. </p> </div> </div> </div> <div class="container-fluid feature-bg pt-10 pb-20 neb neb-feature"> <div class="container text-center"> <div class="h1 mt-10"><span class="reduce-1 enlarge-1-md">All the Features You Need</span></div> <div class="h4 text-light"><span class="reduce-1 enlarge-1-md">With Metro 4 you get:</span></div> <div class="row mt-12"> <div class="cell-md-4 mt-4"> <div><span class="mif-embed2 mif-8x"></span></div> <h4 class="fg-white mt-4">Base styles</h4> <p> Metro 4 includes various styles for changing the appearance of html elements. </p> </div> <div class="cell-md-4 mt-4"> <div><span class="mif-library mif-8x"></span></div> <h4 class="fg-white mt-4">70+ Components</h4> <p> More than 70 components are available to you to solve almost all tasks. </p> </div> <div class="cell-md-4 mt-4"> <div><span class="mif-cogs mif-8x"></span></div> <h4 class="fg-white mt-4">Tools and Routines</h4> <p> Various built-in tool functions and classes will increase your productivity. </p> </div> </div> <div class="row mt-12"> <div class="cell-md-4 mt-4"> <div><span class="mif-bug mif-8x"></span></div> <h4 class="fg-white mt-4">Issues</h4> <p> Rapid response to detected bugs and their elimination. </p> </div> <div class="cell-md-4 mt-4"> <div><span class="mif-help mif-8x"></span></div> <h4 class="fg-white mt-4">Guide</h4> <p> Detailed description of all elements of the Metro 4 library. </p> </div> <div class="cell-md-4 mt-4"> <div><span class="mif-bubbles mif-8x"></span></div> <h4 class="fg-white mt-4">Forum</h4> <p> Get additional help from the community on the Metro 4 forum. </p> </div> </div> </div> </div> <div class="container-fluid bg-white fg-dark"> <div class="container pt-10 pb-20"> <div class="h1 mt-10 text-center"><span class="reduce-1 enlarge-1-md">Commercial support</span></div> <p class="text-leader text-center pl-10-md pr-10-md"> When using Metro 4 in a large project, core to your project or company, you want to be assured that Metro 4 and its extensions will be actively maintained with enhanced features being added to the core library, new extensions developed and any issues that are found being resolved quickly and efficiently. </p> <div class="h3 text-light mt-10 text-center"><span class="reduce-1 enlarge-1-md">To order premium support please contact to author!</span></div> <hr class="mt-10">  <div class="example p-0 no-border"></div> <hr class="mt-10"> <div class="h2 mt-20 text-center"><span class="reduce-1 enlarge-1-md">Special thanks to</span></div> <div class="row special-thanks"> <div class="cell-md-2"> <a href="https://olshansky.ua/"><img src="images/olshansky.svg"></a> </div> <div class="cell-md-2"> <a href="https://www.imena.ua/"><img src="images/imena_logo.png"></a> </div> <div class="cell-md-2"> <a href="https://mirohost.net/"><img src="images/mirohost_logo.svg"></a> </div> <div class="cell-md-2"> <a href="https://www.keycdn.com/"><img src="images/keycdn-logo.svg"></a> </div> <div class="cell-md-2"> <a href="https://www.jetbrains.com/"><img src="images/jetbrains.svg"></a> </div> </div> <hr class="mt-10 mb-10 w-50" style="background-color: #E1E1E1">  </div> </div> <footer class="footer-bg"> <div class="container pt-20 pb-20"> <div class="text-center"> <ul class="inline-list reduce-1" id="social-menu"> <li><a href="https://www.facebook.com/groups/metro4.libary/"><span class="mif-facebook"></span></a></li> <li><a href="https://twitter.com/MetroUI"><span class="mif-twitter"></span></a></li> <li><a href="#"><span class="mif-youtube"></span></a></li> <li><a href="https://github.com/olton/Metro-UI-CSS"><span class="mif-github"></span></a></li> </ul> </div> <div class="text-center mt-10"> <ul class="inline-list reduce-1" id="footer-menu"> <li><a href="https://github.com/olton/Metro-UI-CSS/blob/master/LICENSE">License</a></li> <li><a href="mailto:sergey@pimenov.com.ua">Author</a></li> <li><a href="https://forum.metroui.org.ua">Forum</a></li> <li><a href="https://github.com/olton/Metro-UI-CSS/issues">Issues</a></li> <li><a href="https://github.com/olton/Metro-UI-CSS/releases">Releases</a></li> </ul> </div> <div class="text-center m-10"> <span class="h2"><span class="fg-cyan">Made in </span><span class="fg-yellow">Ukraine</span></span> </div> <div class="text-center mt-10 reduce-1"> 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> <br/> <span class="no-wrap">Metro CDN by <a href="https://www.keycdn.com/">KeyCDN</a>.</span> <br/> <span class="no-wrap">IDE PhpStorm by <a href="https://www.jetbrains.com/">JetBrains</a>.</span> <br /> Currently <span class="version-number-full"></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>. </div> </div> </footer> <script src="js/jquery-3.3.1.min.js"></script> <script src="metro/js/metro.js?ver=@@b-version"></script> <script> $(".version-number").html(Metro.ver()); $(".version-number-full").html(Metro.ver(true)); Metro.utils.github("olton/Metro-UI-CSS", function(data){ $("#github-forks").attr("data-value", data.forks).data("counter").start(); $("#github-stars").attr("data-value", data.stargazers_count).data("counter").start(); $("#github-watchers").attr("data-value", data.subscribers_count).data("counter").start(); }) </script>    <script> setTimeout(function(){ var b = $(".adsbygoogle"); var div = $(".example"); if (Metro.utils.isLocalhost()) { return ; } if (b.length === 0) { div.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.<br>Thank you for your support!</div>"); } else { $.each(b, function(){ var bl = $(this); if (bl.height() < 50 || Metro.utils.getStyleOne(bl, 'display') === 'none') { div.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.<br>Thank you for your support!</div>"); } }); } }, 1000) </script> </body> </html>