<% page_title "Whitehall admin style guide" %>

<div class="page-header">
  <h1>Whitehall admin style guide</h1>
</div>

<p class="lead">Whitehall admin UI is powered by bootstrap 2.0.3 with some help from the <a href="https://github.com/alphagov/govuk_frontend_toolkit">govuk_frontend_toolkit</a>. There are currently none of the standard bootstrap mixins. This guide partially documents how we use bootstrap, where whitehall styles have diverged from default styles and any custom styles needed to fill in the gaps.</p>

<% page_title "Whitehall admin style guide" %>

<div class="page-header">
  <h1>Whitehall admin style guide</h1>
</div>

<p class="lead">Whitehall admin UI is powered by bootstrap 2.0.3 with some help from the <a href="https://github.com/alphagov/govuk_frontend_toolkit">govuk_frontend_toolkit</a>. There are currently none of the standard bootstrap mixins. This guide partially documents how we use bootstrap, where whitehall styles have diverged from default styles and any custom styles needed to fill in the gaps.</p>

<h2>Grid</h2>
<p class="lead">The bootstrap grid being used relies on <code>first-child</code> and <code>last-child</code> pseudo selectors to work. It is an <a href="http://getbootstrap.com/2.3.2/scaffolding.html#gridSystem">early version of the 2.3.2 grid</a>, but it is fragile, and must be wrapped in <code>row-fluid</code>.</p>

<style>
  .grid-example {
    background: #eee;
    border: 1px solid #ccc;
  }
</style>

<div class="row-fluid">
  <div class="span2 grid-example">span2</div>
  <div class="span4 grid-example">span4</div>
  <div class="span6 grid-example">span6</div>
</div>
<div class="row-fluid">
  <div class="span12 grid-example">span12</div>
</div>

Add grid example to whitehall style guide
Add grid example to whitehall style guide

* Include Bootstrap 2.0.3 caveats
