_docs.html

<!-- BLOCkQUOTE -->
<blockquote>
  <p><em>Yeah!! Milligram is amazing.</em></p>
</blockquote>

<!-- BUTTONS -->
<a class="button" href="#">Default Button</a>

<button class="button button-outline">Outlined Button</button>

<input class="button button-clear" type="submit" value="Clear Button">

<!-- LIST -->
<ul>
  <li>Unordered list item 1</li>
  <li>Unordered list item 2</li>
</ul>

<ol>
  <li>Ordered list item 1</li>
  <li>Ordered list item 2</li>
</ol>

<dl>
  <dt>Description list item 1</dt>
  <dd>Description list item 1.1</dd>
</dl>

<!-- FORM -->
<form>
  <fieldset>
    <label for="nameField">Name</label>
    <input type="text" placeholder="CJ Patoilo" id="nameField">
    <label for="ageRangeField">Age Range</label>
    <select id="ageRangeField">
      <option value="0-13">0-13</option>
      <option value="14-17">14-17</option>
      <option value="18-23">18-23</option>
      <option value="24+">24+</option>
    </select>
    <label for="commentField">Comment</label>
    <textarea placeholder="Hi CJ …" id="commentField"></textarea>
    <div class="float-right">
      <input type="checkbox" id="confirmField">
      <label class="label-inline" for="confirmField">Send a copy to yourself</label>
    </div>
    <input class="button-primary" type="submit" value="Send">
  </fieldset>
</form>

<!-- TABLE -->
<table class="table-hover">
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
      <th>Height</th>
      <th>Location</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Stephen Curry</td>
      <td>27</td>
      <td>1,91</td>
      <td>Akron, OH</td>
    </tr>
    <tr>
      <td>Klay Thompson</td>
      <td>25</td>
      <td>2,01</td>
      <td>Los Angeles, CA</td>
    </tr>
  </tbody>
</table>

<!-- GRID -->
<div class="container">

  <div class="row">
    <div class="column">.column</div>
    <div class="column">.column</div>
    <div class="column">.column</div>
    <div class="column">.column</div>
  </div>

  <div class="row">
    <div class="column">.column</div>
    <div class="column column-50 column-offset-25">.column column-50 column-offset-25</div>
  </div>

</div>

<!-- CODE -->
<pre><code>
.milligram {
  color: #9b4dca;
}
</code></pre>

<!-- UTILITIES -->
<div class="clearfix">

  <div class="float-left"></div>
  <div class="float-right"></div>

</div>

<!-- PANEL -->
<div class="panel panel-default">
    <div class="panel-body">
       Basic panel example
    </div>
</div>
<div class="panel panel-default">
    <div class="panel-heading">
	Panel heading
     </div>
     <div class="panel-body">
	Panel content
     </div>
</div>
<div class="panel panel-default">
    <div class="panel-heading">
	Panel heading
     </div>
     <div class="panel-body">
	Panel content
     </div>
     <div class="panel-footer">
	Panel footer
      </div>
</div>
<div class="panel panel-primary">
    <div class="panel-heading">
	Panel heading
    </div>
    <div class="panel-body">
	Panel content
     </div>
</div>

<!-- BREADCRUMB -->
<ol class="breadcrumb">
	<li class="breadcrumb-item">Home</li>
</ol>
<ol class="breadcrumb">
	<li class="breadcrumb-item"><a href="#">Home</a></li>
	<li class="breadcrumb-item">Library</li>
</ol>
<ol class="breadcrumb">
	<li class="breadcrumb-item"><a href="#">Home</a></li>
	<li class="breadcrumb-item"><a href="#">Library</a></li>
	<li class="breadcrumb-item">Data</li>
</ol>