Certifying and Training Arizona’s Professional Process Servers Since 1973

Styleguide

Here’s the style guide for blog posts and pages. Below you will see examples of common markup, default styles and examples of advanced styling.

Table of Contents


Headers

  • Never make headings bold.
  • Do not include an h1 in blog posts. The blog post title creates an h1.
  • Only use one h1 per page. It should be the first element on the page.

<h1>

Lorem Ipsum Dolor Sit

<h2>

Lorem Ipsum Dolor Sit

<h3>

Lorem Ipsum Dolor Sit

<h4>

Lorem Ipsum Dolor Sit

<h5>
Lorem Ipsum Dolor Sit
<h6>
Lorem Ipsum Dolor Sit

Text Style

.text_xl

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod.

.text_large

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod.

.text_medium

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod.

(default)

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod.

.text_small

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod.

.text_light

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod.

<span class="highlight">[TEXT]</span>

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod.


Align Text

.text_center

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.

.text_right

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.


Blockquote

<blockquote>
   <p>[QUOTE]</p>
   <p class="text_small">
      <em>&mdash;[SOURCE]</em>
   </p>
</blockquote>

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

They’ve done studies, you know. 60% of the time, it works everytime.

— Brian Fantana in Anchorman

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. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.


Drop Cap

<span class="drop_cap">[LETTER]</span>

T eniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 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. 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.


Align Images

Content will wrap around the image with the exception of .align_center.

  • .align_left
  • .align_right
  • .align_center
<img class="align_left" src="example.jpg" alt="image-description">

image-descriptionLorem 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. image-descriptionDuis 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. 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.

image-description


Responsive Video

This should work with all of the major video sources (youtube, vimeo, etc.) as long as they provide an embed that uses an iframe.

<div class="responsive_video break_small">
  [INSERT IFRAME EMBED CODE]
<div>

Fluid Width

Add a width(25, 35 … 75) AND .align_ left OR right to quotes, boxes or any div.

<div class="align_right width_35 box">[CONTENT]</div>

<p>[CONTENT]</p>

width_35 align_right box_gray

Lorem ipsum dolor sit amet, consectetur adipisicing elit

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. 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.


Columns

<div class="cols">
   <div class="col_50">[CONTENT]</div>
   <div class="col_50">[CONTENT]</div>
</div>

.col_50

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

.col_50

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.


.col_33

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.

.col_33

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.

.col_33

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.


.col_66

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt lorem ipsum dolor sit amet, consectetur adipisicing.

.col_33

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.


.col_25

Lorem ipsum dolor sit amet, consectetur.

.col_25

Lorem ipsum dolor sit amet, consectetur.

.col_25

Lorem ipsum dolor sit amet, consectetur.

.col_25

Lorem ipsum dolor sit amet, consectetur.


.col_75

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt lorem ipsum dolor sit amet, consectetur adipisicing.

.col_25

Lorem ipsum dolor sit amet, consectetur.


Note: Remove the width and height attributes, so images can scale proportionally to their parent container, specifically on mobile devices.

image-description
image-description
image-description

Page Layout

An example of markup for pages with content and a sidebar.

<div class="cols">
  <div class="col_75">
    [CONTENT]
  </div>
  <div class="col_25 text_small">
    [SIDEBAR]
  </div>
</div>

Flowing Columns

Flowing columns will flow content from one column to the next, just like a newspaper.

  • .cols_flow_two
  • .cols_flow_three
  • .cols_flow_four

Note: This is NOT supported in IE<=9. The content will appear in a single continuous column.

<div class="cols_flow_two">
   <p>[CONTENT]</p>
</div>

Lorem Ipsum Dolor

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.

Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?

Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?


  • Alabama
  • Alaska
  • Arizona
  • Arkansas
  • California
  • Colorado
  • Connecticut
  • Delaware
  • Florida
  • Georgia
  • Hawaii
  • Idaho
  • Illinois
  • Indiana
  • Iowa
  • Kansas
  • Kentucky
  • Louisiana
  • Maine
  • Maryland
  • Massachusetts
  • Michigan
  • Minnesota
  • Mississippi
  • Missouri
  • Montana
  • Nebraska
  • Nevada
  • New Hampshire
  • New Jersey
  • New Mexico
  • New York
  • North Carolina
  • North Dakota
  • Ohio
  • Oklahoma
  • Oregon
  • Pennsylvania
  • Rhode Island
  • South Carolina
  • South Dakota
  • Tennessee
  • Texas
  • Utah
  • Vermont
  • Virginia
  • Washington
  • West Virginia
  • Wisconsin
  • Wyoming

Tables

<div class="table_index">
   <div class="table_row_header">
      <div class="table_cell">[LABEL]</div>
      <div class="table_cell">[LABEL]</div>
   </div>
   <div class="table_row">
      <div class="table_cell">[TEXT]</div>
      <div class="table_cell">[TEXT]</div>
   </div>
</div>
Ipsum
Consectetur
Amet
Dolor
Lorem Ipsum
Dolor sit amet consectetur
100
Ipsum Dolor
Lorem Ipsum
Dolor sit amet consectetur
89
Ipsum Dolor
Lorem Ipsum
Dolor sit amet consectetur
5
Ipsum Dolor
Lorem Ipsum
Dolor sit amet consectetur
43
Ipsum Dolor

Boxes

<div class="box">
   <h3>[HEADING]</h3>
   <p>[CONTENT]</p>
</div>

.box

Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do.

.box_gray

Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do.


Buttons

<a class="btn text_small" href="page.html">[TEXT]</a>

.btn .text_small .btn .btn .btn_gray


Anchor Links

Add id="a-headername" to a heading, then link to it with href="#a-headername".

Current Page

Link to anchor on the same page:

<h2 id="a-headername">[HEADING]</h2>

<a href="#a-headername">[TEXT]</a>

External Anchor

Link to anchor from email:

<h2 id="a-headername">[HEADING]</h2>

<a href="http://example.com/article#a-headername">[TEXT]</a>

© Copyright 2021 — Arizona Process Servers Association — Powered by ServeNow.com