Fluid/Responsive Grid

The site uses a fluid grid system, called Unsemantic. This allows the layout to scale between mobile, tablet, and desktop sizes.

The extent of the system will not be covered here, since such documentation already exists. The crux of it is, to make a percentage based chunk on a page, you'd use class="grid-x", where x represents the percentage (in mulitples of 5).

<div class="grid-container">
  <div class="grid-25">
    I am 25% wide.
  </div>
  <div class="grid-50">
    I am 50% wide.
  </div>
  <div class="grid-25">
    I am 25% wide.
  </div>
</div>

Buttons

A base button style is applied to all of the following elements by default, and does not require any additional class names to be added.

<input type="submit" value="Text" />

<input type="button" value="Text" />

<input type="reset" value="Text" />

<button>Text</button>

Example:


Buttons: Alternate

To apply an alternate button style, you can add a class of button-blue.

<input type="button" value="Text" class="button-blue" />

Example:


Buttons: Big

Occasionally, more visual weight will be given to a button, in which case you'd add class of button-big for extra padding on the left/right.

<input type="button" value="Text" class="button-big" />

Example:


Buttons: Small

To deemphasize a button, and make it visually smaller, add a class of button-small.

<input type="button" value="Text" class="button-small" />

Example:


Buttons: Links

To make a link look like a button, you can add the class of button to an otherwise ordinary link.

<a href="#" class="button">Text</a>

Example:

This is an example link

From there, the same class names apply for alternate, big, and small styles.

Example:

This is an example link

This is an example link

This is an example link


Buttons: Links & Arrows

You can also add a small chevron arrow to a link, by applying the class button-arrow.

<a href="#" class="button button-arrow">Text</a>

Example:

This is an example link

This is an example link

This is an example link

This is an example link

This is an example link

This is an example link

Note: Unfortunately, due to how <input type="button"> and its ilk work, arrows can only be added to links, not actual <form> buttons. These stylized links should be used for a call-to-action, not as regular links in a page.


Tables

To create a tablular data grid, simply apply the class of table-data to a table. For instance, the following code…

<div class="box-gray-light">
  <table class="table-data">
    <!--
      caption, thead, tbody, tfoot
    -->
  </table>
</div>

Produces this result…

This is an example table
Product Description Price Total Price Discount *  
Single Search $XX.XX each $XX.XX each n/a Button
3 search credits $XX.XX each $XX.XX $XX.XX 25% off Button
* volume discount compared to single search

To force a <th> or <td> to "shrink wrap" its contents, narrowing itself to no wider than is absolutely necessary for the content therein (giving sibling table cells more room to breathe), use the class name shrink. The table cells above that contain buttons have this applied to them.

<td class="shrink">...</td>

Modules

For lack of a better term, the word "module" is being used to refer to content chunks that can have their own discreet header and/or footer. This is marked up with <section> tag, with the class of module, like so…

<section class="module small">
  <header class="room-for-tag-small">
    Result Verification
  </header>
  <div class="sticker-small">
    <div class="sticker-header">
      1-3 Days
    </div>
    <!-- /.tag-header -->
    <p class="big">
      <b>$XX.00</b>
    </p>
    <p>
      <a href="#" class="button button-small make-block">
        Run Now
      </a>
    </p>
    <div class="sticker-footer">
      Disclaimer goes here
    </div>
  </div>
  <!-- /.tag-small -->
  <p>
    Lorem...
  </p>
</section>

The preceding code outputs this visual result…

Example Module
1-3 Days

$XX.00

Run Now

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.


Forms

At the time of this writing, the public facing backgroundchecks.com is built atop the DotNetNuke CMS. Because of how DNN wraps the entirety of each page's contents in a <form> tag, care must be taken to ensure that there are not elements with duplicate name="…" in the page.

For instance, here is an example of how a DNN page typically works…

<body>
  <form>
    <!--
      Entirety of ALL page content
    -->
  </form>
</body>

Form Layout

Depending on the subjective complexity of a particular form, it may be laid out using a presentation table. Be sure to add role="presentation" to the <table> itself, as this signifies to assistive technologies that it is not being used to show tabular data, but rather to keep the alignment of form elements consistent. This also allows for a CSS styling hook that, via @media queries, will linearize the table on small screens.

<section class="module">
  <header>
    Example Form
  </header>
  <p>
    Run this background check on:
  </p>
  <table role="presentation" class="table-info">
    <tr class="align-bottom">
      <td>
        <label for="input-first-name">
          First Name
        </label>
        <br />
        <input type="text" id="input-first-name" name="input-first-name" />
      </td>
      <td>
        <label for="input-middle-initial">
          <abbr title="Middle Initial">
            MI
          </abbr>
        </label>
        <br />
        <input type="text" id="input-middle-initial" name="input-middle-initial" size="1" />
      </td>
      <td>
        <label for="input-last-name">
          Last Name
        </label>
        <br />
        <input type="text" id="input-last-name" name="input-last-name" />
      </td>
    </tr>
  </table>
  <table role="presentation" class="table-info">
    <tr class="align-bottom">
      <td>
        <label for="input-dob-month">
          Date of Birth
        </label>
        <br />
        <select id="input-dob-month" name="input-dob-month">
          ...
        </select>
      </td>
      <td>
        <select id="input-dob-day" name="input-dob-day">
          ...
        </select>
      </td>
      <td>
        <select id="input-dob-year" name="input-dob-year">
          ...
        </select>
      </td>
    </tr>
  </table>
  <table role="presentation" class="table-info">
    <tr class="align-bottom">
      <td>
        <label for="input-ssn">
          <abbr title="Social Security Number">SSN</abbr>
        </label>
        <br />
        <input type="text" id="input-ssn" name="input-ssn" placeholder="xxx-xx-xxxx" />
      </td>
      <td>
        <label for="input-will-work-state">
          This candidate will work in&hellip;
        </label>
        <br />
        <select id="input-will-work-state" name="input-will-work-state">
          ...
        </select>
      </td>
    </tr>
  </table>
  <p>
    <input type="submit" value="Start Search" class="button-big" />
  </p>
</section>

The preceding code outputs this visual result…

Run Your County Criminal Check

Run this background check on:


Responsive Videos

To ensure that videos resize appropriately at all screen resolutions, we are using a jQuery plugin called FitVids. The resizing should be entirely automatic for the most part. It simply requires cutting and pasting a typical video embed code, from a site like YouTube or Vimeo.

The only thing to take note of is the desired aspect ratio (not the actual pixel values), for width/height. Typically, the correct size is provided by the various video sites, but occasionally it will require some manual tweaking.

For instance, if you wanted a 16x9 ratio, you could simply state width="160" and height="90", and FitVids would handle the rest.

Example:

<iframe
  src="//player.vimeo.com/video/40980282"
  width="160"
  height="90"
  frameborder="0"
  webkitallowfullscreen="true"
  mozallowfullscreen="true"
  allowfullscreen="true"
></iframe>

The preceding code outputs this visual result…

 


Responsive Screenshot Annotations

In order to display screenshots of the web app ("Valhalla") on the public facing site, we have taken a fluid percentage based approach. It scales to fit on tablet/desktop, and on mobile devices (where the screenshot would be illegible) a simple text link to the screenshot is provided. This allows the user to view the image, and pan/zoom as necessary.

In creating the front-end templates, a Ruby-based prototyping tool called Serve was used. This allowed us to create a reusable partial, that handles the placing of numeric annotations, as well as their accompanying tooltips.

Example partial:

<%
  number = number || 0
  top = top || 0
  left = left || 0
  text = text || "NO TEXT DEFINED"

  css_class = ""

  if left.to_i > 50
    css_class = "app-overview-tooltip-reverse"
  end
%>

<div
  class="app-overview-info"
  style="
    top: <%= top %>;
    left: <%= left %>;
">
  <span class="app-overview-circle">
    <%= number %>
  </span>
  <div class="
    app-overview-tooltip
    <%= css_class %>
  ">
    <%= text %>
  </div>
</div>
<!-- /.app-overview-info -->

Example usage:

<p class="hide-on-tablet hide-on-desktop">
  To view a screenshot of the app:
  <a href="./images/fpo-placeholder-app-backdrop-2.png">Click Here</a>
</p>
<div class="app-overview">
  <img
    alt="App Screenshot"
    class="hide-on-mobile user-select-none"
    src="./images/fpo-placeholder-app-backdrop-2.png"
  />

  <%= render "/partials/walk-through-tooltip",
    locals: {
      number: 1,
      top: "11%",
      left: "60%",
      text: "Lorem…"
    }
  %>

  <%= render "/partials/walk-through-tooltip",
    locals: {
      number: 2,
      top: "15%",
      left: "19%",
      text: "Lorem…"
    }
  %>

  <%= render "/partials/walk-through-tooltip",
    locals: {
      number: 3,
      top: "19.5%",
      left: "26%",
      text: "Lorem…"
    }
  %>

  <%= render "/partials/walk-through-tooltip",
    locals: {
      number: 4,
      top: "43%",
      left: "20%",
      text: "Lorem…"
    }
  %>

  <%= render "/partials/walk-through-tooltip",
    locals: {
      number: 5,
      top: "58.25%",
      left: "9%",
      text: "Lorem…"
    }
  %>

</div>
<!-- /.app-overview -->

The preceding code outputs this visual result…

To view a screenshot of the app: Click Here

App Screenshot
1
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
2
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
3
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
4
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
5
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Questions?

If you have questions about this style guide, or have suggestions for additional content, contact projekt202 via our website…

http://projekt202.com