<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Consul Web UI Style Guide</title> <link rel="stylesheet" href="static/bootstrap.min.css"> <link rel="stylesheet" href="static/base.css"> </head> <body> <div class="container"> <div class="col-md-10 col-md-offset-1"> <div class="row"> <div class="col-md-12"> <h2>Consul Web UI Style Guide</h2> <p>This is style guide for the <a href="https://www.consul.io">Consul</a> Web UI. When possible, it's best to follow this guide modifying the UI.</p> <p>Some reasoning behind choices: <ul> <li>Colors. Bright colors were chosen to allow for easy "scanning" of information.</li> <li>Icons will accompany most "actions", those are still pending</li> <li>Layout. The layout will be primarily 2 columns with the header at the top for navigation.</li> </p> </div> </div> <div class="row"> <div class="col-md-12"> <h2>Header</h2> <hr> </div> </div> </div> </div> <div class="container"> <div class="col-md-12"> <div class="row"> <div class="col-md-12 col-sm-12 topbar"> <div class="col-md-1 col-sm-2"> <a href="#"><div class="top-brand"></div></a> </div> <div class="col-md-2 col-sm-3"> <a class="btn btn-primary" href="#">Services</a> </div> <div class="col-md-2 col-sm-3"> <a class="btn btn-default" href="#">Nodes</a> </div> <div class="col-md-2 col-sm-3"> <a class="btn btn-default" href="#">Key/Value</a> </div> <div class="col-md-2 col-md-offset-1 col-sm-3 col-sm-offset-0"> <a class="btn btn-warning" href="#">5 checks failing</a> </div> <div class="col-md-2 col-sm-3"> <a class="btn btn-dropdown btn-default" href="#"> us-east-1 <span class="caret"></span> </a> </div> </div> </div> </div> </div> <div class="container"> <div class="col-md-10 col-md-offset-1"> <div class="row"> <div class="col-md-6"> <h2>Colors</h2> <hr> <ul class="list-unstyled"> <li> <div style="width: 75px; height: 75px; display:inline-block;" class="bg-pink"></div> <div style="width: 75px; height: 75px; display:inline-block" class="bg-light-pink"></div> </li> <li> <div style="width: 75px; height: 75px; display:inline-block" class="bg-red"></div> </li> <li> <div style="width: 75px; height: 75px; display:inline-block" class="bg-orange"></div> </li> <li> <div style="width: 75px; height: 75px; display:inline-block" class="bg-dark-green"></div> <div style="width: 75px; height: 75px; display:inline-block" class="bg-green"></div> </li> <li> <div style="width: 75px; height: 75px; display:inline-block" class="bg-gray"></div> <div style="width: 75px; height: 75px; display:inline-block" class="bg-light-gray"></div> </li> </ul> </div> <div class="col-md-6"> <h2>Headings</h2> <hr> <h1>Heading 1</h1> <h2>Heading 2</h2> <h3>Heading 3</h3> <h4>Heading 4</h4> <h5>Heading 5</h5> <p>Paragraph text. Consul makes it simple for services to register themselves and to discover other services via a DNS or HTTP interface. Register external services such as SaaS providers as well.</p> <small>Small note text, if you need to include anything extra.</small> </div> </div> <div class="row"> <div class="col-md-12"> <h2>Panels</h2> <hr> <p>Panels are for displaying data in the 2nd (right) column. They show extensive information and are flexible, but also use the highlight colors to allow for scanning.</p> <hr> <div class="panel panel-danger"> <div class="panel-bar"></div> <div class="panel-heading"> <h3 class="panel-title"> HTTP Server Accessible <small>httpAccess</small> <span class="panel-note">critical</span> </h3> </div> <div class="panel-body"> <p>Sends an HTTP request to the HTTP routers /health endpoint. This should return 200 OK. If it returns anything else, the headers are dumped.</p> <h5>OUTPUT</h5> <pre> HTTP/1.1 503 SERVICE UNAVAILABLE Content-Type: text/html; charset=utf-8 Date: Sun, 20 Apr 2014 15:40:03 GMT Server: gunicorn/0.17.4 Content-Length: 0 Connection: keep-alive </pre> </div> </div> <div class="panel panel-success"> <div class="panel-bar"></div> <div class="panel-heading"> <h3 class="panel-title"> Mux Accessible <small>muxAccess</small> <span class="panel-note">passing</span> </h3> </div> <div class="panel-body"> <p>Makes a TCP connection to the muxer, dumps a relevant error if the connection fails.</p> <h5>OUTPUT</h5> <pre> Socket connect Successful </pre> </div> </div> <div class="panel panel-warning"> <div class="panel-bar"></div> <div class="panel-heading"> <h3 class="panel-title"> Router Accessible <small>routerAccess</small> <span class="panel-note">warning</span> </h3> </div> <div class="panel-body"> <p>Makes a TCP connection to the router, dumps a relevant error if the connection fails.</p> <h5>OUTPUT</h5> <pre> Socket connect timed out </pre> </div> </div> </div> </div> <div class="row"> <div class="col-md-6"> <h2>Loaders</h2> <hr> <p>Pending...</p> </div> <div class="col-md-6"> <h2>Icons</h2> <hr> <p>Pending...</p> </div> </div> <div class="row"> <div class="col-md-12"> <h2>Buttons</h2> <hr> <a href="#" class="btn btn-default">Default button</a> <a href="#" class="btn btn-primary">Primary button</a> <a href="#" class="btn btn-success">Success button</a> <a href="#" class="btn btn-warning">Warning button</a> <a href="#" class="btn btn-danger">Danger button</a> </div> </div> <div class="row"> <div class="col-md-12"> <h2>Lists</h2> <hr> <p>Lists are used primarily for the first (left) column view. They are designed as a quick summary, with links embedded for the top-level item as well as sub-items ( such as a list of nodes, as below).</p> <hr> <div class="list-group"> <div class="list-group-item"> <div class="list-bar bg-green"></div> <h4 class="list-group-item-heading"> <a href="#" class="subtle">vagrant-cloud-http</a> <small>vagrant-cloud-http</small> <div class="heading-helper"> <a class="subtle" href="#">5 passing</a> </div> </h4> <ul class="list-inline"> <li><a class="subtle" href="#">node-10-0-109</a></li> <li><a class="subtle" href="#">node-10-0-109</a></li> <li><a class="subtle" href="#">node-10-0-109</a></li> <li><a class="subtle" href="#">node-10-0-109</a></li> </ul> </div> <div class="list-group-item"> <div class="list-bar bg-green"></div> <h4 class="list-group-item-heading"> <a href="#" class="subtle">vagrant-cloud-http</a> <small>vagrant-cloud-http</small> <div class="heading-helper"> <a class="subtle" href="#">5 passing</a> </div> </h4> <ul class="list-inline"> <li><a class="subtle" href="#">node-10-0-109</a></li> <li><a class="subtle" href="#">node-10-0-109</a></li> <li><a class="subtle" href="#">node-10-0-109</a></li> <li><a class="subtle" href="#">node-10-0-109</a></li> </ul> </div> <div class="list-group-item"> <div class="list-bar bg-orange"></div> <h4 class="list-group-item-heading"> <a href="#" class="subtle">vagrant-cloud-http</a> <small>vagrant-cloud-http</small> <div class="heading-helper"> <a class="subtle" href="#">1 failing</a> </div> </h4> <ul class="list-inline"> <li><a class="subtle" href="#">node-10-0-109</a></li> <li><a class="subtle" href="#">node-10-0-109</a></li> <li><a class="subtle" href="#">node-10-0-109</a></li> <li><a class="subtle" href="#">node-10-0-109</a></li> </ul> </div> <div class="list-group-item"> <div class="list-bar bg-red"></div> <h4 class="list-group-item-heading"> <a href="#" class="subtle">vagrant-cloud-http</a> <small>vagrant-cloud-http</small> <div class="heading-helper"> <a class="subtle" href="#">2 failing</a> </div> </h4> <ul class="list-inline"> <li><a class="subtle" href="#">node-10-0-109</a></li> <li><a class="subtle" href="#">node-10-0-109</a></li> <li><a class="subtle" href="#">node-10-0-109</a></li> <li><a class="subtle" href="#">node-10-0-109</a></li> </ul> </div> </div> </div> </div> </div> </div> </body> </html>