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.
#1abc9c
#2ecc71
#3498db
#9b59b6
#f1c40f
#e67e22
#e74c3c
#f4f6f7
#bfc5c9
#6c797a
#34495e
<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>
<a href="#">Inbox <span class="badge">42</span></a>
<button class="btn btn-primary" type="button">
Messages <span class="badge">4</span>
</button>
<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's not super important.</div>
<div class="alert alert-warning" role="alert">Better check yourself, you'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.
<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.
<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>
<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>
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird |
<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.
<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>