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 [site name] 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

Neutrals

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

Presets

• Highlight
• Danger
• Warning
• Success
• Info

Express Pros/Express Health Primary

• Light Blue
• Medium Blue
• Deep Blue

Express Pros/Express Health Secondary

• Grey
• Green
• Purple
• Orange
• Red
• Yellow

Specialized Recruiting Group

• Teal
• Blue

Express Pros Gradients

Typography

Accordion

Vertically expanding areas of content.

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

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

Asides

Badges

Bug

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

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--inverted">...</a>
<input name="" type="button" value="input" class="btn btn--inverted">
        
    

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

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

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

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

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

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

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

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

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

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

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

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

        <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

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.

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.

Figures - Videos

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

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

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.

Islands/Islets

A generic box with padding on all sides

Islets have half the padding an island has

Lists

Loader

Quotes

Inline quotes

Blockquotes

Secondary Navigation

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

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

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 Unbound editor and likely break it.

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.

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

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"

Tags

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.

Flyouts

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.

Free-Form Text & Sections/Contained

The site is designed to incorporate full-width capabilities. When using free-form text, sections are used to add spacing and an inner div container sets the content to the max-width of the website. If section and contained are not used, the content will be full-width of the browser, being wider than the site's main content.

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

Right align image

Media header

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

Learn more

Pagination

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

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

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

Tabs

Accordion Module

The Unbound 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 Unbound pagebuilder.

Background colors can be applied by applying one of the section modifier classes through the Unbound 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 Unbound modules is presented primarily for developer reference. The code can be copied and pasted onto pages manually, but Unbound functionality will not apply unless the module is placed on the page using Unbound pagebuilder

Banner Module

The Unbound 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 Unbound 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 Unbound 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 Unbound modules is presented primarily for developer reference. The code can be copied and pasted onto pages manually, but Unbound functionality will not apply unless the module is placed on the page using Unbound pagebuilder

Content Slider Module

The Unbound 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 Unbound 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 Unbound modules is presented primarily for developer reference. The code can be copied and pasted onto pages manually, but Unbound functionality will not apply unless the module is placed on the page using Unbound 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 Unbound 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 Unbound 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 Unbound modules is presented primarily for developer reference. The code can be copied and pasted onto pages manually, but Unbound functionality will not apply unless the module is placed on the page using Unbound pagebuilder

Two Across

Optional Heading

Three Across

Optional Heading

Four Across

Optional Heading

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

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

Gallery Module

The Unbound 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 Unbound 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 Unbound modules is presented primarily for developer reference. The code can be copied and pasted onto pages manually, but Unbound functionality will not apply unless the module is placed on the page using Unbound pagebuilder

Grid Layout

Slider Layout

Location Module

The Unbound 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 Unbound 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 Unbound modules is presented primarily for developer reference. The code can be copied and pasted onto pages manually, but Unbound functionality will not apply unless the module is placed on the page using Unbound pagebuilder

Main Slider Module

The Unbound 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 Unbound 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 Unbound modules is presented primarily for developer reference. The code can be copied and pasted onto pages manually, but Unbound functionality will not apply unless the module is placed on the page using Unbound 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 Unbound 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 Unbound 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 Unbound 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 Unbound modules is presented primarily for developer reference. The code can be copied and pasted onto pages manually, but Unbound functionality will not apply unless the module is placed on the page using Unbound pagebuilder

Social Feed Module

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

• Please note that the code for Unbound modules is presented primarily for developer reference. The code can be copied and pasted onto pages manually, but Unbound functionality will not apply unless the module is placed on the page using Unbound 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

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

Social Share Module

The Unbound 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 Unbound 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 Unbound modules is presented primarily for developer reference. The code can be copied and pasted onto pages manually, but Unbound functionality will not apply unless the module is placed on the page using Unbound pagebuilder

Spotlight Module

The Unbound 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 Unbound 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 Unbound modules is presented primarily for developer reference. The code can be copied and pasted onto pages manually, but Unbound functionality will not apply unless the module is placed on the page using Unbound pagebuilder

Tabs Module

The Unbound 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 Unbound pagebuilder.

Background colors can be applied by applying one of the section modifier classes through the Unbound 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 Unbound modules is presented primarily for developer reference. The code can be copied and pasted onto pages manually, but Unbound functionality will not apply unless the module is placed on the page using Unbound pagebuilder

Video Module

The Unbound 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 Unbound 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 Unbound modules is presented primarily for developer reference. The code can be copied and pasted onto pages manually, but Unbound functionality will not apply unless the module is placed on the page using Unbound pagebuilder

Downloads

Site Image Templates (PSD)

General Callout Image

This is the template for the default images used for callouts across the site. Height can be modified vertically, but the width has been optimized for most uses.

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