github.com/outbrain/consul@v1.4.5/ui/style-guide.html (about)

     1  <!DOCTYPE html>
     2  <html>
     3  <head>
     4    <meta charset="utf-8">
     5    <title>Consul Web UI Style Guide</title>
     6    <link rel="stylesheet" href="static/bootstrap.min.css">
     7    <link rel="stylesheet" href="static/base.css">
     8  </head>
     9  <body>
    10    <div class="container">
    11      <div class="col-md-10 col-md-offset-1">
    12        <div class="row">
    13          <div class="col-md-12">
    14            <h2>Consul Web UI Style Guide</h2>
    15            <p>This is style guide for the <a href="https://www.consul.io">Consul</a> Web UI. When possible,
    16              it's best to follow this guide modifying the UI.</p>
    17            <p>Some reasoning behind choices:
    18              <ul>
    19                <li>Colors. Bright colors were chosen to allow for easy
    20                  "scanning" of information.</li>
    21                <li>Icons will accompany most "actions", those are still
    22                  pending</li>
    23                <li>Layout. The layout will be primarily 2 columns with the
    24                  header at the top for navigation.</li>
    25            </p>
    26          </div>
    27        </div>
    28  
    29        <div class="row">
    30          <div class="col-md-12">
    31                <h2>Header</h2>
    32                <hr>
    33          </div>
    34        </div>
    35      </div>
    36    </div>
    37  
    38    <div class="container">
    39      <div class="col-md-12">
    40  
    41          <div class="row">
    42            <div class="col-md-12 col-sm-12 topbar">
    43  
    44              <div class="col-md-1 col-sm-2">
    45                <a href="#"><div class="top-brand"></div></a>
    46              </div>
    47  
    48              <div class="col-md-2 col-sm-3">
    49                  <a class="btn btn-primary" href="#">Services</a>
    50              </div>
    51              <div class="col-md-2 col-sm-3">
    52                <a class="btn btn-default" href="#">Nodes</a>
    53              </div>
    54              <div class="col-md-2 col-sm-3">
    55                  <a class="btn btn-default" href="#">Key/Value</a>
    56              </div>
    57  
    58              <div class="col-md-2 col-md-offset-1 col-sm-3 col-sm-offset-0">
    59                  <a class="btn btn-warning" href="#">5 checks failing</a>
    60              </div>
    61  
    62              <div class="col-md-2 col-sm-3">
    63                  <a class="btn btn-dropdown btn-default" href="#">
    64                    us-east-1
    65                    <span class="caret"></span>
    66                  </a>
    67              </div>
    68            </div>
    69          </div>
    70  
    71      </div>
    72    </div>
    73  
    74    <div class="container">
    75      <div class="col-md-10 col-md-offset-1">
    76  
    77        <div class="row">
    78          <div class="col-md-6">
    79            <h2>Colors</h2>
    80            <hr>
    81            <ul class="list-unstyled">
    82              <li>
    83                <div style="width: 75px; height: 75px; display:inline-block;" class="bg-pink"></div>
    84                <div style="width: 75px; height: 75px; display:inline-block" class="bg-light-pink"></div>
    85              </li>
    86              <li>
    87                <div style="width: 75px; height: 75px; display:inline-block" class="bg-red"></div>
    88              </li>
    89              <li>
    90                <div style="width: 75px; height: 75px; display:inline-block" class="bg-orange"></div>
    91              </li>
    92              <li>
    93                <div style="width: 75px; height: 75px; display:inline-block" class="bg-dark-green"></div>
    94                <div style="width: 75px; height: 75px; display:inline-block" class="bg-green"></div>
    95              </li>
    96              <li>
    97                <div style="width: 75px; height: 75px; display:inline-block" class="bg-gray"></div>
    98                <div style="width: 75px; height: 75px; display:inline-block" class="bg-light-gray"></div>
    99              </li>
   100            </ul>
   101          </div>
   102  
   103  
   104          <div class="col-md-6">
   105            <h2>Headings</h2>
   106            <hr>
   107            <h1>Heading 1</h1>
   108            <h2>Heading 2</h2>
   109            <h3>Heading 3</h3>
   110            <h4>Heading 4</h4>
   111            <h5>Heading 5</h5>
   112            <p>Paragraph text. Consul makes it simple for services to
   113              register themselves and to discover other services via a
   114              DNS or HTTP interface. Register external services such as
   115              SaaS providers as well.</p>
   116            <small>Small note text, if you need to include anything extra.</small>
   117          </div>
   118        </div>
   119  
   120        <div class="row">
   121          <div class="col-md-12">
   122            <h2>Panels</h2>
   123            <hr>
   124            <p>Panels are for displaying data in the 2nd (right) column.
   125              They show extensive information and are flexible, but also
   126              use the highlight colors to allow for scanning.</p>
   127            <hr>
   128  
   129            <div class="panel panel-danger">
   130              <div class="panel-bar"></div>
   131              <div class="panel-heading">
   132                <h3 class="panel-title">
   133                  HTTP Server Accessible
   134                  <small>httpAccess</small>
   135                  <span class="panel-note">critical</span>
   136                </h3>
   137              </div>
   138  
   139              <div class="panel-body">
   140                <p>Sends an HTTP request to the HTTP routers /health endpoint.
   141                This should return 200 OK. If it returns anything else,
   142                the headers are dumped.</p>
   143                <h5>OUTPUT</h5>
   144                <pre>
   145  HTTP/1.1 503 SERVICE UNAVAILABLE
   146  Content-Type: text/html; charset=utf-8
   147  Date: Sun, 20 Apr 2014 15:40:03 GMT
   148  Server: gunicorn/0.17.4
   149  Content-Length: 0
   150  Connection: keep-alive
   151  </pre>
   152  
   153              </div>
   154  
   155            </div>
   156  
   157  
   158            <div class="panel panel-success">
   159              <div class="panel-bar"></div>
   160              <div class="panel-heading">
   161                <h3 class="panel-title">
   162                  Mux Accessible
   163                  <small>muxAccess</small>
   164                  <span class="panel-note">passing</span>
   165                </h3>
   166              </div>
   167  
   168              <div class="panel-body">
   169                <p>Makes a TCP connection to the muxer, dumps a relevant error if the connection fails.</p>
   170  
   171                <h5>OUTPUT</h5>
   172                <pre>
   173  Socket connect Successful
   174  </pre>
   175              </div>
   176            </div>
   177  
   178  
   179            <div class="panel panel-warning">
   180              <div class="panel-bar"></div>
   181              <div class="panel-heading">
   182                <h3 class="panel-title">
   183                  Router Accessible
   184                  <small>routerAccess</small>
   185                  <span class="panel-note">warning</span>
   186                </h3>
   187              </div>
   188  
   189              <div class="panel-body">
   190                <p>Makes a TCP connection to the router, dumps a relevant error if the connection fails.</p>
   191  
   192                <h5>OUTPUT</h5>
   193                <pre>
   194  Socket connect timed out
   195  </pre>
   196              </div>
   197            </div>
   198  
   199  
   200          </div>
   201        </div>
   202  
   203        <div class="row">
   204          <div class="col-md-6">
   205            <h2>Loaders</h2>
   206            <hr>
   207            <p>Pending...</p>
   208          </div>
   209  
   210          <div class="col-md-6">
   211            <h2>Icons</h2>
   212            <hr>
   213            <p>Pending...</p>
   214          </div>
   215        </div>
   216  
   217        <div class="row">
   218          <div class="col-md-12">
   219            <h2>Buttons</h2>
   220            <hr>
   221            <a href="#" class="btn btn-default">Default button</a>
   222            <a href="#" class="btn btn-primary">Primary button</a>
   223            <a href="#" class="btn btn-success">Success button</a>
   224            <a href="#" class="btn btn-warning">Warning button</a>
   225            <a href="#" class="btn btn-danger">Danger button</a>
   226          </div>
   227        </div>
   228  
   229        <div class="row">
   230  
   231          <div class="col-md-12">
   232            <h2>Lists</h2>
   233            <hr>
   234            <p>Lists are used primarily for the first (left) column
   235              view. They are designed as a quick summary, with links
   236              embedded for the top-level item as well as sub-items (
   237              such as a list of nodes, as below).</p>
   238            <hr>
   239  
   240            <div class="list-group">
   241                <div class="list-group-item">
   242                  <div class="list-bar bg-green"></div>
   243                  <h4 class="list-group-item-heading">
   244                    <a href="#" class="subtle">vagrant-cloud-http</a>
   245                    <small>vagrant-cloud-http</small>
   246                    <div class="heading-helper">
   247                      <a class="subtle" href="#">5 passing</a>
   248                    </div>
   249                  </h4>
   250                  <ul class="list-inline">
   251                    <li><a class="subtle" href="#">node-10-0-109</a></li>
   252                    <li><a class="subtle" href="#">node-10-0-109</a></li>
   253                    <li><a class="subtle" href="#">node-10-0-109</a></li>
   254                    <li><a class="subtle" href="#">node-10-0-109</a></li>
   255                  </ul>
   256                </div>
   257  
   258                <div class="list-group-item">
   259                  <div class="list-bar bg-green"></div>
   260                  <h4 class="list-group-item-heading">
   261                    <a href="#" class="subtle">vagrant-cloud-http</a>
   262                    <small>vagrant-cloud-http</small>
   263                    <div class="heading-helper">
   264                      <a class="subtle" href="#">5 passing</a>
   265                    </div>
   266                  </h4>
   267                  <ul class="list-inline">
   268                    <li><a class="subtle" href="#">node-10-0-109</a></li>
   269                    <li><a class="subtle" href="#">node-10-0-109</a></li>
   270                    <li><a class="subtle" href="#">node-10-0-109</a></li>
   271                    <li><a class="subtle" href="#">node-10-0-109</a></li>
   272                  </ul>
   273                </div>
   274  
   275                <div class="list-group-item">
   276                  <div class="list-bar bg-orange"></div>
   277                  <h4 class="list-group-item-heading">
   278                    <a href="#" class="subtle">vagrant-cloud-http</a>
   279                    <small>vagrant-cloud-http</small>
   280                    <div class="heading-helper">
   281                      <a class="subtle" href="#">1 failing</a>
   282                    </div>
   283                  </h4>
   284                  <ul class="list-inline">
   285                    <li><a class="subtle" href="#">node-10-0-109</a></li>
   286                    <li><a class="subtle" href="#">node-10-0-109</a></li>
   287                    <li><a class="subtle" href="#">node-10-0-109</a></li>
   288                    <li><a class="subtle" href="#">node-10-0-109</a></li>
   289                  </ul>
   290                </div>
   291  
   292                <div class="list-group-item">
   293                  <div class="list-bar bg-red"></div>
   294                  <h4 class="list-group-item-heading">
   295                    <a href="#" class="subtle">vagrant-cloud-http</a>
   296                    <small>vagrant-cloud-http</small>
   297                    <div class="heading-helper">
   298                      <a class="subtle" href="#">2 failing</a>
   299                    </div>
   300                  </h4>
   301                  <ul class="list-inline">
   302                    <li><a class="subtle" href="#">node-10-0-109</a></li>
   303                    <li><a class="subtle" href="#">node-10-0-109</a></li>
   304                    <li><a class="subtle" href="#">node-10-0-109</a></li>
   305                    <li><a class="subtle" href="#">node-10-0-109</a></li>
   306                  </ul>
   307                </div>
   308            </div>
   309  
   310  
   311  
   312          </div>
   313  
   314        </div>
   315  
   316  
   317      </div>
   318    </div>
   319  </body>
   320  </html>