Utilities & Quarks

Utilities

Colours

We have a lot of colours that we use across the application. Here they are sorted into categories.

Brand colours

AB blue
#0068ac
AB orange
#fcb034
AB background blue
#031e31

Grays

Darkest gray
#333
Dark gray
#595959
Normal gray
#777
Medium gray
#888
Light gray
#ccc
Lighter gray
#ddd
Background gray
#efefef
Light background gray
#f7f7f7

Status colours

Success
#70a328
Darker success
#4e9451
Danger
#ef542f 
<p>
  <strong>Brand colours</strong>
</p>
<div class="row">
  <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
    <div class="thumbnail text-center">
      <img class="img-responsive" src="http://placehold.it/300x300/0068ac/0068ac" />
      AB blue
      <br><code>#0068ac</code>
      <!-- Variable name: $ab-blue -->
    </div>
  </div>
  <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
    <div class="thumbnail text-center">
      <img class="img-responsive" src="http://placehold.it/300x300/fcb034/fcb034" />
      AB orange
      <br><code>#fcb034</code>
      <!-- Variable name: $ab-orange -->
    </div>
  </div>
  <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
    <div class="thumbnail text-center">
      <img class="img-responsive" src="http://placehold.it/300x300/031e31/031e31" />
      AB background blue
      <br><code>#031e31</code>
      <!-- Variable name: $bg-blue -->
    </div>
  </div>
</div>

<p>
  <strong>Grays</strong>
</p>
<div class="row">
  <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
    <div class="thumbnail text-center">
      <img class="img-responsive" src="http://placehold.it/300x300/333333/333333" />
      Darkest gray
      <br><code>#333</code>
      <!-- Variable name: $gray-really-dark -->
    </div>
  </div>
  <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
    <div class="thumbnail text-center">
      <img class="img-responsive" src="http://placehold.it/300x300/595959/595959" />
      Dark gray
      <br><code>#595959</code>
      <!-- Variable name: $gray-dark -->
    </div>
  </div>
  <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
    <div class="thumbnail text-center">
      <img class="img-responsive" src="http://placehold.it/300x300/777777/777777" />
      Normal gray
      <br><code>#777</code>
      <!-- Variable name: $gray-normal -->
    </div>
  </div>
  <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
    <div class="thumbnail text-center">
      <img class="img-responsive" src="http://placehold.it/300x300/888888/888888" />
      Medium gray
      <br><code>#888</code>
      <!-- Variable name: $gray-medium -->
    </div>
  </div>
  <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
    <div class="thumbnail text-center">
      <img class="img-responsive" src="http://placehold.it/300x300/cccccc/cccccc" />
      Light gray
      <br><code>#ccc</code>
      <!-- Variable name: $gray-light -->
    </div>
  </div>
  <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
    <div class="thumbnail text-center">
      <img class="img-responsive" src="http://placehold.it/300x300/dddddd/dddddd" />
      Lighter gray
      <br><code>#ddd</code>
      <!-- Variable name: $gray-lighter-->
    </div>
  </div>
</div>
<div class="row">
  <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
    <div class="thumbnail text-center">
      <img class="img-responsive" src="http://placehold.it/300x300/efefef/efefef" />
      Background gray
      <br><code>#efefef</code>
      <!-- Variable name: $bg-gray -->
    </div>
  </div>
  <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
    <div class="thumbnail text-center">
      <img class="img-responsive" src="http://placehold.it/300x300/f7f7f7/f7f7f7" />
      Light background gray
      <br><code>#f7f7f7</code>
      <!-- Variable name: $bg-gray-light -->
    </div>
  </div>
</div>

<p>
  <strong>Status colours</strong>
</p>
<div class="row">
  <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
    <div class="thumbnail text-center">
      <img class="img-responsive" src="http://placehold.it/300x300/70a328/70a328" />
      Success
      <br><code>#70a328</code>
      <!-- Variable name: $good -->
    </div>
  </div>
  <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
    <div class="thumbnail text-center">
      <img class="img-responsive" src="http://placehold.it/300x300/4e9451/4e9451" />
      Darker success
      <br><code>#4e9451</code>
      <!-- Variable name: $dark-good -->
    </div>
  </div>
  <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
    <div class="thumbnail text-center">
      <img class="img-responsive" src="http://placehold.it/300x300/ef542f/ef542f" />
      Danger
      <br><code>#ef542f</code>
      <!-- Variable name: $bad -->
    </div>
  </div>
</div>

Font family

We use Open Sans for everything directly Autobutler-related (minus our logo). Specimens and further info can be found on Google Fonts, which is also where we serve the font from.

Quarks

Headings

These are our headings. They are almost the same as the Bootstrap defaults, except we use a font weight of 300 (light).

h1. Heading

font-size: 36px

h2. Heading

font-size: 30px

h3. Heading

font-size: 24px

h4. Heading

font-size: 18px
h5. Heading
font-size: 14px
h6. Heading
font-size: 12px
 
<table class="table">
  <tbody>
    <tr>
      <td>
        <h1>h1. Heading</h1>
      </td>
      <td class="vertical-align-middle text-muted">
        <h1><code>font-size: 36px</code></h1>
      </td>
    </tr>
    <tr>
      <td>
        <h2>h2. Heading</h2>
      </td>
      <td class="vertical-align-middle text-muted">
        <h2><code>font-size: 30px</code></h2>
      </td>
    </tr>
    <tr>
      <td>
        <h3>h3. Heading</h3>
      </td>
      <td class="vertical-align-middle text-muted">
        <h3><code>font-size: 24px</code></h3>
      </td>
    </tr>
    <tr>
      <td>
        <h4>h4. Heading</h4>
      </td>
      <td class="vertical-align-middle text-muted">
        <h4><code>font-size: 18px</code></h4>
      </td>
    </tr>
    <tr>
      <td>
        <h5>h5. Heading</h5>
      </td>
      <td class="vertical-align-middle text-muted">
        <h5><code>font-size: 14px</code></h5>
      </td>
    </tr>
    <tr>
      <td>
        <h6>h6. Heading</h6>
      </td>
      <td class="vertical-align-middle text-muted">
        <h6><code>font-size: 12px</code></h6>
      </td>
    </tr>
  </tbody>
</table>

Horizontal rule

Just a hr that's supposed to be as simple as possible. A thin, gray line to separate content. A little bit darker than the Bootstrap default. 

<hr>

Inputs

We have a few default styles for most input types. A little extra padding, solid border, and rounded corners. 

<form class="form-horizontal" action="#" method="post">
  <div class="form-group">
    <label class="control-label col-sm-2"><code>input[type=text]</code></label>
    <div class="col-sm-10">
      <input class="form-control" type="text" name="text" id="text">
    </div>
  </div>
  <div class="form-group">
    <label class="control-label col-sm-2"><code>input[type=search]</code></label>
    <div class="col-sm-10">
      <input class="form-control" type="search" name="search" id="search">
    </div>
  </div>
  <div class="form-group">
    <label class="control-label col-sm-2"><code>input[type=email]</code></label>
    <div class="col-sm-10">
      <input class="form-control" type="email" name="email" id="email">
    </div>
  </div>
  <div class="form-group">
    <label class="control-label col-sm-2"><code>input[type=tel]</code></label>
    <div class="col-sm-10">
      <input class="form-control" type="tel" name="tel" id="tel">
    </div>
  </div>
  <div class="form-group">
    <label class="control-label col-sm-2"><code>input[type=password]</code></label>
    <div class="col-sm-10">
      <input class="form-control" type="password" name="password" id="password">
    </div>
  </div>
  <div class="form-group">
    <label class="control-label col-sm-2"><code>input[type=file]</code></label>
    <div class="col-sm-10">
      <input class="form-control" type="file" name="file" id="file">
    </div>
  </div>
  <div class="form-group">
    <label class="control-label col-sm-2"><code>input[type=number]</code></label>
    <div class="col-sm-10">
      <input class="form-control" type="number" name="number" id="number">
    </div>
  </div>
  <div class="form-group">
    <label class="control-label col-sm-2"><code>select</code></label>
    <div class="col-sm-10">
      <select class="form-control ab-dropdown" name="select" id="select">
        <option value="one">One</option>
        <option value="two">Two</option>
        <option value="three">Three</option>
      </select>
    </div>
  </div>
  <div class="form-group">
    <label class="control-label col-sm-2"><code>textarea</code></label>
    <div class="col-sm-10">
      <textarea class="form-control" name="textarea" id="textarea" cols="30" rows="10"></textarea>
    </div>
  </div>
</form>

Our links are Autobutler blue (#0068ac) by default and become a little darker (#004979) on hover.

A blue link!