City of Tampa Pattern Library

Basic Grid

The site uses bootstraps standard grid formatting. A row wraps around each set of columns, the columns must add up to 12 and define their break point when to go full width either xs, sm, md or lg.

WARNING: .outline-columns-for-examples is a class used only to show column outlines in the pattern library remove this in production.

Column small 3
Column small 9
Column md 5
Column md 4
Column md 3
<div class="row outline-columns-for-examples">
  <div class="col-sm-3">
    Column small 3
  </div>
  <div class="col-sm-9">
    Column small 9
  </div>
</div>
<div class="row outline-columns-for-examples">
  <div class="col-md-5">
    Column md 5
  </div>
  <div class="col-md-4">
    Column md 4
  </div>
  <div class="col-md-3">
    Column md 3
  </div>
</div>

Blockquote

Blockquotes mostly based off bootstrap. <footer> is optional and the reverse class will right align it.

Normal blockquote to really drive home an important point or highlight something fun.

Someone famous in Source Title

Or right align it with a reverse tag.

Someone famous in Source Title
<blockquote>
  <p>Normal blockquote to really drive home an important point or highlight something fun.</p>
  <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

<blockquote class="blockquote-reverse">
  <p>Or right align it with a reverse tag.</p>
  <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

Flexbox

These flex classes can be used to create some advanced layouts more easily. You can easily nest Flexboxes inside other Flexboxes for advanced layouts.

WARNING: At the minimum .flex AND a direction class such as .flex-row or .flex-column is needed to activate this utility.

NOTE: .example-outlined class is strictly for this site to demo invisible borders

Flex Row With an item that grows

First Example Item First Example Item First Example Item
Example Usage:

This is better than a float left on the icon since the text will not wrap under the icon as it would with a float.

The icon will stay the current size while the text area will grow to fill in the available space.
Example Usage:

Use empty grow elements to distribute space between buttons

Flex Row with items centered and justified

Second Example Item Second Example Item Second Example Item
<h3>Flex Row With an item that grows</h3>
<div class="example-outlined flex flex-row">
  <span>First Example Item</span>
  <span class="flex-item-grow" style="padding:20px;">First Example Item</span>
  <span>First Example Item</span>
</div>

<strong>Example Usage:</strong>
<p>This is better than a float left on the icon since the text will not wrap under the icon as it would with a float.</p>
<div class="alert alert-info">
  <div class="flex flex-row">
    <div class="padded-h">
      <i class="fa fa-hand-paper-o fa-2x" aria-hidden="true"></i>
    </div>
    <span class="flex-item-grow">The icon will stay the current size while the text area will grow to fill in the available space.</span>
  </div>
</div>

<strong>Example Usage:</strong>
<p>Use empty grow elements to distribute space between buttons</p>
<div class="flex flex-row">
  <button class="btn btn-primary">Home</button>
  <button class="btn btn-primary">List</button>
  <div class="flex-item-grow">
    <!-- empty space that grows -->
  </div>
  <button class="btn btn-primary">Find</button>
  <div class="flex-item-grow">
    <!-- empty space that grows -->
  </div>
  <button class="btn btn-primary">Login</button>
</div>

<h3>Flex Row with items centered and justified</h3>
<div class="example-outlined flex flex-row flex-align-center flex-justify-evenly">
  <span>Second Example Item</span>
  <span style="padding:20px">Second Example Item</span>
  <span>Second Example Item</span>
</div>

Grid Nesting

The site uses bootstraps standard grid formatting. To nest your content with the default grid, add a new .row and set of .col-sm-* columns within an existing .col-sm-* column. Nested rows should include a set of columns that add up to 12 or fewer (it is not required that you use all 12 available columns).

WARNING: .outline-columns-for-examples is a class used only to show column outlines in the pattern library remove this in production.

Level 1: .col-sm-9
Level 2: .col-sm-6
Level 2: .col-sm-6
<div class="row outline-columns-for-examples">
  <div class="col-sm-9">
    Level 1: .col-sm-9
    <div class="row outline-columns-for-examples">
      <div class="col-sm-6">
        Level 2: .col-sm-6
      </div>
      <div class="col-sm-6">
        Level 2: .col-sm-6
      </div>
    </div>
  </div>
</div>

Grid Offsets

The site uses bootstraps standard grid formatting. Move columns to the right using .col-md-offset-* classes. These classes increase the left margin of a column by * columns. For example, .col-md-offset-4 moves .col-md-4 over four columns.

WARNING: .outline-columns-for-examples is a class used only to show column outlines in the pattern library remove this in production.

.col-sm-4
.col-sm-4 .col-sm-offset-4
.col-sm-3 .col-sm-offset-3
.col-sm-3 .col-sm-offset-3
.col-sm-6 .col-sm-offset-3
<div class="row outline-columns-for-examples">
  <div class="col-sm-4">.col-sm-4</div>
  <div class="col-sm-4 col-sm-offset-4">.col-sm-4 .col-sm-offset-4</div>
</div>
<div class="row outline-columns-for-examples">
  <div class="col-sm-3 col-sm-offset-3">.col-sm-3 .col-sm-offset-3</div>
  <div class="col-sm-3 col-sm-offset-3">.col-sm-3 .col-sm-offset-3</div>
</div>
<div class="row outline-columns-for-examples">
  <div class="col-sm-6 col-sm-offset-3">.col-sm-6 .col-sm-offset-3</div>
</div>

Landing Block

Styled landing block links used on landing pages.

Customer Service

center is here to make a request, pay a bill and more!

Things to Do

around the Tampa area. See what's happening around town!

Stay Connected

with the official FREE City of Tampa MOBILE APP!

<div class="row clearfix">
    <div class="col-sm-6 col-md-4">
        <div class="landing-block">
                <h2><a href="#">Customer Service <span></span></a></h2>
                <p>center is here to make a request, pay a bill and more!</p>
        </div>
    </div>

    <div class="col-sm-6 col-md-4">
        <div class="landing-block">
                <h2><a href="#">Things to Do <span></span></a></h2>
                <p>around the Tampa area. See what's happening around town!</p>
        </div>
    </div>

    <div class="col-sm-12 col-md-4">
        <div class="landing-block">
                <h2><a href="#">Stay Connected <span></span></a></h2>
                <p>with the official FREE City of Tampa MOBILE APP!</p>
        </div>
    </div>
</div>

Padding

There are two padding classes. The standard .padded has mostly padding above/below it along with slight horizontal padding. The .padded-h variation swaps the padding so the larger padding area is horizontal.

.padded is a paragraph padded normally

.padded-h is a paragraph padded horizontally

<p class="padded"> .padded is a paragraph padded normally</p>
<p class="padded-h"> .padded-h is a paragraph padded horizontally</p>

Vertical Center

Vertical alignment and centering with flexbox. IE requires modernizer<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js" charset="utf-8"></script> to properly fix IE's incomplete flexbox implementation. Combine with .text-* alignment classes. NOTE: Grey background, min-heights and outlines are given for demo purposes

This is Vertical and horizontally centered.

Top left
Vertically Centered
Bottom right
<div class="vertical-center-wrap">
  <div class="vertical-align">
    <h2 class="item item-center">This is Vertical and horizontally centered.</h2>
  </div>
</div>
<div class="vertical-center-wrap">
  <div class="vertical-align sample-bk">
    <h2 class="item item-center"><span class="icon-city-seal" aria-hidden="true"></span> <span class="icon-logo" aria-hidden="true"></span></h2>
  </div>
</div>
<div class="vertical-center-wrap">
  <div class="vertical-align">
    <div class="item item-top">Top left</div>
    <div class="item text-center">Vertically Centered</div>
    <div class="item item-bottom text-right">Bottom right</div>
  </div>
</div>