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="In Metro 4 you can easily convey information through color. Presence of predefined colors and classes for working with them makes the process of color transfer very simple."> <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>Colors - 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="#">Colors</a></li> <li class="toc-entry"><a href="#_accent_colors">Accent colors</a></li> <li class="toc-entry"><a href="#_color_tables">Colors tables</a></li> <li class="toc-entry"><a href="#_additional_colors">Additional colors</a></li> <li class="toc-entry"><a href="#_colors_utils">Utils</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>Colors</h1> <p class="text-leader"> In Metro 4 you can easily convey information through color. Presence of predefined colors and classes for working with them makes the process of color transfer very simple. </p>  <h3 id="_accent_colors">Accent colors</h3> <p> For some elements (such as buttons, inputs, panes, ...) of Metro 4, special accentuating color classes are also defined. </p> <table class="table table-border row-border compact" id="accent_color_table"> <thead> <tr> <th style="width: 33%">Color</th> <th style="width: 33%">Button</th> <th style="width: 33%">Input</th> </tr> </thead> <tbody> <tr> <td>.primary</td> <td><button class="button primary">Button</button></td> <td><input type="text" class="primary"></td> </tr> <tr> <td>.secondary</td> <td><button class="button secondary">Button</button></td> <td><input type="text" class="secondary"></td> </tr> <tr> <td>.success</td> <td><button class="button success">Button</button></td> <td><input type="text" class="success"></td> </tr> <tr> <td>.alert</td> <td><button class="button alert">Button</button></td> <td><input type="text" class="alert"></td> </tr> <tr> <td>.warning</td> <td><button class="button warning">Button</button></td> <td><input type="text" class="warning"></td> </tr> <tr> <td>.yellow</td> <td><button class="button yellow">Button</button></td> <td><input type="text" class="yellow"></td> </tr> <tr> <td>.info</td> <td><button class="button info">Button</button></td> <td><input type="text" class="info"></td> </tr> <tr> <td>.dark</td> <td><button class="button dark">Button</button></td> <td><input type="text" class="dark"></td> </tr> <tr> <td>.light</td> <td><button class="button light">Button</button></td> <td><input type="text" class="light"></td> </tr> </tbody> </table> <h3 id="_predefined_colors">Predefined colors</h3> <p> Metro 4 contains many predefined colors. These colors can be used through special color classes. Example: to define background color - <code>.bg-*</code> and to define text color <code>.fg-*</code>. </p> <div class="example"> <div class="p-3 bg-red fg-white"> This is a test color </div> </div> <pre class=""><code> <div class="bg-red fg-white"> This is a test color </div> </code></pre> <h3 id="_color_tables">Color tables</h3> <p> In tables below presents colors defined in Metro 4. </p> <h4>Simple colors</h4> <table class="table table-border row-border compact" id="simple_color_table"> <thead> <tr> <th>Color</th> <th>Normal</th> </tr> </thead> <tbody> </tbody> </table>  <h4>Additional colors</h4> <table class="table table-border row-border compact" id="color_table"> <thead> <tr> <th>Color</th> <th>Light</th> <th>Normal</th> <th>Dark</th> </tr> </thead> <tbody> </tbody> </table> <h3 id="_additional_colors">Additional colors</h3> <p> In <code>metro-colors.css</code> are defined additional classes to set colors for: <code>border</code>, <code>outline</code>, <code>active</code>, <code>hover</code>, <code>focus</code>, <code>opacity</code>, <code>before</code> and <code>after</code>. </p> <table class="table table-border cell-border compact"> <thead> <tr> <td>Target</td> <td>Class</td> </tr> </thead> <tbody> <tr> <td>background</td> <td>bg-*</td> </tr> <tr> <td>text color</td> <td>fg-*</td> </tr> <tr> <td>border</td> <td>bd-*</td> </tr> <tr> <td>outline</td> <td>ol-*</td> </tr> <tr> <td>active</td> <td>bg-*-active, fg-*-active, bd-*-active, ol-*-active</td> </tr> <tr> <td>hover</td> <td>bg-*-hover, fg-*-hover, bd-*-hover, ol-*-hover</td> </tr> <tr> <td>focus</td> <td>bg-*-focus, fg-*-focus, bd-*-focus, ol-*-focus</td> </tr> <tr> <td>ribbed</td> <td>ribbed-*</td> </tr> <tr> <td>opacity</td> <td>op-*</td> </tr> <tr> <td>before</td> <td>before-bg-*, before-fg-*</td> </tr> <tr> <td>after</td> <td>after-bg-*, after-fg-*</td> </tr> </tbody> </table> <div class="example"> <button class="button ribbed-red fg-white border bd-amber">This is a ribbed button</button> <button class="button bg-cyan bg-lightGreen-hover bg-darkRed-active fg-white">This is a button with any states</button> </div> <pre class=""><code> <button class="button ribbed-red fg-white border bd-amber">...</button> <button class="button bg-cyan bg-lightGreen-hover bg-darkRed-active fg-white">...</button> </code></pre> <h3 id="_colors_utils">Utils</h3> <p> You can use classes <code>.inherit-colors</code>, <code>.inherit-background</code>, <code>.inherit-color</code> to inherit colors form parent. </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> <script> $(function(){ var simple_colors = ["black", "white", "dark", "light", "grayWhite", "grayMouse", "brandColor1", "brandColor2"]; var colors = ["lime", "green", "emerald", "blue", "teal", "cyan", "cobalt", "indigo", "violet", "pink", "magenta", "crimson", "red", "orange", "amber", "yellow", "brown", "olive", "steel", "mauve", "taupe", "gray", "grayBlue"]; var table_simple = $("#simple_color_table tbody"); var table = $("#color_table tbody"); var tr; $.each(simple_colors, function(){ tr = $("<tr>").appendTo(table_simple); $("<td>").html(this).appendTo(tr); $("<td>").html(" ").addClass("bg-"+this).appendTo(tr); }); $.each(colors, function(){ tr = $("<tr>").appendTo(table); $("<td>").html(this).appendTo(tr); $("<td>").html(" ").addClass("bg-light"+this.capitalize()).appendTo(tr); $("<td>").html(" ").addClass("bg-"+this).appendTo(tr); $("<td>").html(" ").addClass("bg-dark"+this.capitalize()).appendTo(tr); }); }); </script>    </body> </html>