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="Discover what's included in Metro 4, including our precompiled and source code flavors. Remember, Metro's JavaScript plugins require jQuery."> <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>Contents - Metro 4 :: Popular HTML, CSS and JS library</title> </head> <body class="m4-cloak" data-role="htmlcontainer" data-html-source="header.html" data-insert-mode="prepend"> <div class="container-fluid"> <div class="row flex-xl-nowrap"> <div class="cell-md-3 cell-xl-2 pr-0 border-right bd-light" id="sidenav" data-role="htmlcontainer" data-html-source="sidenav.html" data-insert-mode="replace" data-on-load="initDocSearchEngine()"></div> <div class="d-none d-block-xl cell-xl-2 order-2 border-left bd-light toc-wrapper"> <h5>Table of contents</h5> <hr/> <ul class="toc-nav"> <li class="toc-entry"><a href="#">Contents</a></li> <li class="toc-entry"><a href="#_precompiled">Precompiled</a></li> <li class="toc-entry"><a href="#_source_code">Source code</a></li> </ul> </div> <main class="cell-md-9 cell-xl-8 order-1 pr-1-sx pl-1-sx pr-5-md pl-5-md"> <div class="place-right d-none d-block-lg" style="width: 200px;"> <img src="images/logo.png" class="w-100"> </div> <h1>Contents</h1> <p class="text-leader"> Discover what's included in Metro 4, including our precompiled and source code flavors. Remember, Metro's JavaScript plugins require jQuery. </p>  <h3 id="_precompiled">Precompiled Metro</h3> <p> Once downloaded, unzip the compressed folder and you’ll see something like this: </p> <pre class="prettyprint plain-text"><code> metro/ ├── css/ │ ├── metro.css │ ├── metro.min.css │ ├── metro-colors.css │ ├── metro-colors.min.css │ ├── metro-rtl.css │ ├── metro-rtl.min.css │ ├── metro-schemes.css │ ├── metro-schemes.min.css │ ├── metro-icons.css │ ├── metro-icons.min.css │ ├── metro-all.css │ ├── metro-all.min.css │ ├── schemes/ │ └── maps/ └── js/ │ ├── metro.js │ ├── metro.min.js │ └── metro.min.js.map └── mif/ ├── metro.eot ├── metro.svg ├── metro.ttf ├── metro.woff └── metro.json </code></pre> <p> This is the most basic form of Metro: precompiled files for quick drop-in usage in nearly any web project. We provide compiled CSS and JS (metro*.*), as well as compiled and minified CSS and JS (metro*.min.*). CSS source maps (metro*.map) are available for use with certain browsers’ developer tools. </p> <h5>Precompiled short</h5> <pre class="prettyprint plain-text"><code> metro/ ├── css/ │ └── metro-all.min.css └── js/ │ ├── metro.min.js └── mif/ └── metro.woff </code></pre> <p> This is the most for production usage. </p> <h3 id="_source_code">Source code</h3> <p> The Metro source code download includes the precompiled CSS and JavaScript assets, along with source Less, JavaScript, and documentation. More specifically, it includes the following and more: </p> <pre class="prettyprint plain-text"><code> metro/ ├── build/ │ ├── mif/ │ ├── css/ │ └── js/ ├── docs/ │ └── examples/ ├── icons/ ├── js/ └── less/ </code></pre> <p> The <span class="tally">icons/</span> are the source code for Metro Icon Font. The <span class="tally">less/</span> and <span class="tally">js/</span> are the source code for our CSS and JavaScript. The <span class="tally">build/</span> folder includes everything listed in the precompiled download section above. The <span class="tally">docs/</span> folder includes the source code for our documentation, and <span class="tally">examples/</span> of Metro usage. Beyond that, any other included file provides support for packages, license information, and development. </p> </main> </div> </div> <script src="docsearch/docsearch.min.js"></script> <script src="js/jquery-3.3.1.min.js"></script> <script src="metro/js/metro.js?ver=@@b-version"></script> <script src="highlight/highlight.pack.js"></script> <script src="js/clipboard.min.js"></script> <script src="js/site.js"></script>    </body> </html>