Intro

This style guide is intended as a reference for content managers and developers to properly implement the styles, structures and methodology employed in the construction of the Middlesex Federal website.

Overview of styleguide content:

Palette

Colors utilized on the site with their hex values

Typography

Font families, sizes and hex color values for headings and body text

Pattern Library

Information about the various HTML components utilized on the site with example usage and code which can be copied/pasted

• Some items in the Pattern Library may require back end development to function properly

Coding & Content

This section of your styleguide contains important information in managing and expanding upon the HTML and CSS of your website.

Palette

Brand Colors

Nuetrals

• Lightest
• Lighter
• Light
• Base
• Dark
• Darker
• Darkest

Presets

• Highlight
• Danger
• Warning
• Success
• Info

Typography

<h1>Heading 1</h1>

<h2>Heading 2</h2>

<h3>Heading 3</h3>

<h4>Heading 4</h4>

<h5>Heading 5</h5>

<h4>Heading 4</h4>

<p>...</p>

Accordion

Vertically expanding areas of content.

Ideally, icon classes should be added to increase visual communication.

• Title / Content / FAQ Goes Here

  Lorem ipsum dolor sit amet, consectetur adipiscing 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.

• Title / Content / FAQ Goes Here

  Lorem ipsum dolor sit amet, consectetur adipiscing 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.

• Title / Content / FAQ Goes Here

  Lorem ipsum dolor sit amet, consectetur adipiscing 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.

<ul class="accordion">
<li><span class="icon-question-alt">Title / Content / FAQ Goes Here</span>
<div class="accordion-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing 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.</p>
</div>
<!--/.accordion-content-->
</li>
<li><span class="icon-info">Title / Content / FAQ Goes Here</span>
<div class="accordion-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing 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.</p>
</div>
<!--/.accordion-content-->
</li>
<li><span class="icon-genius">Title / Content / FAQ Goes Here</span>
<div class="accordion-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing 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.</p>
</div>
<!--/.accordion-content-->
</li>
</ul>

Asides

<aside>
Lorem ipsum dolor...
</aside>

<aside class="aside--left">
Lorem ipsum dolor...
</aside>
<p>Sed ut perspiciatis...</p>

<aside class="aside--right">
Lorem ipsum dolor...
</aside>
<p>Sed ut perspiciatis...</p>

Alerts

Boxes which visually alert a user to an error, success or warning can be used on the site by applying the class of "alert" to an element.

• Ideally, icon classes should be added to increase visual communication
• Alerts can be divs or paragraphs depending on usage

Important stuff

<p class="alert">Important stuff<p>

Important message

<p class="alert alert--success icon-danger">Important message<p>

Important message

<p class="alert alert--warning icon-attention">Important message<p>

Important message

<p class="alert alert--danger icon-attention">Important message<p>

Self-closing alerts

Just add the class of "is-closeable" to any alert and it will add the link to remove it from the page once the user has read the message.

Important message

<p class="alert alert--success is-closeable icon-check">Important message<p>

Badges

<p>Messages <span class="badge">13</span></p>

Bug

.bug needs to be in a relatively positioned container like an alert.

<p class="alert"><span class="bug">13</span> Messages</p>

Buttons

To use, just assign button classes to a text link or input types "button" and "submit".

<a href="" class="btn">...</a>
<input name="" type="button" value="input" class="btn">

<a href="" class="btn btn--secondary">...</a>
<input name="" type="button" value="input" class="btn btn--secondary">

<a href="" class="btn btn--XSm">...</a>
<input name="" type="button" value="input" class="btn btn--XSm">

<a href="" class="btn btn--sm">...</a>
<input name="" type="button" value="input" class="btn btn--sm">

<a href="" class="btn btn--lg">...</a>
<input name="" type="button" value="input" class="btn btn--lg">

<a href="" class="btn btn--XLg">...</a>
<input name="" type="button" value="input" class="btn btn--XLg">

<a href="" class="btn btn--full">...</a>
<input name="" type="button" value="input" class="btn btn--full">

<h1>Heading 1 <a href="" class="btn btn--natural">...</a></h1>
<p class="h-sizeSm">Small text paragraph <a href="" class="btn btn--natural">...</a></p>

Figures - Images

Examples

Full width image

<figure>
<img src="..." alt="Description of image">
<figcaption>Caption describing image</figcaption>
</figure>

Floated left of content

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.

<figure class="figure--left">
<img src="..." alt="Description of image">
<figcaption>Caption describing image</figcaption>
</figure>
<p>Lorem ipsum dolor sit amet...</p>

Floated right of content

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.

<figure class="figure--right">
<img src="500x281.jpg" alt="Description of image">
<figcaption>Caption describing image</figcaption>
</figure>
<p>Lorem ipsum dolor sit amet...</p>

Figures - Videos

<figure class="figure--video">
<!--embed code for youtube, vimeo, etc-->
<iframe src="//www.youtube.com/embed/0Bmhjf0rKe8" frameborder="0" alt="Description of video" allowfullscreen></iframe>
</figure>

<div class="mediaBlock  mediaBlock--breakMed">
<figure class="figure--video">
<iframe src="//www.youtube.com/embed/0Bmhjf0rKe8" frameborder="0" alt="Description of video" allowfullscreen></iframe>
</figure>
<div class="mediaBlock-body">
<h3 class="h4">Media header</h3>
<p>Aximil inulluptibus si...</p>
<p><a class="btn" href="">Learn more</a></p>
</div>
</div>

<div class="mediaBlock mediaBlock--breakMed mediaBlock--imgRight">
<figure class="figure--video">
<iframe src="//www.youtube.com/embed/0Bmhjf0rKe8" frameborder="0" alt="Description of video" allowfullscreen></iframe>
</figure>
<div class="mediaBlock-body">
<h3 class="h4">Media header</h3>
<p>Aximil inulluptibus si...</p>
<p><a class="btn" href="">Learn more</a></p>
</div>
</div>

Grid

For maximum layout flexibility, this site has been built using a responsive, nestable, 24 column Flexbox grid.

Basic usage

Place a div on the page with the class of "row". This will hold your columns.

<div class="row"></div>

Add your column divs with the class "column" applied to each one.

<div class="row">
<div class="column"></div>
...
<div>

Add classes to the column divs to determine how many of the available 24 columns they will occupy and at what screen size the width should be applied to the column.

<div clas="row">
<div class="column med-12"></div>
...
<div>

Column Widths

• Remember the grid is mobile first, so you are applying widths as the screen gets larger. A column with med-12 applied, will take up 12 columns on medium and large screens also.

<div class="row">
<div class="column med-6"></div>
<div class="column med-18"></div>
</div>

<div class="row">
<div class="column xsm-12 sm-6 med-4 lg-2">...</div>
<div class="column xsm-12 sm-6 med-4 lg-2">...</div>
<div class="column xsm-12 sm-6 med-4 lg-2">...</div>
<div class="column xsm-12 sm-6 med-4 lg-2">...</div>
<div class="column xsm-12 sm-6 med-4 lg-2">...</div>
<div class="column xsm-12 sm-6 med-4 lg-2">...</div>
<div class="column xsm-12 sm-6 med-4 lg-2">...</div>
<div class="column xsm-12 sm-6 med-4 lg-2">...</div>
<div class="column xsm-12 sm-6 med-4 lg-2">...</div>
<div class="column xsm-12 sm-6 med-4 lg-2">...</div>
<div class="column xsm-12 sm-6 med-4 lg-2">...</div>
<div class="column xsm-12 sm-6 med-4 lg-2">...</div>
</div>
</div>

Gutter Widths

Modifier classes can be added to the containing div (class="row") to modify spacing between columns

<!-- Normal gutters -->
<div class="row">
<div class="column med-12"></div>
<div class="column med-12"></div>
</div>
<!-- Tight gutters -->
<div class="row row--tight">
<div class="column med-12"></div>
<div class="column med-12"></div>
</div>
<!-- XTight gutters -->
<div class="row row--XTight">
<div class="column med-12"></div>
<div class="column med-12"></div>
</div>
<!-- Flush - no gutters -->
<div class="row row--flush">
<div class="column med-12"></div>
<div class="column med-12"></div>
</div>

Column Offsets

Columns can be offset by column widths at any of the pre-determined breakpoints

<!-- Format for these modifier classes are "offset", media query, then the number of columns you would like to offset at that breakpoint  -->
offset-[xsm|sm|med|lg|xlg|xxlg]-[1-23]

<div class="row">
<div class="column med-10"></div>
<div class="column med-10 offset-med-4"></div>
</div>

Column Centering

Columns can be centered at any of the pre-determined breakpoints

• This works only with a single column within a row OR if the proceeding column fills the entire 24 columns

<!-- Format for these modifier classes are "centered" and then the media query -->
centered-[xsm|sm|med|lg|xlg|xxlg]

<div class="row">
<div class="column med-12 centered-med"></div>
<div class="column med-24"></div>
</div>

Visual Source order change

Generally, columns will stack top to bottom at their natural 100% width and display left to right once we apply a column width. Since we have a grid based on Flexbox, the visual source order of the individual Columns can be changed by adding modifier classes to them.

• Apply the appropriate order modifier class to all columns within the parent div or unexpected results may occur.
• Keep in mind that the source order change is visual and not actual. So screen readers for the disabled will still read the content in the original source order (at this time).

<!-- Format for these modifier classes are "order", media query, then the position you would like the column to be in at that breakpoint  -->
order-[xsm|sm|med|lg|xlg|xxlg]-[1-23]

<div class="row">
<div class="column med-12 order-med-2 order-lg-4">...</div>
<div class="column med-12 order-med-4 order-lg-3">...</div>
<div class="column med-12 order-med-3 order-lg-2">...</div>
<div class="column med-12 order-med-1 order-lg-1">...</div>
<div>

Horizontal Rule

<hr />

<hr class="rule--dotted" />

<hr class="rule--dashed" />

<hr class="rule--ornament" />

Info List

Used primarily to display information such as author, date, etc. about an event, article or other item.

List items display horizontally on small screens and vertically on larger screens.

<ul class="infoList">
<li class="icon-location"><a href="...">City Events Center</a></li>
<li class="icon-calendar">Nov 11, 2016</li>
<li class="icon-clock-alt">5:30pm</li>
</ul>

Icons

A custom, font-based icon library has been created for your site using fontello.com. Icons can be applied directly to text elements like headings, paragraphs and links or they can also be applied inline pretty much wherever you would like.

You can add icons, edit existing ones or create custom ones at fontello.com. Instructions for using the font library can be found here.

Icons can be applied two different ways:

<a href="..." class="icon-check">Text Link<a>

<a href="...">Text Link <i class="icon-check"></i></a>

Using the <i> method, icons can be styled apart from their containing text element.

<p><i class="icon-check h-colorSuccess"></i> Completed</p>

Available icons/classes

Islands/Islets

A generic box with padding on all sides

<p class="island">...</p>

Islets have half the padding an island has

<p class="islet">...</p>

Tags

<span class="tag">Tag 01</span>
<span class="tag">Tag 02</span>

<span class="tag is-closeable">Tag 01</span>
<span class="tag is-closeable">Tag 02</span>

Lists

<ul>
<li>Item one</li>
<li>Item two</li>
<li>Item three</li>
</ul>

<ul class="list--bare">
<li>Item one</li>
<li>Item two</li>
<li>Item three</li>
</ul>

<ol>
<li>Item one</li>
<li>Item two</li>
<li>Item three</li>
</ol>

<ul class="list--block">
<li>Item one</li>
<li>Item two</li>
<li>Item three</li>
</ul>

<ul class="list--horizontal">
<li>Item one</li>
<li>Item two</li>
<li>Item three</li>
</ul>

<ul class="list--horizontal list--separated">
<li>Item one</li>
<li>Item two</li>
<li>Item three</li>
</ul>

<dl>
<dt>Item one</dt>
<dd>Item one info</dd>
<dt>Item two</dt>
<dd>Item two info</dd>
<dt>Item three</dt>
<dd>Item three info</dd>
</dl>

Loader

<!-- Can be a div or span -->
<div class="loader"></div>

<p><span class="loader loader--sm"></span>Updating...</p>

Secondary Navigation

This version of iAPPS Pro features a secondary navigation which also functions as a breadcrumb.

On smaller screens, the navigation collapses and is toggled open on click

<nav role="navigation" class="navSecondary">
<ul class="navSecondary-breadcrumb">
<li><a href="#">Top Level</a></li>
<li class="active"><a href="#">Current Level</a></li>
</ul>
<ul class="navSecondary-links">
<li><a href="#">Interior Page</a></li>
<li><a href="#">Interior Page</a></li>
<li><a href="#">Interior Page</a></li>
</ul>
</nav>

Quotes

Inline quotes

<p>Sed ut perspiciatis unde 
<q>omnis iste natus error</q>
sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>

Blockquotes

<blockquote>
<p>There are only two mistakes one can make along the road to truth; not going all the way, and not starting.</p>
<cite>Buddha</cite>
</blockquote>

<blockquote class="blockquote--left">
<p>There are only two mistakes one can make along the road to truth; not going all the way, and not starting.</p>
<cite>Buddha</cite>
</blockquote>
<p>Sed ut perspiciatis...</p>

<blockquote class="blockquote--right">
<p>There are only two mistakes one can make along the road to truth; not going all the way, and not starting.</p>
<cite>Buddha</cite>
</blockquote>
<p>Sed ut perspiciatis...</p>

Tables

Basic Table Usage

• For our formatting purposes, we need to add the class "table" to the table. Global styling of tables will effect the iAPPS editor and likely break it.

<table class="table">
  <thead>
    <tr>
      <td></td>
      <th>A</th>
      <th>B</th>
      <th>C</td>
      <th>D</th>
      <th>E</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>One</th>
      <td>Lorem</td>
      <td>Ipsum</td>
      <td>Dolor</td>
      <td>Sit</td>
      <td>Amet</td>
    </tr>
    <tr>
      <th>Two</th>
      <td>Consectetur</td>
      <td>Adipiscing</td>
      <td>Elit</td>
      <td>Elit</td>
      <td>Elit</td>
    </tr>
    <tr>
      <th>Three</th>
      <td>Amet</td>
      <td>Consectetur</td>
      <td>Adipiscing</td>
      <td>Elit</td>
      <td>Elit</td>
    </tr>
    <tr>
      <th>Four</th>
      <td>Amet</td>
      <td>Consectetur</td>
      <td>Adipiscing</td>
      <td>Elit</td>
      <td>Elit</td>
    </tr>
    <tr>
      <th>Five</th>
      <td>Amet</td>
      <td>Consectetur</td>
      <td>Adipiscing</td>
      <td>Elit</td>
      <td>Elit</td>
    </tr>
    <tr>
  </tbody>
</table>

Basic Table Responsive Solutions

Wrapping Div Method

• Large, complex or pre-existing tables can be placed within a div with the class of "tableContainer". By default, tables which are horizontally wider than the viewport on smaller devices will scroll horizontally within this wrapper.

<!-- the tableContainer div will make any standard table scrollable on small screens -->
<div class="tableContainer">
  <table class="table">
    <thead>
      <tr>
        <td></td>
        <th>A</th>
        <th>B</th>
        <th>C</td>
        <th>D</th>
        <th>E</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th>One</th>
        <td>Lorem</td>
        <td>Ipsum</td>
        <td>Dolor</td>
        <td>Sit</td>
        <td>Amet</td>
      </tr>
      <tr>
        <th>Two</th>
        <td>Consectetur</td>
        <td>Adipiscing</td>
        <td>Elit</td>
        <td>Elit</td>
        <td>Elit</td>
      </tr>
      <tr>
        <th>Three</th>
        <td>Amet</td>
        <td>Consectetur</td>
        <td>Adipiscing</td>
        <td>Elit</td>
        <td>Elit</td>
      </tr>
      <tr>
        <th>Four</th>
        <td>Amet</td>
        <td>Consectetur</td>
        <td>Adipiscing</td>
        <td>Elit</td>
        <td>Elit</td>
      </tr>
      <tr>
        <th>Five</th>
        <td>Amet</td>
        <td>Consectetur</td>
        <td>Adipiscing</td>
        <td>Elit</td>
        <td>Elit</td>
      </tr>
      <tr>
    </tbody>
  </table>
</div>

Basic Responsive Tables - CSS only

• Our basic responsive table solution accomodates simple tables with only one set of headings within the thead and no others
• This method creates tables that expand horizontally to their contents as is default table behavior. This method does not support 100% width tables

<!-- note the "table--responsive" modifier class -->
<table class="table table--responsive">
  <thead>
    <tr>
      <th>A</th>
      <th>B</th>
      <th>C</td>
      <th>D</th>
      <th>E</th>
      <th>F</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>One</td>
      <td>Ipsum</td>
      <td>Dolor</td>
      <td>Sit</td>
      <td>Amet</td>
      <td>Amet</td>
    </tr>
    <tr>
      <td>Two</td>
      <td>Consectetur</td>
      <td>Adipiscing</td>
      <td>Elit</td>
      <td>Elit</td>
      <td>Elit</td>
    </tr>
    <tr>
      <td>Three</td>
      <td>Amet</td>
      <td>Consectetur</td>
      <td>Adipiscing</td>
      <td>Elit</td>
      <td>Elit</td>
    </tr>
    <tr>
      <td>Four</td>
      <td>Amet</td>
      <td>Consectetur</td>
      <td>Adipiscing</td>
      <td>Elit</td>
      <td>Elit</td>
    </tr>
    <tr>
      <td>Five</td>
      <td>Amet</td>
      <td>Consectetur</td>
      <td>Adipiscing</td>
      <td>Elit</td>
      <td>Elit</td>
    </tr>
  </tbody>
</table>

Basic Responsive Tables - CSS Only - Flipped Axis

• This method creates a table with left-aligned thead/headings
• When the table width overflows the width of the viewport, the table contents will scroll while the thead/headings stay "fixed"

<!-- note the "table--flip" modifier class -->
<table class="table table--responsive">
  <thead>
    <tr>
      <th>A</th>
      <th>B</th>
      <th>C</td>
      <th>D</th>
      <th>E</th>
      <th>F</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>One</td>
      <td>Ipsum</td>
      <td>Dolor</td>
      <td>Sit</td>
      <td>Amet</td>
      <td>Amet</td>
    </tr>
    <tr>
      <td>Two</td>
      <td>Consectetur</td>
      <td>Adipiscing</td>
      <td>Elit</td>
      <td>Elit</td>
      <td>Elit</td>
    </tr>
    <tr>
      <td>Three</td>
      <td>Amet</td>
      <td>Consectetur</td>
      <td>Adipiscing</td>
      <td>Elit</td>
      <td>Elit</td>
    </tr>
    <tr>
      <td>Four</td>
      <td>Amet</td>
      <td>Consectetur</td>
      <td>Adipiscing</td>
      <td>Elit</td>
      <td>Elit</td>
    </tr>
    <tr>
      <td>Five</td>
      <td>Amet</td>
      <td>Consectetur</td>
      <td>Adipiscing</td>
      <td>Elit</td>
      <td>Elit</td>
    </tr>
  </tbody>
</table>

Toggle Links

Show/Hide on Click & Hover

There can be multiple hidden elements and their triggers on one page. The trigger will toggle the hidden div which follows it in the source code.

<a class="toggleLink">Show hidden content on click</a>
<div class="toggleLinkTarget is-hidden">Hidden content</div>

<a class="toggleLink" data-text-swap="Show Less">Show more</a>
<div class="toggleLinkTarget is-hidden">Hidden content</div>

<a class="toggleLink--hover">Show hidden content on hover</a>
<div class="toggleLinkTarget is-hidden">Hidden content</div>

Flyouts

<!-- Using a list as the flyout content -->
<div class="flyout icon-attention">
<ul class="flyout-content">
<li><a href="...">Link/selection</a></li>
<li><a href="...">Link/selection</a></li>
</ul>
</div>

<!-- Using a div as the flyout content -->
<div class="flyout icon-attention"> Uh-oh
<div class="flyout-content">
<h4>Attention needed</h4>
<p>please modify your profile <a href="...">settings</a></p>
</div>
</div>

<div class="flyout icon-attention h-floatRight">
<span class="bug">3</span>
<ul class="flyout-content flyout-content--left">
<li><a href="...">Link/selection</a></li>
<li><a href="...">Link/selection</a></li>
</ul>
</div>

<div class="flyout flyout--select">Sort: <span>Relevance</span>
<ul class="flyout-content">
<li><a href="javascript:void(0)">Relevance</a></li>
<li><a href="javascript:void(0)">A-Z</a></li>
<li><a href="javascript:void(0)">Modified date</a></li>
</ul>
</div>

Forms

Make sure that the "for" attribute of all labels match the "id" of the form elements they are associated with. Most browsers will set focus on an element when you click on it's label and this is also important for screen-readers/accessibility.

Use the proper text field type for the information you are asking for. In responsive, this is especially important as smartphones and tablets will display keyboards optimized for various form field types.

<!--For entering text. First name, last name, etc.-->
  <label for="textField">input type="text"</label>
  <input type="text" placeholder="Enter text" id="textField">
  <!--For entering passwords-->
  <label for="passwordField">input type="password"</label>
  <input type="password" placeholder="Enter password" id="passwordField">
  <!--For entering web addresses-->
  <label for="urlField">input type="url"</label>
  <input type="text" placeholder="Enter URL" id="urlField">
  <!--For entering email addresses-->
  <label for="emailField">input type="email"</label>
  <input type="email" placeholder="Enter email address" id="emailField">
  <!--For entering search terms-->
  <label for="searchField">input type="search"</label>
  <input type="search" placeholder="Enter search term" id="searchField">
  <!--For entering numbers-->
  <label for="numberField">input type="number"</label>
  <input type="number" placeholder="Enter number" id="numberField">
  <!--For entering larger blocks of text-->
  <label for="theTextArea">Textarea</label>
  <textarea cols="" rows="" placeholder="Enter some longer text" id="theTextArea"></textarea>

<label for="selectOne">Select an option</label>
<select id="selectOne">
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>

<fieldset>
  <legend class="legend--labelStyle">Select items</legend>
  <div class="formCheckBox">
  <span>
  <input type="checkbox" id="checkOne">
  <label for="checkOne">Option1</label>
  </span>
  <span>
  <input type="checkbox" id="checkTwo">
  <label for="checkTwo">Option2</label>
  </span>
  <span>
  <input type="checkbox" id="checkThree" >
  <label for="checkThree">Option3</label>
  </span>
  </div>
  </fieldset>

<fieldset>
<legend class="legend--labelStyle">Select an item</legend>
<div class="formRadioButton">
<span>
<input type="radio" name="radios" id="radioOne">
<label for="radioOne">Option1</label>
</span>
<span>
<input type="radio" name="radios" id="radioTwo">
<label for="radioTwo">Option2</label>
</span>
<span>
<input type="radio" name="radios" id="radioThree">
<label for="radioThree">Option3</label>
</span>
</div>
</fieldset>

Media Block

Place any image and text-like content side-by-side, as per: http://stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code

To accomodate various image ratios and content, the media block uses modifer classes which dictate when the layout will change from the mobile (columnar) layout to the vertical, side-by-side layout. These classes align with the standard Sm, Med and Lg breakpoints defined for the site and are as follows:

• mediaBlock--breakSm
• mediaBlock--breakMed
• mediaBlock--breakLg

Basic usage is for images. For usage with videos see video section

Basic usage

Media header

Aximil inulluptibus si officiatur aut accus ad essit as volesci aeprat verior seqvenes comn imp orecat landuciliti.

Learn more

<div class="mediaBlock mediaBlock--breakMed">
<figure><img src="500x281.jpg"></figure>
<div class="mediaBlock-body">
<h3>Media header</h3>
<p>Aximil inulluptibus si officiatur aut accus ad essit as volesci aeprat verior seqvenes comn imp orecat landuciliti.</p>
<p><a href="" class="btn">Learn more</a></p>
</div>
</div>

Right align image

Media header

Aximil inulluptibus si officiatur aut accus ad essit as volesci aeprat verior seqvenes comn imp orecat landuciliti.

Learn more

<div class="mediaBlock mediaBlock--breakMed mediaBlock--imgRight">
<figure><img src="500x281.jpg"></figure>
<div class="mediaBlock-body">
<h3>Media header</h3>
<p>Aximil inulluptibus si officiatur aut accus ad essit as volesci aeprat verior seqvenes comn imp orecat landuciliti.</p>
<p><a href="" class="btn">Learn more</a></p>
</div>
</div>

Pagination

This is the default iAPPS pagination so does not currently follow our naming structure

<div class="pagination">
<div class="pageNumbers">
<a href="javascript:void(0)" class="prev inactive"></a>
<span class="current">1</span>
<a href="javascript:void(0)">2</a>
<a href="javascript:void(0)">3</a>
<a href="javascript:void(0)">4</a>
<a href="javascript:void(0)">5</a>
<a href="javascript:void(0)" class="next"></a>
</div>
</div>

Popups

In-depth documentation, options and examples for the popup modals used on this site can be found here: http://dimsemenov.com/plugins/magnific-popup/documentation.html

<!--The link. data-mfp-src matches id of popup to open -->
<a data-mfp-src="#test-popup" class="openPopup">Show inline popup</a>
<!--the popup-->
<div id="test-popup" class="popup mfp-hide">
Popup content
</div>

<!--The link. HREF pointed to the image, popupType="image" -->
<a href="File Library/styleguide-files/500x281.jpg" class="openPopup" popupType="image">Show image popup</a>

<!--The link. HREF pointed to the YouTube or Vimeo URL, popupType="iframe" -->
<a href="https://www.youtube.com/watch?v=XQWOKBBJ114" class="openPopup" popupType="iframe">Show image popup</a>

<!--The link. HREF pointed to Google Maps URL (querystring format only!), popupType="iframe" -->
<a href="https://maps.google.com/maps?q=Gary+Lee's+Motor+Club+and+Grub" class="openPopup" popupType="iframe">Show Google Map popup</a>

Slider

In-depth documentation, options and examples for the slider used on this site can be found here: http://kenwheeler.github.io/slick/

Basic usage

<div class="slider">
<div><img src="http://fpoimg.com/1168x280?text=Slide One"></div>
<div><img src="http://fpoimg.com/1168x280?text=Slide Two"></div>
<div><img src="http://fpoimg.com/1168x280?text=Slide Three"></div>
</div>

<!-- The JS call to the slider should be placed on the page before the closing body tag -->

<script>
$('.slider').slick({
dots: true,
infinite: true,
autoplay: true,
autoplaySpeed: 4000,
speed: 300,
slidesToShow: 1,
slidesToScroll: 1,
});
</script>

Tabs

<ul class="tabs">
<li><a href="javascript:void(0)">Tab one</a>
<div>
<p>Content for tab one.</p>
</div>
</li>
<li><a href="javascript:void(0)">Tab two</a>
<div>
<p>Content for tab two.</p>
</div>
</li>
</ul>

<ul class="tabs tabs--accordion">
<li><a href="javascript:void(0)">Tab one</a>
<div>
<p>Content for tab one.</p>
</div>
</li>
<li><a href="javascript:void(0)">Tab two</a>
<div>
<p>Content for tab two.</p>
</div>
</li>
<li><a href="javascript:void(0)">Tab three</a>
<div>
<p>Content for tab three.</p>
</div>
</li>
<li><a href="javascript:void(0)">Tab four</a>
<div>
<p>Content for tab four.</p>
</div>
</li>
</ul>

Accordion Module

The iAPPS Accordion module utilizes the basic accordion placed within the structures necessary to create a standalone component that can be placed directly on the page through the iAPPS pagebuilder.

Background colors can be applied by applying one of the section modifier classes through the iAPPS interface:

• section--contrast = Accent or brand background color with appropriate color text
• section--contrastLight = Light accent or brand background color with appropriate color text
• section--contrastDark = Dark accent or brand background color with appropriate color text

• Please note that the code for iAPPS modules is presented primarily for developer reference. The code can be copied and pasted onto pages manually, but iAPPS functionality will not apply unless the module is placed on the page using iAPPS pagebuilder

<div class="section">
<div class="contained">
<ul class="accordion">
<li><span class="icon-question-alt">Title / Content / FAQ Goes Here</span>
<div class="accordion-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing 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.</p>
</div>
<!--/.accordion-content-->
</li>
<li><span class="icon-info">Title / Content / FAQ Goes Here</span>
<div class="accordion-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing 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.</p>
</div>
<!--/.accordion-content-->
</li>
<li><span class="icon-genius">Title / Content / FAQ Goes Here</span>
<div class="accordion-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing 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.</p>
</div>
<!--/.accordion-content-->
</li>
</ul>
</div>
</div>

Banner Module

The iAPPS Banner module is a general purpose, full-width banner intended for use anywhere appropriate on content pages.

By default, the banner has no background, with centered text on both small and large screens

The banner module has the following optional modifier classes which can be added through the iAPPS admin:

• banner--textLight = Light text instead of inheriting body text color
• banner--textBackgroundLight = Light background behind text
• banner--textBackgroundDark = Dark background behind light text
• banner--left = Banner text is centered on small screens and left-aligned on larger screens
• banner--right = Banner text is centered on small screens and right-aligned on larger screens
• banner--fixedBackground = Parallax effect where background image remains fixed on page scroll

Background colors and images can be applied by specifying a background image or applying one of the section modifier classes through the iAPPS interface:

• section--contrast = Accent or brand background color with appropriate color text
• section--contrastLight = Light accent or brand background color with appropriate color text
• section--contrastDark = Dark accent or brand background color with appropriate color text

• Please note that the code for iAPPS modules is presented primarily for developer reference. The code can be copied and pasted onto pages manually, but iAPPS functionality will not apply unless the module is placed on the page using iAPPS pagebuilder

<div class="section banner banner--textBackgroundDark" style="background-image:url(...);">
<div class="banner-contained contained"> <div class="bannerCopy">
<h2 class="bannerCopy-heading">Heading Here</h2>
<p>text blurb here Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p>
<p><a href="" class="btn">Learn More</a></p>
</div><!--/.bannerCopy--> 
</div><!--/.contained--> 
</div><!--/.banner-->

Content Slider Module

The iAPPS Content Rotator module is intended to display quotes, testimonials or general text with an optional byline.

In-depth documentation, options and examples for the slider can be found here: http://kenwheeler.github.io/slick/

Background colors can be applied by applying one of the section modifier classes through the iAPPS interface:

• section--contrast = Accent or brand background color with appropriate color text
• section--contrastLight = Light accent or brand background color with appropriate color text
• section--contrastDark = Dark accent or brand background color with appropriate color text

• Please note that the code for iAPPS modules is presented primarily for developer reference. The code can be copied and pasted onto pages manually, but iAPPS functionality will not apply unless the module is placed on the page using iAPPS pagebuilder

<div class="section contentSlider">
<div class="contained">
<div class="contentSlider-content">
<div class="contentSlider-item">
<p>"Quote / Testimonial / Content goes here"</p>
<p class="contentSlider-byline">John Doe</p>
</div>
<!--/.contentSlider-item-->
<div class="contentSlider-item">
<p>"Quote / Testimonial / Content goes here"</p>
<p class="contentSlider-byline">Jane Doe</p>
</div>
<!--/.contentSlider-item-->
<div class="contentSlider-item">
<p>"Quote / Testimonial / Content goes here"</p>
<p class="contentSlider-byline">Jimmy Doe</p>
</div>
<!--/.contentSlider-item-->
<div class="contentSlider-item">
<p>"Quote / Testimonial / Content goes here"</p>
<p class="contentSlider-byline">Jared Doe</p>
</div>
<!--/.contentSlider-item-->
<div class="contentSlider-item">
<p>"Quote / Testimonial / Content goes here"</p>
<p class="contentSlider-byline">Artist Formorly Known as John Joe</p>
</div>
<!--/.contentSlider-item-->
</div>
<!--/.contentSlider-content-->
</div>
<!--/.contentSlider-inner-->
</div>
<!--/.contentSlider-->
<script>
$('.contentSlider-content').slick({
  arrows: false,
  dots: true,
  fade: true,
  infinite: true,
  autoplay: true,
  autoplaySpeed: 4000,
  speed: 300,
  slidesToShow: 1,
  slidesToScroll: 1,
});
</script>

Feature Block Modules

The iAPPS Feature Block modules are pre-built structures utilizing text, figures, images and grid intended for use anywhere appropriate on content pages.

Background colors can be applied by applying one of the section modifier classes through the iAPPS interface:

• section--contrast = Accent or brand background color with appropriate color text
• section--contrastLight = Light accent or brand background color with appropriate color text
• section--contrastDark = Dark accent or brand background color with appropriate color text

• Please note that the code for iAPPS modules is presented primarily for developer reference. The code can be copied and pasted onto pages manually, but iAPPS functionality will not apply unless the module is placed on the page using iAPPS pagebuilder

Two Across

Optional Heading

<div class="section featureBlock featureBlock--two">
<div class="contained">
<h2 class="featureBlock-heading">Optional Heading</h2>
<div class="row">
<div class="column med-12">
<figure class="featureBlock-figure">
<a href=""><img alt="" src="http://placehold.it/600x338"></a>
<figcaption class="featureBlock-figcaption">
<h3 class="featureBlock-subHeading">Title / Link Goes Here</h3>
<p>lorem ipsum dolor sit amet, consec tetur adipis icing iz erat elit <a href="" class="trailingLink">Learn More</a></p>
<p><a class="btn">Optional CTA</a></p>
</figcaption>
</figure>
</div>
<!--/.column-->
<div class="column med-12">
<figure class="featureBlock-figure">
<a href=""><img alt="" src="http://placehold.it/600x338"></a>
<figcaption class="featureBlock-figcaption">
<h3 class="featureBlock-subHeading">Title / Link Goes Here</h3>
<p>lorem ipsum dolor sit amet, consec tetur adipis icing iz erat elit <a href="" class="trailingLink">Learn More</a></p>
<p><a class="btn">Optional CTA</a></p>
</figcaption>
</figure>
</div>
<!--/.column-->
</div>
<!--/.row-->
</div>
<!--/.contained-->
</div>
<!--/.featureBlock-->

Three Across

Optional Heading

<div class="section featureBlock featureBlock--three">
<div class="contained">
<h2 class="featureBlock-heading">Optional Heading</h2>
<div class="row">
<div class="column lg-8">
<figure class="featureBlock-figure">
<a href=""><img alt="" src="http://placehold.it/500x500"></a>
<figcaption class="featureBlock-figcaption">
<h3 class="featureBlock-subHeading">Title / Link Goes Here</h3>
<p>lorem ipsum dolor sit amet, consec tetur adipis icing iz erat elit <a href="" class="trailingLink">Learn More</a></p>
<p><a class="btn">Optional CTA</a></p>
</figcaption>
</figure>
</div>
<!--/.column-->
<div class="column lg-8">
<figure class="featureBlock-figure">
<a href=""><img alt="" src="http://placehold.it/500x500"></a>
<figcaption class="featureBlock-figcaption">
<h3 class="featureBlock-subHeading">Title / Link Goes Here</h3>
<p>lorem ipsum dolor sit amet, consec tetur adipis icing iz erat elit <a href="" class="trailingLink">Learn More</a></p>
<p><a class="btn">Optional CTA</a></p>
</figcaption>
</figure>
</div>
<!--/.column-->
<div class="column lg-8">
<figure class="featureBlock-figure">
<a href=""><img alt="" src="http://placehold.it/500x500"></a>
<figcaption class="featureBlock-figcaption">
<h3 class="featureBlock-subHeading">Title / Link Goes Here</h3>
<p>lorem ipsum dolor sit amet, consec tetur adipis icing iz erat elit <a href="" class="trailingLink">Learn More</a></p>
<p><a class="btn">Optional CTA</a></p>
</figcaption>
</figure>
</div>
<!--/.column-->
</div>
<!--/.row-->
</div>
<!--/.contained-->
</div>
<!--/.featureBlock-->

Four Across

Optional Heading

<div class="section featureBlock featureBlock--four">
<div class="contained">
<h2 class="featureBlock-heading">Optional Heading</h2>
<div class="row">
<div class="column sm-12 lg-6">
<figure class="featureBlock-figure">
<a href=""><img alt="" src="http://placehold.it/500x281"></a>
<figcaption class="featureBlock-figcaption">
<h3 class="featureBlock-subHeading">Title / Link Goes Here</h3>
<p>lorem ipsum dolor sit amet, consec tetur adipis icing iz erat elit <a href="" class="trailingLink">Learn More</a></p>
<p><a class="btn">Optional CTA</a></p>
</figcaption>
</figure>
</div>
<!--/.column-->
<div class="column sm-12 lg-6">
<figure class="featureBlock-figure">
<a href=""><img alt="" src="http://placehold.it/500x281"></a>
<figcaption class="featureBlock-figcaption">
<h3 class="featureBlock-subHeading">Title / Link Goes Here</h3>
<p>lorem ipsum dolor sit amet, consec tetur adipis icing iz erat elit <a href="" class="trailingLink">Learn More</a></p>
<p><a class="btn">Optional CTA</a></p>
</figcaption>
</figure>
</div>
<!--/.column-->
<div class="column sm-12 lg-6">
<figure class="featureBlock-figure">
<a href=""><img alt="" src="http://placehold.it/500x281"></a>
<figcaption class="featureBlock-figcaption">
<h3 class="featureBlock-subHeading">Title / Link Goes Here</h3>
<p>lorem ipsum dolor sit amet, consec tetur adipis icing iz erat elit <a href="" class="trailingLink">Learn More</a></p>
<p><a class="btn">Optional CTA</a></p>
</figcaption>
</figure>
</div>
<!--/.column-->
<div class="column sm-12 lg-6">
<figure class="featureBlock-figure">
<a href=""><img alt="" src="http://placehold.it/500x281"></a>
<figcaption class="featureBlock-figcaption">
<h3 class="featureBlock-subHeading">Title / Link Goes Here</h3>
<p>lorem ipsum dolor sit amet, consec tetur adipis icing iz erat elit <a href="" class="trailingLink">Learn More</a></p>
<p><a class="btn">Optional CTA</a></p>
</figcaption>
</figure>
</div>
<!--/.column-->
</div>
<!--/.row-->
</div>
<!--/.contained-->
</div>
<!--/.featureBlock-->

Five with Large Feature

Optional Heading

Title / Link Goes Here

Lorem ipsum dolor sit amet, consectetur adipiscing 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. Read More

<div class="section featureBlock featureBlock--five">
<div class="contained">
<h2 class="featureBlock-heading">Optional Heading</h2>
<div class="featureBlock-mainFeature">
<figure class="featureBlock-mainImage"> <img src="http://placehold.it/600x338"> </figure>
<div class="featureBlock-mainCopy">
<h3>Title / Link Goes Here</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing 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. <a class="trailingLink" href="">Read More</a></p>
</div>
<!--/.featureBlock-mainCopy-->
</div>
<!--/.featureBlock-mainFeature-->
<div class="row">
<div class="column sm-12 lg-6">
<figure class="featureBlock-figure">
<a href=""><img alt="" src="http://placehold.it/500x281"></a>
<figcaption class="featureBlock-figcaption">
<h3 class="featureBlock-subHeading">Title / Link Goes Here</h3>
<p>lorem ipsum dolor sit amet, consec tetur adipis icing iz erat elit <a href="" class="trailingLink">Learn More</a></p>
<p><a class="btn">Optional CTA</a></p>
</figcaption>
</figure>
</div>
<!--/.column-->
<div class="column sm-12 lg-6">
<figure class="featureBlock-figure">
<a href=""><img alt="" src="http://placehold.it/500x281"></a>
<figcaption class="featureBlock-figcaption">
<h3 class="featureBlock-subHeading">Title / Link Goes Here</h3>
<p>lorem ipsum dolor sit amet, consec tetur adipis icing iz erat elit <a href="" class="trailingLink">Learn More</a></p>
<p><a class="btn">Optional CTA</a></p>
</figcaption>
</figure>
</div>
<!--/.column-->
<div class="column sm-12 lg-6">
<figure class="featureBlock-figure">
<a href=""><img alt="" src="http://placehold.it/500x281"></a>
<figcaption class="featureBlock-figcaption">
<h3 class="featureBlock-subHeading">Title / Link Goes Here</h3>
<p>lorem ipsum dolor sit amet, consec tetur adipis icing iz erat elit <a href="" class="trailingLink">Learn More</a></p>
<p><a class="btn">Optional CTA</a></p>
</figcaption>
</figure>
</div>
<!--/.column-->
<div class="column sm-12 lg-6">
<figure class="featureBlock-figure">
<a href=""><img alt="" src="http://placehold.it/500x281"></a>
<figcaption class="featureBlock-figcaption">
<h3 class="featureBlock-subHeading">Title / Link Goes Here</h3>
<p>lorem ipsum dolor sit amet, consec tetur adipis icing iz erat elit <a href="" class="trailingLink">Learn More</a></p>
<p><a class="btn">Optional CTA</a></p>
</figcaption>
</figure>
</div>
<!--/.column-->
</div>
<!--/.row-->
</div>
<!--/.contained-->
</div>
<!--/.featureBlock-->

Five with Large Feature - Image Right Aligned

Optional Heading

Title / Link Goes Here

Lorem ipsum dolor sit amet, consectetur adipiscing 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. Read More

<div class="section featureBlock featureBlock--five">
<div class="contained">
<h2 class="featureBlock-heading">Optional Heading</h2>
<div class="featureBlock-mainFeature">
<figure class="featureBlock-mainImage featureBlock-mainFeature--imageRight"> <img src="http://placehold.it/600x338"> </figure>
<div class="featureBlock-mainCopy">
<h3>Title / Link Goes Here</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing 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. <a class="trailingLink" href="">Read More</a></p>
</div>
<!--/.featureBlock-mainCopy-->
</div>
<!--/.featureBlock-mainFeature-->
<div class="row">
<div class="column sm-12 lg-6">
<figure class="featureBlock-figure">
<a href=""><img alt="" src="http://placehold.it/500x281"></a>
<figcaption class="featureBlock-figcaption">
<h3 class="featureBlock-subHeading">Title / Link Goes Here</h3>
<p>lorem ipsum dolor sit amet, consec tetur adipis icing iz erat elit <a href="" class="trailingLink">Learn More</a></p>
<p><a class="btn">Optional CTA</a></p>
</figcaption>
</figure>
</div>
<!--/.column-->
<div class="column sm-12 lg-6">
<figure class="featureBlock-figure">
<a href=""><img alt="" src="http://placehold.it/500x281"></a>
<figcaption class="featureBlock-figcaption">
<h3 class="featureBlock-subHeading">Title / Link Goes Here</h3>
<p>lorem ipsum dolor sit amet, consec tetur adipis icing iz erat elit <a href="" class="trailingLink">Learn More</a></p>
<p><a class="btn">Optional CTA</a></p>
</figcaption>
</figure>
</div>
<!--/.column-->
<div class="column sm-12 lg-6">
<figure class="featureBlock-figure">
<a href=""><img alt="" src="http://placehold.it/500x281"></a>
<figcaption class="featureBlock-figcaption">
<h3 class="featureBlock-subHeading">Title / Link Goes Here</h3>
<p>lorem ipsum dolor sit amet, consec tetur adipis icing iz erat elit <a href="" class="trailingLink">Learn More</a></p>
<p><a class="btn">Optional CTA</a></p>
</figcaption>
</figure>
</div>
<!--/.column-->
<div class="column sm-12 lg-6">
<figure class="featureBlock-figure">
<a href=""><img alt="" src="http://placehold.it/500x281"></a>
<figcaption class="featureBlock-figcaption">
<h3 class="featureBlock-subHeading">Title / Link Goes Here</h3>
<p>lorem ipsum dolor sit amet, consec tetur adipis icing iz erat elit <a href="" class="trailingLink">Learn More</a></p>
<p><a class="btn">Optional CTA</a></p>
</figcaption>
</figure>
</div>
<!--/.column-->
</div>
<!--/.row-->
</div>
<!--/.contained-->
</div>
<!--/.featureBlock-->

Gallery Module

The iAPPS gallery module can be displayed as either a grid or slider layout.

In-depth documentation, options and examples for the slider can be found here: http://kenwheeler.github.io/slick/

In-depth documentation, options and examples for the gallery/lightbox can be found here: http://dimsemenov.com/plugins/magnific-popup/

Background colors can be applied by applying one of the section modifier classes through the iAPPS interface:

• section--contrast = Accent or brand background color with appropriate color text
• section--contrastLight = Light accent or brand background color with appropriate color text
• section--contrastDark = Dark accent or brand background color with appropriate color text

• Please note that the code for iAPPS modules is presented primarily for developer reference. The code can be copied and pasted onto pages manually, but iAPPS functionality will not apply unless the module is placed on the page using iAPPS pagebuilder

Grid Layout

<div class="section gallery gallery--grid">
<div class="contained">
<div class="gallery-images">
<figure class="gallery-figure">
<a href="http://placehold.it/900x900" title="Image 01"><img src="http://placehold.it/300x300" alt=""></a>
<figcaption>Optional Description of Image</figcaption>
</figure>
<!--/.gallery-figure-->
<figure class="gallery-figure">
<a href="http://placehold.it/900x900" title="Image 02"><img src="http://placehold.it/300x300" alt=""></a>
<figcaption>Optional Description of Image</figcaption>
</figure>
<!--/.gallery-figure-->
<figure class="gallery-figure">
<a href="http://placehold.it/900x900" title="Image 03"><img src="http://placehold.it/300x300" alt=""></a>
<figcaption>Optional Description of Image</figcaption>
</figure>
<!--/.gallery-figure-->
<figure class="gallery-figure">
<a href="http://placehold.it/900x900" title="Image 04"><img src="http://placehold.it/300x300" alt=""></a>
<figcaption>Optional Description of Image</figcaption>
</figure>
<!--/.gallery-figure-->
<figure class="gallery-figure">
<a href="http://placehold.it/900x900" title="Image 05"><img src="http://placehold.it/300x300" alt=""></a>
<figcaption>Optional Description of Image</figcaption>
</figure>
<!--/.gallery-figure-->
<figure class="gallery-figure">
<a href="http://placehold.it/900x900" title="Image 06"><img src="http://placehold.it/300x300" alt=""></a>
<figcaption>Optional Description of Image</figcaption>
</figure>
<!--/.gallery-figure-->
<figure class="gallery-figure">
<a href="http://placehold.it/900x900" title="Image 07"><img src="http://placehold.it/300x300" alt=""></a>
<figcaption>Optional Description of Image</figcaption>
</figure>
<!--/.gallery-figure-->
<figure class="gallery-figure">
<a href="http://placehold.it/900x900" title="Image 08"><img src="http://placehold.it/300x300" alt=""></a>
<figcaption>Optional Description of Image</figcaption>
</figure>
<!--/.gallery-figure-->
<figure class="gallery-figure">
<a href="http://placehold.it/900x900" title="Image 09"><img src="http://placehold.it/300x300" alt=""></a>
<figcaption>Optional Description of Image</figcaption>
</figure>
<!--/.gallery-figure-->
<figure class="gallery-figure">
<a href="http://placehold.it/900x900" title="Image 10"><img src="http://placehold.it/300x300" alt=""></a>
<figcaption>Optional Description of Image</figcaption>
</figure>
<!--/.gallery-figure-->
</div>
<!--/.gallery-images-->
</div>
<!--/.gallery-inner-->
</div>
<!--/.gallery-->

<script>
$('.gallery-images').magnificPopup({
delegate: 'figure:not(.slick-cloned) a',
type: 'image',
gallery: {
  enabled: true
}
});
</script>

Slider Layout

<div class="section gallery gallery--slider">
<div class="contained">
<div class="gallery-images">
<figure class="gallery-figure">
<a href="http://placehold.it/900x900" title="Image 01"><img src="http://placehold.it/300x300" alt=""></a>
<figcaption>Optional Description of Image</figcaption>
</figure>
<!--/.gallery-figure-->
<figure class="gallery-figure">
<a href="http://placehold.it/900x900" title="Image 02"><img src="http://placehold.it/300x300" alt=""></a>
<figcaption>Optional Description of Image</figcaption>
</figure>
<!--/.gallery-figure-->
<figure class="gallery-figure">
<a href="http://placehold.it/900x900" title="Image 03"><img src="http://placehold.it/300x300" alt=""></a>
<figcaption>Optional Description of Image</figcaption>
</figure>
<!--/.gallery-figure-->
<figure class="gallery-figure">
<a href="http://placehold.it/900x900" title="Image 04"><img src="http://placehold.it/300x300" alt=""></a>
<figcaption>Optional Description of Image</figcaption>
</figure>
<!--/.gallery-figure-->
<figure class="gallery-figure">
<a href="http://placehold.it/900x900" title="Image 05"><img src="http://placehold.it/300x300" alt=""></a>
<figcaption>Optional Description of Image</figcaption>
</figure>
<!--/.gallery-figure-->
<figure class="gallery-figure">
<a href="http://placehold.it/900x900" title="Image 06"><img src="http://placehold.it/300x300" alt=""></a>
<figcaption>Optional Description of Image</figcaption>
</figure>
<!--/.gallery-figure-->
<figure class="gallery-figure">
<a href="http://placehold.it/900x900" title="Image 07"><img src="http://placehold.it/300x300" alt=""></a>
<figcaption>Optional Description of Image</figcaption>
</figure>
<!--/.gallery-figure-->
<figure class="gallery-figure">
<a href="http://placehold.it/900x900" title="Image 08"><img src="http://placehold.it/300x300" alt=""></a>
<figcaption>Optional Description of Image</figcaption>
</figure>
<!--/.gallery-figure-->
<figure class="gallery-figure">
<a href="http://placehold.it/900x900" title="Image 09"><img src="http://placehold.it/300x300" alt=""></a>
<figcaption>Optional Description of Image</figcaption>
</figure>
<!--/.gallery-figure-->
<figure class="gallery-figure">
<a href="http://placehold.it/900x900" title="Image 10"><img src="http://placehold.it/300x300" alt=""></a>
<figcaption>Optional Description of Image</figcaption>
</figure>
<!--/.gallery-figure-->
</div>
<!--/.gallery-images-->
</div>
<!--/.gallery-inner-->
</div>
<!--/.gallery-->

<script>
$('.gallery-images').magnificPopup({
delegate: 'figure:not(.slick-cloned) a',
type: 'image',
gallery: {
  enabled: true
}
});
</script>
<script>
slidesToShow: 6,
slidesToScroll: 6,
dots: false,
slide: 'figure',
responsive: [{
breakpoint: 1024,
settings: {
slidesToShow: 4,
slidesToScroll: 4
}
}, {
breakpoint: 641,
settings: {
slidesToShow: 3,
slidesToScroll: 3
}
}, {
breakpoint: 500,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
}]
});
</script>

Location Module

The iAPPS Location module is a general purpose, full-width map with text intended for use anywhere appropriate on content pages..

Background colors can be applied by applying one of the section modifier classes through the iAPPS interface:

• section--contrast = Accent or brand background color with appropriate color text
• section--contrastLight = Light accent or brand background color with appropriate color text
• section--contrastDark = Dark accent or brand background color with appropriate color text

• Please note that the code for iAPPS modules is presented primarily for developer reference. The code can be copied and pasted onto pages manually, but iAPPS functionality will not apply unless the module is placed on the page using iAPPS pagebuilder

<div class="section h-hard location">
<div class="location-map" id="locMap">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3067.8884650693753!2d-104.98921538462452!3d39.74215617944929!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x876c78d5ea89fb03%3A0x4c2c0212d4c4f695!2s1600+Broadway%2C+1600+Broadway%2C+Denver%2C+CO+80202!5e0!3m2!1sen!2sus!4v1456762729973" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
</div>
<!--/.spotlight-image-->
<div itemscope itemtype="http://schema.org/LocalBusiness" class="location-content">
<h3 itemprop="name" class="location-heading">Location Title Goes Here</h3>
<p> <span itemprop="address" itemscope itemtype="http://schema.org/PostalAddress"> <span itemprop="streetAddress">123 Main Street<br/>
Suite 234</span>
<br/>
<span itemprop="addressLocality">Somewhere,</span> <span itemprop="addressRegion">NY</span> <span itemprop="postalCode">10001</span></span>
<br/>
<span class="location-phone" itemprop="telephone">800.123.4567</span>
<br/>
<span class="location-fax" itemprop="faxNumber">212.123.4567</span></p>
<p><a href="" class="btn">Directions</a> <a href="" class="btn">Website</a></p>
</div>
<!--/.location-content-->
</div>
<!--/.location-->

<div class="section h-hard location location--mapRight">
<div class="location-map" id="locMap">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3067.8884650693753!2d-104.98921538462452!3d39.74215617944929!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x876c78d5ea89fb03%3A0x4c2c0212d4c4f695!2s1600+Broadway%2C+1600+Broadway%2C+Denver%2C+CO+80202!5e0!3m2!1sen!2sus!4v1456762729973" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
</div>
<!--/.spotlight-image-->
<div itemscope itemtype="http://schema.org/LocalBusiness" class="location-content">
<h3 itemprop="name" class="location-heading">Location Title Goes Here</h3>
<p> <span itemprop="address" itemscope itemtype="http://schema.org/PostalAddress"> <span itemprop="streetAddress">123 Main Street<br/>
Suite 234</span>
<br/>
<span itemprop="addressLocality">Somewhere,</span> <span itemprop="addressRegion">NY</span> <span itemprop="postalCode">10001</span></span>
<br/>
<span class="location-phone" itemprop="telephone">800.123.4567</span>
<br/>
<span class="location-fax" itemprop="faxNumber">212.123.4567</span></p>
<p><a href="" class="btn">Directions</a> <a href="" class="btn">Website</a></p>
</div>
<!--/.location-content-->
</div>
<!--/.location-->

Main Slider Module

The iAPPS Main Slider module is a general purpose, full-width slider intended for use at the top of content pages.

The Main Slider module has the following optional modifier classes which can be added through the iAPPS admin:

• sliderMain-slide--textLight = Light text instead of inheriting body text color
• sliderMain-slide--textBackgroundLight = Light background behind text
• sliderMain-slide--textBackgroundDark = Dark background behind light text
• sliderMain-slide--leftTop = Slider text is centered on small screens and aligned left/top on larger screens
• sliderMain-slide--centerTop = Slider text is centered on small screens and aligned center/top on larger screens
• sliderMain-slide--rightTop = Slider text is centered on small screens and aligned right/top on larger screens
• sliderMain-slide--leftCenter = Slider text is centered on small screens and aligned left/center on larger screens
• sliderMain-slide--centerCenter = Slider text is centered on small screens and larger screens
• sliderMain-slide--rightCenter = Slider text is centered on small screens and aligned right/center on larger screens
• sliderMain-slide--leftBottom = Slider text is centered on small screens and aligned left/bottom on larger screens
• sliderMain-slide--centerBottom = Slider text is centered on small screens and aligned center/bottom on larger screens
• sliderMain-slide--rightBottom = Slider text is centered on small screens and aligned right/bottom on larger screens

• Please note that the code for iAPPS modules is presented primarily for developer reference. The code can be copied and pasted onto pages manually, but iAPPS functionality will not apply unless the module is placed on the page using iAPPS pagebuilder

<div class="slider sliderMain">
<div class="sliderMain-slide sliderMain-slide--centerCenter">
<a href="">
<div class="sliderMainImage" data-lg="http://placehold.it/1920x700/eaeaea/cacaca" data-sm="http://placehold.it/700x255/eaeaea/cacaca">
</div>
<!--/.sliderMainImage-->
<span class="sliderMainContent"> <span class="sliderMainContent-inner"> <span class="sliderMainContent-copy">
<h2 class="sliderMainContent-heading">Heading 01 Here</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p>
</span>
<!--/.sliderMainContent-copy-->
</span>
<!--/.sliderMainContent-inner-->
</span>
<!--/.sliderMainContent-->
</a>
</div>
<!--/.sliderMain-slide-->
<div class="sliderMain-slide sliderMain-slide--leftTop">
<a href="">
<div class="sliderMainImage" data-lg="http://placehold.it/1920x700/cacaca/959595" data-sm="http://placehold.it/700x255/cacaca/959595">
</div>
<!--/.sliderMainImage-->
<span class="sliderMainContent"> <span class="sliderMainContent-inner"> <span class="sliderMainContent-copy">
<h2 class="sliderMainContent-heading">Heading 02 Here</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p>
</span>
<!--/.sliderMainContent-copy-->
</span>
<!--/.sliderMainContent-inner-->
</span>
<!--/.sliderMainContent-->
</a>
</div>
<!--/.sliderMain-slide-->
<div class="sliderMain-slide sliderMain-slide--rightBottom">
<a href="">
<div class="sliderMainImage" data-lg="http://placehold.it/1920x700/959595/707070" data-sm="http://placehold.it/700x255/959595/707070">
</div>
<!--/.sliderMainImage-->
<span class="sliderMainContent"> <span class="sliderMainContent-inner"> <span class="sliderMainContent-copy">
<h2 class="sliderMainContent-heading">Heading 03 Here</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p>
</span>
<!--/.sliderMainContent-copy-->
</span>
<!--/.sliderMainContent-inner-->
</span>
<!--/.sliderMainContent-->
</a>
</div>
<!--/.sliderMain-slide-->
</div>
<!--/.sliderMain-->
<script>
$('.sliderMain').slick({
arrows: false,
dots: true,
fade: true,
infinite: true,
autoplay: true,
autoplaySpeed: 4000,
speed: 300,
slidesToShow: 1,
slidesToScroll: 1,
});
</script>

Page Title Module

The iAPPS Page Title module is a general purpose, full-width banner containing an H1 and optional h2. It is intended for use only at the top of content pages.

By default, the Page Title module has no background, with centered text on both small and large screens.

The Page Title module has the following optional modifier classes which can be added through the iAPPS admin:

• pageTitle--textLight = Light text instead of inheriting body text color
• pageTitle--textBackgroundLight = Light background behind text
• pageTitle--textBackgroundDark = Dark background behind light text
• pageTitle--left = Page Title text is centered on small screens and left-aligned on larger screens
• pageTitle--right = Page Title text is centered on small screens and right-aligned on larger screens

Background colors and images can be applied by specifying a background image or applying one of the section modifier classes through the iAPPS interface:

• section--contrast = Accent or brand background color with appropriate color text
• section--contrastLight = Light accent or brand background color with appropriate color text
• section--contrastDark = Dark accent or brand background color with appropriate color text

• Please note that the code for iAPPS modules is presented primarily for developer reference. The code can be copied and pasted onto pages manually, but iAPPS functionality will not apply unless the module is placed on the page using iAPPS pagebuilder

<div class="section pageTitle pageTitle--textBackgroundDark" style="background-image:url(...);">
<div class="contained">
<div class="pageTitleCopy">
<h1 class="pageTitleCopy-heading">Page Title Here</h1>
<h2 class="pageTitleCopy-SubHeading">Optional subheading here</h2>
</div>
<!--/.pageTitleCopy-->
</div>
<!--/.contained-->
</div>
<!--/.pageTitle-->

Social Feed Module

The iAPPS Social Feed module currently supports Twitter and Facebook. It is intended for use anywhere appropriate on content pages.

• Please note that the code for iAPPS modules is presented primarily for developer reference. The code can be copied and pasted onto pages manually, but iAPPS functionality will not apply unless the module is placed on the page using iAPPS pagebuilder

Twitter

usernamehere

• 7 hours ago

Lorem ipsum dolor est, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut @handle labore et dolore magna aliqua, sed. #hashtag

usernamehere

• 7 hours ago

Lorem ipsum dolor est, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut @handle labore et dolore magna aliqua, sed. #hashtag

usernamehere

• 7 hours ago

Lorem ipsum dolor est, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut @handle labore et dolore magna aliqua, sed. #hashtag

usernamehere

• 7 hours ago

Lorem ipsum dolor est, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut @handle labore et dolore magna aliqua, sed. #hashtag

usernamehere

• 7 hours ago

Lorem ipsum dolor est, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut @handle labore et dolore magna aliqua, sed. #hashtag

usernamehere

• 7 hours ago

Lorem ipsum dolor est, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut @handle labore et dolore magna aliqua, sed. #hashtag

usernamehere

• 7 hours ago

Lorem ipsum dolor est, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut @handle labore et dolore magna aliqua, sed. #hashtag

usernamehere

• 7 hours ago

Lorem ipsum dolor est, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut @handle labore et dolore magna aliqua, sed. #hashtag

<div class="section socialFeed socialFeed--twitter">
<div class="contained socialFeed-contained">
<div class="socialFeed-item">
<figure class="socialFeed-figure">
<a href=""><img src="http://placehold.it/50x50" alt=""></a>
</figure>
<div class="socialFeed-content">
<h5 class="socialFeed-user">usernamehere</h5>
<ul class="infoList socialFeed-infoList">
<li>7 hours ago</li>
</ul>
<p>Lorem ipsum dolor est, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut @handle labore et dolore magna aliqua, sed. #hashtag</p>
</div>
<!--/.socialFeed-content-->
</div>
<!--/.socialFeed-item-->
<div class="socialFeed-item">
<figure class="socialFeed-figure">
<a href=""><img src="http://placehold.it/50x50" alt=""></a>
</figure>
<div class="socialFeed-content">
<h5 class="socialFeed-user">usernamehere</h5>
<ul class="infoList socialFeed-infoList">
<li>7 hours ago</li>
</ul>
<p>Lorem ipsum dolor est, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut @handle labore et dolore magna aliqua, sed. #hashtag</p>
</div>
<!--/.socialFeed-content-->
</div>
<!--/.socialFeed-item-->
<div class="socialFeed-item">
<figure class="socialFeed-figure">
<a href=""><img src="http://placehold.it/50x50" alt=""></a>
</figure>
<div class="socialFeed-content">
<h5 class="socialFeed-user">usernamehere</h5>
<ul class="infoList socialFeed-infoList">
<li>7 hours ago</li>
</ul>
<p>Lorem ipsum dolor est, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut @handle labore et dolore magna aliqua, sed. #hashtag</p>
</div>
<!--/.socialFeed-content-->
</div>
<!--/.socialFeed-item-->
<div class="socialFeed-item">
<figure class="socialFeed-figure">
<a href=""><img src="http://placehold.it/50x50" alt=""></a>
</figure>
<div class="socialFeed-content">
<h5 class="socialFeed-user">usernamehere</h5>
<ul class="infoList socialFeed-infoList">
<li>7 hours ago</li>
</ul>
<p>Lorem ipsum dolor est, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut @handle labore et dolore magna aliqua, sed. #hashtag</p>
</div>
<!--/.socialFeed-content-->
</div>
<!--/.socialFeed-item-->
<div class="socialFeed-item">
<figure class="socialFeed-figure">
<a href=""><img src="http://placehold.it/50x50" alt=""></a>
</figure>
<div class="socialFeed-content">
<h5 class="socialFeed-user">usernamehere</h5>
<ul class="infoList socialFeed-infoList">
<li>7 hours ago</li>
</ul>
<p>Lorem ipsum dolor est, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut @handle labore et dolore magna aliqua, sed. #hashtag</p>
</div>
<!--/.socialFeed-content-->
</div>
<!--/.socialFeed-item-->
<div class="socialFeed-item">
<figure class="socialFeed-figure">
<a href=""><img src="http://placehold.it/50x50" alt=""></a>
</figure>
<div class="socialFeed-content">
<h5 class="socialFeed-user">usernamehere</h5>
<ul class="infoList socialFeed-infoList">
<li>7 hours ago</li>
</ul>
<p>Lorem ipsum dolor est, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut @handle labore et dolore magna aliqua, sed. #hashtag</p>
</div>
<!--/.socialFeed-content-->
</div>
<!--/.socialFeed-item-->
<div class="socialFeed-item">
<figure class="socialFeed-figure">
<a href=""><img src="http://placehold.it/50x50" alt=""></a>
</figure>
<div class="socialFeed-content">
<h5 class="socialFeed-user">usernamehere</h5>
<ul class="infoList socialFeed-infoList">
<li>7 hours ago</li>
</ul>
<p>Lorem ipsum dolor est, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut @handle labore et dolore magna aliqua, sed. #hashtag</p>
</div>
<!--/.socialFeed-content-->
</div>
<!--/.socialFeed-item-->
<div class="socialFeed-item">
<figure class="socialFeed-figure">
<a href=""><img src="http://placehold.it/50x50" alt=""></a>
</figure>
<div class="socialFeed-content">
<h5 class="socialFeed-user">usernamehere</h5>
<ul class="infoList socialFeed-infoList">
<li>7 hours ago</li>
</ul>
<p>Lorem ipsum dolor est, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut @handle labore et dolore magna aliqua, sed. #hashtag</p>
</div>
<!--/.socialFeed-content-->
</div>
<!--/.socialFeed-item-->
</div>
<!--/.socialFeed-inner-->
</div>
<!--/.socialFeed-->
<script>
$('.socialFeed-contained').slick({
arrows: false,
dots: true,
infinite: true,
autoplay: true,
autoplaySpeed: 4000,
speed: 300,
slidesToShow: 2,
slidesToScroll: 2,
responsive: [{
breakpoint: 641,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
}]
});
</script>

Facebook

usernamehere

• 7 hours ago

Lorem ipsum dolor est, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut @handle labore et dolore magna aliqua, sed. #hashtag

usernamehere

• 7 hours ago

Lorem ipsum dolor est, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut @handle labore et dolore magna aliqua, sed. #hashtag

usernamehere

• 7 hours ago

Lorem ipsum dolor est, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut @handle labore et dolore magna aliqua, sed. #hashtag

usernamehere

• 7 hours ago

Lorem ipsum dolor est, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut @handle labore et dolore magna aliqua, sed. #hashtag

usernamehere

• 7 hours ago

Lorem ipsum dolor est, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut @handle labore et dolore magna aliqua, sed. #hashtag

usernamehere

• 7 hours ago

Lorem ipsum dolor est, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut @handle labore et dolore magna aliqua, sed. #hashtag

usernamehere

• 7 hours ago

Lorem ipsum dolor est, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut @handle labore et dolore magna aliqua, sed. #hashtag

usernamehere

• 7 hours ago

Lorem ipsum dolor est, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut @handle labore et dolore magna aliqua, sed. #hashtag

<div class="section socialFeed socialFeed--facebook">
<div class="contained socialFeed-contained">
<div class="socialFeed-item">
<figure class="socialFeed-figure">
<a href=""><img src="http://placehold.it/50x50" alt=""></a>
</figure>
<div class="socialFeed-content">
<h5 class="socialFeed-user">usernamehere</h5>
<ul class="infoList socialFeed-infoList">
<li>7 hours ago</li>
</ul>
<p>Lorem ipsum dolor est, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut @handle labore et dolore magna aliqua, sed. #hashtag</p>
</div>
<!--/.socialFeed-content-->
</div>
<!--/.socialFeed-item-->
<div class="socialFeed-item">
<figure class="socialFeed-figure">
<a href=""><img src="http://placehold.it/50x50" alt=""></a>
</figure>
<div class="socialFeed-content">
<h5 class="socialFeed-user">usernamehere</h5>
<ul class="infoList socialFeed-infoList">
<li>7 hours ago</li>
</ul>
<p>Lorem ipsum dolor est, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut @handle labore et dolore magna aliqua, sed. #hashtag</p>
</div>
<!--/.socialFeed-content-->
</div>
<!--/.socialFeed-item-->
<div class="socialFeed-item">
<figure class="socialFeed-figure">
<a href=""><img src="http://placehold.it/50x50" alt=""></a>
</figure>
<div class="socialFeed-content">
<h5 class="socialFeed-user">usernamehere</h5>
<ul class="infoList socialFeed-infoList">
<li>7 hours ago</li>
</ul>
<p>Lorem ipsum dolor est, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut @handle labore et dolore magna aliqua, sed. #hashtag</p>
</div>
<!--/.socialFeed-content-->
</div>
<!--/.socialFeed-item-->
<div class="socialFeed-item">
<figure class="socialFeed-figure">
<a href=""><img src="http://placehold.it/50x50" alt=""></a>
</figure>
<div class="socialFeed-content">
<h5 class="socialFeed-user">usernamehere</h5>
<ul class="infoList socialFeed-infoList">
<li>7 hours ago</li>
</ul>
<p>Lorem ipsum dolor est, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut @handle labore et dolore magna aliqua, sed. #hashtag</p>
</div>
<!--/.socialFeed-content-->
</div>
<!--/.socialFeed-item-->
<div class="socialFeed-item">
<figure class="socialFeed-figure">
<a href=""><img src="http://placehold.it/50x50" alt=""></a>
</figure>
<div class="socialFeed-content">
<h5 class="socialFeed-user">usernamehere</h5>
<ul class="infoList socialFeed-infoList">
<li>7 hours ago</li>
</ul>
<p>Lorem ipsum dolor est, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut @handle labore et dolore magna aliqua, sed. #hashtag</p>
</div>
<!--/.socialFeed-content-->
</div>
<!--/.socialFeed-item-->
<div class="socialFeed-item">
<figure class="socialFeed-figure">
<a href=""><img src="http://placehold.it/50x50" alt=""></a>
</figure>
<div class="socialFeed-content">
<h5 class="socialFeed-user">usernamehere</h5>
<ul class="infoList socialFeed-infoList">
<li>7 hours ago</li>
</ul>
<p>Lorem ipsum dolor est, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut @handle labore et dolore magna aliqua, sed. #hashtag</p>
</div>
<!--/.socialFeed-content-->
</div>
<!--/.socialFeed-item-->
<div class="socialFeed-item">
<figure class="socialFeed-figure">
<a href=""><img src="http://placehold.it/50x50" alt=""></a>
</figure>
<div class="socialFeed-content">
<h5 class="socialFeed-user">usernamehere</h5>
<ul class="infoList socialFeed-infoList">
<li>7 hours ago</li>
</ul>
<p>Lorem ipsum dolor est, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut @handle labore et dolore magna aliqua, sed. #hashtag</p>
</div>
<!--/.socialFeed-content-->
</div>
<!--/.socialFeed-item-->
<div class="socialFeed-item">
<figure class="socialFeed-figure">
<a href=""><img src="http://placehold.it/50x50" alt=""></a>
</figure>
<div class="socialFeed-content">
<h5 class="socialFeed-user">usernamehere</h5>
<ul class="infoList socialFeed-infoList">
<li>7 hours ago</li>
</ul>
<p>Lorem ipsum dolor est, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut @handle labore et dolore magna aliqua, sed. #hashtag</p>
</div>
<!--/.socialFeed-content-->
</div>
<!--/.socialFeed-item-->
</div>
<!--/.socialFeed-inner-->
</div>
<!--/.socialFeed-->
<script>
$('.socialFeed-contained').slick({
arrows: false,
dots: true,
infinite: true,
autoplay: true,
autoplaySpeed: 4000,
speed: 300,
slidesToShow: 2,
slidesToScroll: 2,
responsive: [{
breakpoint: 641,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
}]
});
</script>

Social Share Module

The iAPPS Social Share module is a general purpose, full-width banner intended for use anywhere appropriate on content pages.

The Social Share module utilizes ShareThis, a third party resource. Each client must have a current account with ShareThis for this module to function correctly. Details and registration instructions can be found at http://www.sharethis.com/

Background colors can be applied by applying one of the section modifier classes through the iAPPS interface:

• section--contrast = Accent or brand background color with appropriate color text
• section--contrastLight = Light accent or brand background color with appropriate color text
• section--contrastDark = Dark accent or brand background color with appropriate color text

• Please note that the code for iAPPS modules is presented primarily for developer reference. The code can be copied and pasted onto pages manually, but iAPPS functionality will not apply unless the module is placed on the page using iAPPS pagebuilder

<div class="section section--contrastLight h-hardEnds socialShare">
    <div class="socialShare-inner">
        <h4 class="socialShare-heading">Share This</h4>
        <div class="socialShare-icons">
            <span class="st-custom-button st_twitter_large" data-network="twitter">
                <span class="stButton">
                    <span class="stLarge"></span>
                </span>
            </span>
            <span class="st-custom-button st_facebook_large" data-network="facebook">
                <span class="stButton">
                    <span class="stLarge"></span>
                </span>
            </span>
            <span class="st-custom-button st_email_large" data-network="email">
                <span class="stButton">
                    <span class="stLarge"></span>
                </span>
            </span>
            <span class="st-custom-button st_print_large" data-network="print">
                <span class="stButton">
                    <span class="stLarge"></span>
                </span>
            </span>
            <span class="st-custom-button st_sharethis_large" data-network="sharethis">
                <span class="stButton">
                    <span class="stLarge"></span>
                </span>
            </span>
        </div>
    </div>
</div>

Spotlight Module

The iAPPS Spotlight module is a general purpose, full-width image with text intended for use anywhere appropriate on content pages.

Background colors can be applied by applying one of the section modifier classes through the iAPPS interface:

• section--contrast = Accent or brand background color with appropriate color text
• section--contrastLight = Light accent or brand background color with appropriate color text
• section--contrastDark = Dark accent or brand background color with appropriate color text

• Please note that the code for iAPPS modules is presented primarily for developer reference. The code can be copied and pasted onto pages manually, but iAPPS functionality will not apply unless the module is placed on the page using iAPPS pagebuilder

<div class="section h-hard spotlight">
<div class="spotlight-inner">
<div class="spotlight-image" style="background-image:url(http://placehold.it/750x421);"></div>
<!--/.spotlight-image-->
<div class="spotlight-content">
<h3 class="spotlight-heading">Title / Link of Goes Here</h3>
<p>lorem ipsum dolor sit amet, consec tetur adipis icing iz erat elit <a href="" class="trailingLink">Learn More</a></p>
<p><a class="btn">Optional CTA</a></p>
</div>
<!--/.spotlight-content-->
</div>
<!--/.spotlight-inner-->
</div>
<!--/.spotlight-->

<div class="section h-hard spotlight  spotlight--imgRight">
<div class="spotlight-inner">
<div class="spotlight-image" style="background-image:url(http://placehold.it/750x421);"></div>
<!--/.spotlight-image-->
<div class="spotlight-content">
<h3 class="spotlight-heading">Title / Link of Goes Here</h3>
<p>lorem ipsum dolor sit amet, consec tetur adipis icing iz erat elit <a href="" class="trailingLink">Learn More</a></p>
<p><a class="btn">Optional CTA</a></p>
</div>
<!--/.spotlight-content-->
</div>
<!--/.spotlight-inner-->
</div>
<!--/.spotlight-->

Tabs Module

The iAPPS Tabs module utilizes basic tabs placed within the structures necessary to create a standalone component that can be placed directly on the page through the iAPPS pagebuilder.

Background colors can be applied by applying one of the section modifier classes through the iAPPS interface:

• section--contrast = Accent or brand background color with appropriate color text
• section--contrastLight = Light accent or brand background color with appropriate color text
• section--contrastDark = Dark accent or brand background color with appropriate color text

• Please note that the code for iAPPS modules is presented primarily for developer reference. The code can be copied and pasted onto pages manually, but iAPPS functionality will not apply unless the module is placed on the page using iAPPS pagebuilder

<div class="section">
<div class="contained">
<ul class="tabs tabs--accordion">
<li><a href="javascript:void(0)">Tab one</a>
<div>
<p>Content for tab one.</p>
</div>
</li>
<li><a href="javascript:void(0)">Tab two</a>
<div>
<p>Content for tab two.</p>
</div>
</li>
<li><a href="javascript:void(0)">Tab three</a>
<div>
<p>Content for tab three.</p>
</div>
</li>
<li><a href="javascript:void(0)">Tab four</a>
<div>
<p>Content for tab four.</p>
</div>
</li>
</ul>
</div>
<!--/.contained-->
</div>
<!--/.section-->

Video Module

The iAPPS Video module is a general purpose, full-width video with text intended for use anywhere appropriate on content pages.

Background colors can be applied by applying one of the section modifier classes through the iAPPS interface:

• section--contrast = Accent or brand background color with appropriate color text
• section--contrastLight = Light accent or brand background color with appropriate color text
• section--contrastDark = Dark accent or brand background color with appropriate color text

• Please note that the code for iAPPS modules is presented primarily for developer reference. The code can be copied and pasted onto pages manually, but iAPPS functionality will not apply unless the module is placed on the page using iAPPS pagebuilder

<div class="section h-hard video">
<div class="video-embed">
<iframe width="420" height="315" src="//www.youtube.com/embed/0Bmhjf0rKe8" frameborder="0" allowfullscreen></iframe>
</div>
<!--/.video-embed-->
<div class="video-content">
<h3 class="video-heading">Title / Link of Goes Here</h3>
<p>lorem ipsum dolor sit amet, consec tetur adipis icing iz erat elit <a href="" class="trailingLink">Learn More</a></p>
<p><a class="btn">Optional CTA</a></p>
</div>
<!--/.video-content-->
</div>
<!--/.video-->

<div class="section h-hard video video--imgRight">
<div class="video-embed">
<iframe width="420" height="315" src="//www.youtube.com/embed/0Bmhjf0rKe8" frameborder="0" allowfullscreen></iframe>
</div>
<!--/.video-embed-->
<div class="video-content">
<h3 class="video-heading">Title / Link of Goes Here</h3>
<p>lorem ipsum dolor sit amet, consec tetur adipis icing iz erat elit <a href="" class="trailingLink">Learn More</a></p>
<p><a class="btn">Optional CTA</a></p>
</div>
<!--/.video-content-->
</div>
<!--/.video-->

Downloads

Page Title Sample Pattern Background (PSD)

This is the sample page title template for interior page title background images across the site. Height can be modified vertically, but the width has been optimized. It is suggested that if images with people or content are used to consider similar dimensions.

download

Homepage Sample Icon Design (PSD)

This is the sample image design for gradient-style icons on the homepage.

download

General Coding Notes

• When adding images to the site, do not include width and height in the HTML for the image. Use the appropriate image template provided and the CSS should scale the image automatically.
• iAPPS and this site are designed for you to have great flexibility in adding content such as copy and images. Adding new structural elements should be done by a front end developer familiar with responsive design best practices or the site layout may break.
• If you decide to add HTML elements such as tables, divs or spans, avoid using pixel based widths and use percentages if you must add widths. The site scales content in percentages as it expands and contracts so pixel widths will break the layout.
• As a general rule, after adding content, resize the browser from small to large widths and if possible, view on different devices to ensure added content does not break the layout of the site and looks attractive.
• Do not use Flash content on the site as many mobile devices do not support it.

Helper Classes

Helper classes are provided to accomodate one-off situations where additional CSS attributes need to be applied to an element for layout or presentation purposes.

• Helper classes always have CSS "!important" assigned to them so they act as trumps, overriding previous stying
• Helper classes are always preceded by "h-" and then camelCase

Font Color Helper Classes

<p class="h-colorDanger">..</p>

<p class="h-colorSuccess">..</p>

<p class="h-colorWarning">..</p>

<p class="h-colorWarning">..</p>

<p class="h-colorGrey">..</p>

<p class="h-colorGreyLight">..</p>

<p class="h-colorGreyLighter">..</p>

<p class="h-colorGreyLightest">..</p>

<p class="h-colorWhite">..</p>

<p class="h-colorBlack">..</p>

Background Color Helper Classes

<p class="h-fillColorBrandPrimary">..</p>

<p class="h-fillColorBrandPrimaryLight">..</p>

<p class="h-fillColorBrandPrimaryLighter">..</p>

<p class="h-fillColorBrandPrimaryLightest">..</p>

<p class="h-fillColorBrandPrimaryDark">..</p>

<p class="h-fillColorBrandPrimaryDarker">..</p>

<p class="h-fillColorBrandPrimaryDarkest">..</p>

<p class="h-fillColorBrandSecondary">..</p>

<p class="h-fillColorBrandSecondaryLight">..</p>

<p class="h-fillColorBrandSecondaryLighter">..</p>

<p class="h-fillColorBrandSecondaryLightest">..</p>

<p class="h-fillColorBrandSecondaryDark">..</p>

<p class="h-fillColorBrandSecondaryDarker">..</p>

<p class="h-fillColorBrandSecondaryDarkest">..</p>

<p class="h-fillColorAccent">..</p>

<p class="h-fillColorAccentLight">..</p>

<p class="h-fillColorAccentLighter">..</p>

<p class="h-fillColorAccentLightest">..</p>

<p class="h-fillColorAccentDark">..</p>

<p class="h-fillColorAccentDarker">..</p>

<p class="h-fillColorAccentDarkest">..</p>

<p class="h-fillColorGrey">..</p>

<p class="h-fillColorGreyLight">..</p>

<p class="h-fillColorGreyLighter">..</p>

<p class="h-fillColorGreyLightest">..</p>

<p class="h-fillColorGreyDark">..</p>

<p class="h-fillColorGreyDarker">..</p>

<p class="h-fillColorGreyDarkest">..</p>

<p class="h-fillColorBlack">..</p>

<p class="h-fillColorWhite">..</p>

<p class="h-fillColorHighlight">..</p>

<p class="h-fillColorDanger">..</p>

<p class="h-fillColorSuccess">..</p>

<p class="h-fillColorWarning">..</p>

<p class="h-fillColorInfo">..</p>

Font Face Helper Classes

<p class="h-fontHighlight">..</p>

<p class="h-fontBase">..</p>

Font Size Helper Classes

<p class="h-h1">..</p>

<p class="h-h2">..</p>

<p class="h-h3">..</p>

<p class="h-h4">..</p>

<p class="h-h5">..</p>

<p class="h-h6">..</p>

<p class="h-textXSm">..</p>

<p class="h-textSm">..</p>

<p class="h-textLg">..</p>

<p class="h-textXLg">..</p>

Alignment Helper Classes

<p class="h-textLeft">..</p>

<p class="h-textCenter">..</p>

<p class="h-textRight">..</p>

Margin Helper Classes

<p class="h-push">..</p>

<p class="h-pushTop">..</p>

<p class="h-pushRight">..</p>

<p class="h-pushBottom">..</p>

<p class="h-pushLeft">..</p>

<p class="h-pushEnds">..</p>

<p class="h-pushSides">..</p>

<p class="h-pushSm">..</p>

<p class="h-pushSmTop">..</p>

<p class="h-pushSmRight">..</p>

<p class="h-pushSmBottom">..</p>

<p class="h-pushSmLeft">..</p>

<p class="h-pushSmEnds">..</p>

<p class="h-pushSmSides">..</p>

<p class="h-pushLg">..</p>

<p class="h-pushLgTop">..</p>

<p class="h-pushLgRight">..</p>

<p class="h-pushLgBottom">..</p>

<p class="h-pushLgLeft">..</p>

<p class="h-pushLgEnds">..</p>

<p class="h-pushLgSides">..</p>

<p class="h-flush">..</p>

<p class="h-flushTop">..</p>

<p class="h-flushRight">..</p>

<p class="h-flushBottom">..</p>

<p class="h-flushLeft">..</p>

Padding Helper Classes

<p class="h-soft">..</p>

<p class="h-softTop">..</p>

<p class="h-softRight">..</p>

<p class="h-softBottom">..</p>

<p class="h-softLeft">..</p>

<p class="h-softEnds">..</p>

<p class="h-softSides">..</p>

<p class="h-softSm">..</p>

<p class="h-softSmTop">..</p>

<p class="h-softSmRight">..</p>

<p class="h-softSmBottom">..</p>

<p class="h-softSmLeft">..</p>

<p class="h-softSmEnds">..</p>

<p class="h-softSmSides">..</p>

<p class="h-softLg">..</p>

<p class="h-softLgTop">..</p>

<p class="h-softLgRight">..</p>

<p class="h-softLgBottom">..</p>

<p class="h-softLgLeft">..</p>

<p class="h-softLgEnds">..</p>

<p class="h-softLgSides">..</p>

<p class="h-hard">..</p>

<p class="h-hardTop">..</p>

<p class="h-hardRight">..</p>

<p class="h-hardBottom">..</p>

<p class="h-hardLeft">..</p>

Float Helper Classes

<p class="h-clearfix">..</p>

<p class="h-clearBoth">..</p>

<p class="h-clearRight">..</p>

<p class="h-clearLeft">..</p>

<p class="h-floatRight">..</p>

<p class="h-floatLeft">..</p>

<p class="h-floatNone">..</p>

Misc Helper Classes

<a class="h-disabled">..</p>

<a class="h-muted">..</p>

<a class="h-visuallyHidden">..</p>

<p class="h-underline">..</p>

<p class="h-overline">..</p>

<p class="h-strikethrough">..</p>

<p class="h-caps">..</p>

<div class="h-stacksToSidesSm">
<h4>First element</h4> <!--Can be <p>, <div>, <span>, etc.-->
<a class="btn">Second element</a> <!--Can be <p>, <div>, <span>, etc.-->
</div>

<div class="h-stacksToSidesMed">
<h4>First element</h4> <!--Can be <p>, <div>, <span>, etc.-->
<a class="btn">Second element</a> <!--Can be <p>, <div>, <span>, etc.-->
</div>

<div class="h-stacksToSidesLg">
<h4>First element</h4> <!--Can be <p>, <div>, <span>, etc.-->
<a class="btn">Second element</a> <!--Can be <p>, <div>, <span>, etc.-->
</div>

Naming Convention

This site uses a modified version of the BEM naming syntax. The modified version used is based largely on Nicolas Gallagher's extended BEM syntax. The intention is to make the styles more readable and understandable for humans.

Note though that class names composed of two or more words are written in camelCase as opposed to Gallagher's PascalCase.

/* Component */
.componentName {}

/* Component modifier */
.componentName--modifierName {}

/* Component descendant */
.componentName-descendant {}

/* Component descendant modifier */
.componentName-descendant--modifierName {}

/* Component state (scoped to component) */
.componentName.is-stateOfComponent {}

Begin class names with the most abstract descriptor and then layer in specifics.

/* Basic nav style */
.nav {}

/* The main nav of the site */
.navMain {}

/* The secondary nav of the site */
.navSecondary {}

/* The footer nav */
.navFooter {}

Class names should be reusable and descriptive. We use the multi-class pattern where by laying class names onto an element we can achieve many different and reusable styles.

.button { /* basic button styles */ }
.buttonPrimary { /* styles specific to primary button */ }

<button class="button">Default</button>
<button class="button buttonPrimary">Login</button>

Use .is-stateName to reflect changes to a component's state. The state name must be camel case. Never style these classes directly; they should always be used as an adjoining class.

This means that the same state names can be used in multiple contexts, but every component must define its own styles for the state (as they are scoped to the component).

.tweet { /* ... */ }
.tweet.is-expanded { /* ... */ }

<article class="tweet is-expanded">...</article>

Sass

SASS has been used in the building of this site for ease of maintenance, organization and best practices. The compiled CSS files themselves should not be edited directly or the benefits of using SASS on your site will be lost. Instead, a SASS compatible compiler such as Compass or Gulp should be used by a front end developer familiar with SASS and CSS compilers.

If additional non-SASS CSS must be added to the site, it is recommended that additional style sheets be created instead and included in the page.