Lagotto uses a color palette from Flat UI Colors. wet-asphalt is used as primary color (body text, navbar, etc.), peter-river for links, and sun-flower as warning color.

turquoise

#1abc9c

emerald

#2ecc71

peter-river

#3498db

amethyst

#9b59b6

sun-flower

#f1c40f

carrot

#e67e22

alizarin

#e74c3c

clouds

#f4f6f7

silver

#bfc5c9

asbestos

#6c797a

wet-asphalt

#34495e

Labels

Default Primary Success Info Warning Danger
<span class="label label-default">Default</span>
<span class="label label-primary">Primary</span>
<span class="label label-success">Success</span>
<span class="label label-info">Info</span>
<span class="label label-warning">Warning</span>
<span class="label label-danger">Danger</span>

Badges

<a href="#">Inbox <span class="badge">42</span></a>
<button class="btn btn-primary" type="button">
  Messages <span class="badge">4</span>
</button>

Alerts

<div class="alert alert-success" role="alert">You successfully read this important alert message.</div>
<div class="alert alert-info" role="alert">This alert needs your attention, but it&#39;s not super important.</div>
<div class="alert alert-warning" role="alert">Better check yourself, you&#39;re not looking too good.</div>
<div class="alert alert-danger" role="alert">Change a few things up and try submitting again.</div>

Lagotto uses a fixed navbar on top, avoiding submenus if possible. For navigation within a page we are using pills.

Pills

<ul class="nav nav-pills">
  <li role="presentation" class="active"><a href="#">Home</a></li>
  <li role="presentation"><a href="#">Profile</a></li>
  <li role="presentation"><a href="#">Messages</a></li>
</ul>

Panels are the primary way in which content is organized in Lagotto.

Panels

Panel title

Panel content




<div class="panel panel-default">
  <div class="panel-heading"><h3 class="panel-title">Panel title</h3></div>
  <div class="panel-body">Panel content</div>
</div>



Panels with context

Panel title

Panel content

Panel title

Panel content

Panel title

Panel content

Panel title

Panel content




<div class="panel panel-success">
  <div class="panel-heading"><h3 class="panel-title">Panel title</h3></div>
  <div class="panel-body">Panel content</div>
</div>
<div class="panel panel-info">
  <div class="panel-heading"><h3 class="panel-title">Panel title</h3></div>
  <div class="panel-body">Panel content</div>
</div>
<div class="panel panel-warning">
  <div class="panel-heading"><h3 class="panel-title">Panel title</h3></div>
  <div class="panel-body">Panel content</div>
</div>
<div class="panel panel-danger">
  <div class="panel-heading"><h3 class="panel-title">Panel title</h3></div>
  <div class="panel-body">Panel content</div>
</div>



Panel with tables

Panel heading
# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter




<div class="panel panel-default">
  <div class="panel-heading">Panel heading</div>
  <table class="table">
    <thead>
      <tr>
        <th>#</th>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Username</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">1</th>
        <td>Mark</td>
        <td>Otto</td>
        <td>@mdo</td>
      </tr>
      <tr>
        <th scope="row">2</th>
        <td>Jacob</td>
        <td>Thornton</td>
        <td>@fat</td>
      </tr>
      <tr>
        <th scope="row">3</th>
        <td>Larry</td>
        <td>the Bird</td>
        <td>@twitter</td>
      </tr>
    </tbody>
  </table>
</div>



Using the rogue gem and Github style for syntax highlighting.

Lagotto uses the Adobe open source font Source Sans Pro as base font with a 18px base font size. Source Code Pro is used for monospaced text.

Headings

h1.Heading 36 px

h2.Heading 32.4 px

h3.Heading 28.8 px

h4.Heading 25.2 px

h5.Heading 18 px
h6.Heading 18 px
<h1>h1.Heading <small>36 px</small></h1>
<h2>h2.Heading <small>32.4 px</small></h2>
<h3>h3.Heading <small>28.8 px</small></h3>
<h4>h4.Heading <small>25.2 px</small></h4>
<h5>h5.Heading <small>18 px</small></h5>
<h6>h6.Heading <small>18 px</small></h6>