City of Tampa Style Guide

Layout 6

Breakout of Containers 6.1

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

You can break out of the bootstrap container using the breakout-container class

When to use: Add it to a section to make a full width background color

When not to: When you have other columns this will overlay above them..

Notes: Use with caution!

<insert-markup>layout.breakout-</insert-markup>

This content has a max width

I'm breaking the container.

This content has a max width

<!-- Row with equal columns that is vertical on sm -->
<div class="container">
  <p>This content has a max width</p>
  <div class="breakout-container">I'm breaking the container.</div>
  <p>This content has a max width</p>
</div>
Source: src/scss/base/_layouts.scss, line 57

Checkerboard 6.2

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

This checkerboard pattern alternates between images and content areas. This is primarily used on marketing/landing pages, its visually appealing but increases cognitive load on the visitor. Add the .swap class to .checker-board-wrapper to have it swap the pattern of how it alternates.

When to use: When the main purpose of the content is to sell something or re-enforce an idea in a visually attractive way.

When not to: If pages main objective is for a user to accomplish a goal then this adds "noise" and may impede that pages objective.

Notes: Best when used with 2-5 row increments. Be sure pictures meaningfully support the text content and aren't just pretty visuals.

<insert-markup>layout.checkerboard-</insert-markup>

Benefits

The City provides its employees with a generous variety of policy benefits in addition to group insurance and retirement benefits. Below is a partial listing of some of the other benefits the City provides to its employees.

Join Us

The City provides its employees with a generous variety of policy benefits in addition to group insurance and retirement benefits. Below is a partial listing of some of the other benefits the City provides to its employees.

Sign Up Today

So Amazing - Here is why

  • First Reason
  • Second Reason
  • Do you really need a third?
  • Well here is a fourth
<section class="checker-board-wrapper bg-primary">
    <div class="checker-board">
        <div class="col">
            <div class="bg-image-cover" style="background-image: url(https://picsum.photos/600/450);"></div>
        </div>
        <div class="col">
            <div class="p-3">
                <h3>Benefits</h3>
                <p>
                    The City provides its employees with a generous variety of policy benefits in addition to group insurance and retirement benefits. Below is a partial listing of some of the other benefits the City provides to its employees.
                </p>
            </div>
        </div>
    </div>
    <div class="checker-board ">
        <div class="col">
            <div class="bg-image-cover" style="background-image: url(https://picsum.photos/600/450);"></div>
        </div>
        <div class="col">
            <div class="p-3">
                <h3>Join Us</h3>
                <p>
                    The City provides its employees with a generous variety of policy benefits in addition to group insurance and retirement benefits. Below is a partial listing of some of the other benefits the City provides to its employees.
                </p>
                <a href="#" class="btn btn-secondary">Sign Up Today</a>
            </div>
        </div>
    </div>
    <div class="checker-board">
        <div class="col">
            <div class="bg-image-cover" style="background-image: url(https://picsum.photos/600/450);"></div>
        </div>
        <div class="col">
            <div class="p-3">
                <h3>So Amazing - Here is why</h3>
                <ul>
                    <li>First Reason</li>
                    <li>Second Reason</li>
                    <li>Do you really need a third?</li>
                    <li>Well here is a fourth</li>
                </ul>
            </div>
        </div>
    </div>
</section>
Source: src/scss/base/_components.scss, line 440

Grid 6.3

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Bootstrap 4 Grid system where rows wrap columns that behaves like flexbox unless otherwise specified. Use .spacer inside a .d-flex to easily space items.

When to use: When you want layouts and want

When not to: For simple lists, semantic list are best.

Notes: Details at Bootstrap Docs, ALWAYS test on MOBILE

<insert-markup>layout.grid-</insert-markup>
One of three columns
One of three columns
One of three columns
col-md-8
col-md-4
Left
Right
<!-- Row with equal columns that is vertical on sm -->
<div class="row">
  <div class="col-sm">
    One of three columns
  </div>
  <div class="col-sm">
    One of three columns
  </div>
  <div class="col-sm">
    One of three columns
  </div>
</div>
<!-- Row that is 2/3rds above medium -->
<div class="row">
  <div class="col-md-8">col-md-8</div>
  <div class="col-md-4">col-md-4</div>
</div>
<!-- Row with a .spacer used to fill up space -->
<div class="d-flex">
  <div>Left</div>
  <div class="spacer"></div>
  <div>Right</div>
</div>
Source: src/scss/base/_layouts.scss, line 1

Padding 6.4

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

A General purpose padding class for elements.

Notes: More spacing utilities provided by Bootstrap

<insert-markup>layout.padding-</insert-markup>
Padded item
Padded item with Horizontal modifier
Custom column padding
Custom column padding
<div class="padded">Padded item</div>
<div class="padded-h">Padded item with Horizontal modifier</div>
<!-- Using Bootstrap Spacing Classes -->
<div class="row mx-md-n5">
  <div class="col px-md-5"><div class="p-3 border bg-light">Custom column padding</div></div>
  <div class="col px-md-5"><div class="p-3 border bg-light">Custom column padding</div></div>
</div>
Source: src/scss/base/_base.scss, line 295