Intro

This style guide is intended as a reference for content managers and developers to properly implement the styles, structures and methodlogy employed in the construction of the Camp Bow Wow Corporate & Franchise websites.

Components

These are the basic building blocks of your site

This category contains elements that are structured with standard HTML tags and also base abstractions such as grids, icons, etc.

Modules

These are the more complex structures w/ accompanying functionality built for your site.

This category contains elements composed of groups of components and/or custom structures that function together as a unit.

Coding & Content

For developers and content managers working with the code.

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

Palette

Brand

• Blue
• Green
• Red
• Tan

Monochrome

• Grey Lightest
• Grey Lighter
• Grey Light
• Grey
• Grey Dark
• Grey Darker

Messaging - alerts, confirmation, errors etc.

• Red
• Green
• Yellow

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.

Important stuff

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

Important stuff

<p class="alert alert--blue icon-asterisk">Important stuff<p>

Warning!

<p class="alert alert--red icon-attention">Warning!<p>

Warning!

<p class="alert alert--yellow icon-attention">Warning!<p>

Success!

<p class="alert alert--green icon-check">Success!<p>

Self-closing alerts

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

Success!

<p class="alert alert--green alert--closeable icon-check">Success!<p>

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>

Badges

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

Buttons

There are multiple styles of buttons used on the site with specific uses listed below.

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

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

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

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

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

There is also class to set the base hue to white for use on other colors. Example(s): T1.shtml

Text link

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

<h1>Heading 1 <a href="" class="btn btn--natural">...</a>

<a href="URL" class="btn btn--fontAccent">...</a>

<a href="URL" class="btn btn--highlight">...</a>

<a href="URL" class="btn btn--highlightLight">...</a>

Color Bars

Color bars are used to establish full-width color blocks. It can also be used to set backgrounds to content within the main area

Figures - Images

Examples

Full width image

<figure>
<img src="900x200.png">
<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="200x200.png">
<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="200x200.png">
<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 width="420" height="315" src="//www.youtube.com/embed/0Bmhjf0rKe8" frameborder="0" allowfullscreen></iframe>
</figure>

<div class="mediaBlock">
<figure class="figure--video">
<iframe src="//www.youtube.com/embed/0Bmhjf0rKe8" frameborder="0" 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--right">
<figure class="figure--video">
<iframe src="//www.youtube.com/embed/0Bmhjf0rKe8" frameborder="0" 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 grid.

You can adjust column width across various screen widths:

• xsm - Small smartphones
• sm - Larger smartphones and small tablets
• med - Tablets and small desktop monitors
• lg - Large tablets and desktop monitors
• xlg - Desktop monitors and smartTVs
• xxlg - Large desktop monitors and smartTVs

The grid is mobile-first so think of each "column" as naturally being 100% wide and you will be adjusting that width as the screen gets larger.

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.

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

When a column width is set, it will also apply to larger screen sizes.

Remember that you are adjusting widths as the screen gets larger. A column with med-12 applied, will take up 12 columns on medium and large screens also. You can add classes to adjust this as demonstrated below.

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

Mimicking source order change

Generally, columns will stack top to bottom at their natural 100% width and float left to right once we apply a column width.

<div clas="row">
<div class="column med-12">First in source order</div>
<div class="column med-12">Second in source order</div>
<div>

Once a column width is applied, we can modify this behavior using the following styles (columns still stack top to bottom at 100%):

• push-right-sm
• push-right-med
• push-right-lg
• push-right-xlg
• push-right-xxlg

<div clas="row">
<div class="column med-12 push-right-med">First in source order</div>
<div class="column med-12">Second in source order</div>
<div>

Headings & Paragraphs

<h1>Heading 1</h1>

<h2>Heading 2</h2>

<h3>Heading 3</h3>

<h4>Heading 4</h4>

<h5>Heading 5</h5>

<h4>Heading 4</h4>

There are several variant classes which can be applied to headers to adjust font, size and color

<h1 class="heading--light">Heading Light - #517286</h1>

<h1 class="fontAccent">Heading 1 - Pompiere</h4>

Since H1 and H2 default to uppercase, we can make the same heading lowercase, by adding a helper class.

<h1 class="fontAccent heading--lower">Heading 1 - Pompiere Lowercase</h4>

Conversely, H3, H4, H5 and H6 are lowercase by default. We can make it uppercase using a similar method

<h3 class="heading--upper">Heading 3 - Uppercase</h3>

<p>...</p>

Horizontal Rule

<hr />

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

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

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="javascript:void(0)" class="icon-right-open">Text Link<a>

<a href="javascript:void(0)">Text Link <i class="icon-right-open"></i></a>

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

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

Available icons/classes

Brand Icons

Social Icons

Utility Icons

Islands/Islets

Adds spacing of content with optional color styles

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

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

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

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

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

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

Islets have half the padding an island has

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

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

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

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

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

Lists

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

<ul class="list--unstyled">
<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--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>

Requires "list--unstyled" as a base class

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

Loader

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

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

Matrix

Matrix extends all of the functionality of the 24 column responsive grid with two important exceptions:

1. Column count in each .matrix div can exceed 24
2. Whereas items of different heights can staircase in the grid, they will not in the matrix

The matrix is very useful for patterns like a page of gallery thumbnails, e-commerce products, etc.

Usage is exactly the same as the 24 column responsive grid except for the use of the matrix class instead of the row class

<div class="matrix">
<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>

Secondary Navigation

CBW is using a dropdown to nav pattern for secondary navigation, meaning the menu links will appear as a expandable dropdown on mobile, and transition to an expanded list on desktop.

Note that this menu pattern only supports one level of navigation links. The current page inherits a class of "selected" and becomes the inline-category within the menu dropdown, with the sibling pages collapsing beneath it. It will change dynamically based on the selected/current page and the sibling categories are able to be navigated once expanded.

<nav class="navSecondary nav-dropdownToNav">
<ul>
<li><a href="">Page link</a></li>
<li class="selected"><a href="">Selected Page Link</a></li>
<li><a href="">Page link</a></li>
<li><a href="">Page link</a></li>
<li><a href="">Page link</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

• Tables should be placed within a div with the class of "tableContainer" applied for responsive sizing and format. By default, tables which are horizontally wider than the viewport on smaller devices will scroll horizontally.
• Classes of "table--striped", "table--bordered" and "table--data" can be added to tables for visual enhancement and usability. It is recommended that you utilize these styles as tables should only be used on the site for tabular data.
• Pixel widths should never be applied to tables as this may break the responsive layout of the page.

<div class="tableContainer">
<table class="table">
<thead>
<tr>
<th>Sample Header</th>
<th>Sample Header 2</th>
<th>Sample Header 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row 1, Col 1</td>
<td>Row 1, Col 2</td>
<td>Row 1, Col 3</td>
</tr>
<tr>
<td>Row 2, Col 1</td>
<td>Row 2, Col 2</td>
<td>Row 2, Col 3</td>
</tr>
</tbody>
</table>
</div>

Tables are setup to use colspans for adjusting cells widths and spanning across multiple columns. There are also color variations availavle to establish content hierarchy when using multiple table headers in complex tables.

<div class="tableContainer">
<table class="table">
<thead class="thead--red">
<tr>
<th colspan="2">Full Span Header Across 2 Col in Complex Table, Red</th>
</tr>
</thead>
<thead class="thead--lighter">
<tr>
<th>Sample Subheader Light</th>
<th>Sample Subheader Light</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row 1, Col 1</td>
<td>Row 1, Col 2</td>
<td>Row 1, Col 3</td>
</tr>
<tr>
<td>Row 2, Col 1</td>
<td>Row 2, Col 2</td>
<td>Row 2, Col 3</td>
</tr>
<tr>
<td>Row 3, Col 1</td>
<td>Row 3, Col 2</td>
<td>Row 3, Col 3</td>
</tr>
<thead class="thead--darker">
<tr>
<th colspan="2">Full Span Header Across 2 Col in Complex Table, Darker</th>
</tr>
</thead>
<thead class="thead--lighter">
<tr>
<th>Sample Subheader Light in Table</th>
<th>Sample Subheader Light in Table</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row 4, Col 1</td>
<td>Row 4, Col 2</td>
<td>Row 4, Col 3</td>
</tr>
<tr>
<td>Row 5, Col 1</td>
<td>Row 5, Col 2</td>
<td>Row 5, Col 3</td>
</tr>
<tr>
<td>Row 6, Col 1</td>
<td>Row 6, Col 2</td>
<td>Row 6, Col 3</td>
</tr>
<thead>
<tr>
</tbody>
</table>
</div>

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 1 on click</a>
<div class="toggleLinkTarget is-hidden">Hidden content 1</div>

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

Flyouts

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

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

Image Bar Banner

Image bar banners are similar to page banners, but caculate and size the image to fill the available space of its' container instead of simply swapping images. The calculations are based on the viewport width of the browser and/or device. They can be used on templates as fullbleed or held within the main content column. The default image bar banner copy block aligns right and has an opaque green background.

Please note: to use image bars on a template page, it must be ensured the correct script code is also be injected. This should be handled within iApps.

<div class="imageBar">
<div class="imageBar-imageContainer" data-stretchsm="URL" data-stretchlg="URL"></div>
<div class="imageBar-colorBlock">
<div class="imageBar-colorBlock-copy">
<h3>Example Header Lorem Ipsum</h3>
<p>Lorem ipsum dolor sit amet consectetur adipiscing ilicit. Adipic tetur adpisic smod tempor alor.</p>
<a href="" class="btn btn--featured btn--featured--lt h-fontHighlightLight">Learn More</a>
</div>
</div>
</div>

Each image bar banner requires two image sizes across responsive design.

If the image bar banner is included within the main content (ex: T15) it requires small and medium sized images:

• imageBanner-sm.psd
• imageBanner-med.psd

If the image bar banner is fullbleed (ex: T14) , it requires small and large sized images:

• imageBanner-sm.psd
• imageBanner-lg.psd

<div class="imageBar">
<div class="imageBar-imageContainer" data-stretchsm="URL" data-stretchlg="URL"></div>
<div class="imageBar-colorBlock imageBar-colorBlock--left">
<div class="imageBar-colorBlock-copy">
<h3>Example Header Lorem Ipsum</h3>
<p>Lorem ipsum dolor sit amet consectetur adipiscing ilicit. Adipic tetur adpisic smod tempor alor.</p>
<a href="" class="btn btn--featured btn--featured--lt h-fontHighlightLight">Learn More</a>
</div>
</div>
</div>

Similar to page banners, image bar banners includes several color variations setup within the code. These are controlled by applying helper classes.

• .imageBar-colorBlock--blue
• .imageBar-colorBlock--red
• .imageBar-colorBlock--tan

<div class="imageBar">
<div class="imageBar-imageContainer" data-stretchsm="URL" data-stretchlg="URL"></div>
<div class="imageBar-colorBlock imageBar-colorBlock--blue">
<div class="imageBar-colorBlock-copy">
<h3>Example Header Lorem Ipsum</h3>
<p>Lorem ipsum dolor sit amet consectetur adipiscing ilicit. Adipic tetur adpisic smod tempor alor.</p>
<a href="" class="btn btn--featured btn--featured--lt h-fontHighlightLight">Learn More</a>
</div>
</div>
</div>

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

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">
<figure><img src="200x200.png"></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--right">
<figure><img src="200x200.png"></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

<div class="pagination">
  <div class="pageNumbers">
    <a class="prev inactive"><a href="#"></a>
    <span class="current">1</span>
    <a><a href="#">2</a>
    <a><a href="#">3</a>
    <a><a href="#">4</a>
    <a><a href="#">5</a>
    <a class="next"><a href="#"></a>
  </div>
</div>

Page Banners

Interior templates have a feature page banner including the current category title. You have several color pattern variations as well as the option for background images. The default page banner includes the blue pattern background.

<div class="bannerMain bannerMain-interior">
<div class="bannerMain-container">
<div class="bannerMain-interior--title"><h1>About Us</h1></div>
</div>
</div>

The pattern includes several color variations setup within the code, controlled by applying helper classes.

• .bannerMain--blueDrk
• .bannerMain--tan
• .bannerMain--tan--HB includes HB logo
• .bannerMain--green includes HB logo
• .bannerMain--red

<div class="bannerMain bannerMain-interior bannerMain--green">
<div class="bannerMain-container">
<div class="bannerMain-interior--title"><h1>About Us</h1></div>
</div>
</div>

You can also set a background image for your page banner. Please select the proper page banner control within iApps to include a background image for mobile, tablet and desktop. This banner requires three image sizes across responsive design.

• 1022px - pagebanner_xlg.psd
• 731px - pagebanner_lg.psd
• 1px - pagebanner_sm.psd

About Us

<div class="bannerMain bannerMain-interior">
<div class="bannerMain-container">
<div class="bannerMain-bannerFeature">
<div class="bannerMain-bannerFeatureImg"><picture>
  ...source of three image sizes goes here, as inserted from iApps...</picture>
</div>
</div>
</div>
</div>

Some banners require additional copy beyond merely a page title, such as the Metro Landing page. This banner includes variant divs to include an extended CTA.

Metro Denver

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

<div class="bannerMain bannerMain-generic">
<div class="bannerMain-container">
<div class="bannerMain-bannerFeature">
 <div class="bannerMain-bannerFeatureImg"><picture>
  ...source of three image sizes goes here, as inserted from iApps...</picture>
 </div>
</div>
<div class="bannerMain-CTA">
<div class="row">
<div class="column med-12">
<h1>Banner Title</h1><p>Short intro goes here. Lorem ipsum dolor sit amet consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
</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/200x200.png" 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>

Siderail Callouts

There are a number of siderail callout variations that can be used to feature different content within the site's right rail on desktop. On mobile and tablet, these callouts collapse below the main content.

The HTML snippets below reflect the interior structure for the siderail content. iApps will wrap each individual callout with an encompassing div which will set it's responsive grid structure relative to it's appropriate template. To understand how your site grid works, please see section: Grid

Generic Siderail Callout

Lorem ipsum dolor sit amet, consectetur adipisicing elit nullam ac maruis quisque. Inline link example.

Example Button

<div class="islet islet--tan h-hardEnds">
<div class="ornament icon-paw">
<h5 class="h-pushSmBottom">Generic Siderail Callout</h5>
<p class="h-lineHeightXSm">Lorem ipsum dolor sit amet, consectetur adipisicing elit nullam ac maruis quisque. <a href="URL">Inline link example</a>.</p>
<a class="btn" href="URL">Example Button</a>
</div>
</div>

Template Example(s): T10

This is the most flexible callout. You can include images, buttons, links, text fields, etc. within the content area. Using helper classes outlined within this styleguide, you can change the background color, text color and featured icon to achieve visual variations.

Example Variation: Full-Click Siderail Callout, Red with Icon Alt

This entire block is a link and clicks through. This can be used to link full blocks of content versus having an inline link or button. Remember to use helper classes to adjust font colors for legibility.

<div class="islet islet--red h-hardEnds">
<div class="ornament ornament--invert icon-heart">
<h5 class="h-colorWhite h-pushSmBottom">Example Variation: Full-Click Siderail Callout, Red with Icon Alt</h5>
<p class="h-colorWhite h-lineHeightXSm">This entire block is a link and clicks through. This can be used to link full blocks of content versus having an inline link or button. Remember to use helper classes to adjust font colors for legibility.</p>
</div>
</div>

Template Example(s): T9

Featured Image Callout with Ornament Rule

---

Callout for when the image is the main focus. Lorem ipsum dolor sit amet consectetur adipisicing iz erat set do euiu somongn tempor.

<img class="h-pushBottom" src="URL" />
<h4 class="h-pushSmBottom heading--light">Featured Image Callout with Ornament Rule</h4>
<hr class="h-pushSmBottom rule--ornament h-colorHeadingLight">/>
<p class="h-pushSmBottom">Callout for when the image is the main focus. Lorem ipsum dolor sit amet consectetur adipisicing iz erat set do euiu somongn tempor</p>
<p class="h-sizeXXLg">
<a href="URL"><i class="icon-android h-pushSmRight"></i></a>
<a href="URL"><i class="icon-apply"></i></a>
</p>

Template Example(s): T15

Sign Up for Our Newsletter

Lorem ipsum dolor sit amet, consectetur adipisicing elit nullam ac maruis quisque.

Newsletter Sign Up

<div class="islet islet--tan h-hardEnds">
<div class="ornament icon-email">
<h5 class="h-colorRedBrand h-pushSmBottom">Sign Up for Our Newsletter</h5>
<p class="h-lineHeightXSm">Lorem ipsum dolor sit amet, consectetur adipisicing elit nullam ac maruis quisque.</p>
<div class="insetButtonField h-pushBottom">
<label>Newsletter Sign up</label>
<input type="text" placeholder="Email Address" name="newsletterSignup" id="newsletterSignup"/>
<input type="submit" value="fetch" class="btn btn--tertiary"/>
</div>
</div>
</div>
    

Template Example(s): T7, T8, T15

Sign Up for Our Newsletter

Lorem ipsum dolor sit amet, consectetur adipisicing elit nullam ac maruis quisque.

Newsletter Sign Up

<div class="islet islet--red h-hardEnds">
<div class="ornament ornament--invert icon-email">
<h5 class="h-colorWhite h-pushSmBottom">Sign Up for Our Newsletter</h5>
<p class="h-colorWhite h-lineHeightXSm">Lorem ipsum dolor sit amet, consectetur adipisicing elit nullam ac maruis quisque.</p>
<div class="insetButtonField h-pushBottom">
<label>Newsletter Sign up</label>
<input type="text" placeholder="Email Address" name="newsletterSignup" id="newsletterSignup"/>
<input type="submit" value="fetch" class="btn btn--tertiary"/>
</div>
</div>
</div>
    

Template Example(s): T16

Are You a New Customer?

If you are a new customer and are interested in bringing your dog to Camp, please Request an Interview

Request Interview

<div class="island island--greyLighter island--pullLast">
<h5 class="heading--upper h-textCenter">Are You a New Customer?</h5>
<img class="h-pushSmBottom" src="URL"/>
<p>If you are a new customer and are interested in bringing your dog to Camp, please <a href="URL">Request an Interview</a></p>
<p class="h-textCenter"><a class="btn btn--full btn--lg h-fontHighlightLight" href="URL">Request Interview</a></p>
</div>
    

Template Example(s): T5, T10, T11

Upcoming Events

Event Name Here

Bark & Play Bar & Grill
June 20, 2015

July 10

Event Name Here

Camp Bow Wow Location

Aug 2

Event Name Here

Camp Bow Wow Location

View all events

<div class="islet islet--greyLighter islet--pullLast">
<h5 class="heading--upper h-textCenter">Upcoming Events</h5>
<img class="h-pushSmBottom" src="URL"/>
<a class="h-flush h-lineHeightXSm" href="URL">Event Name Here</a>
<p class="h-sizeSm h-underline--dashed h-lineHeightXSm">Bark & Play Bar & Grill</br>
June 20, 2015</p>
<div class="mediaBlock h-underline--dashed h-pushBottom">
<figure class="mediaBlock-figure eventCalendar">
<span class="eventCalendar-month">Aug</span>
<span class="eventCalendar-day">2</span>
</figure>
<div class="mediaBlock-body">
<a class="h-flush h-lineHeightXSm" href="URL">Event Name Here</a>
<p class="h-sizeSm h-lineHeightXSm">Camp Bow Wow Location</p>
</div>
</div>
<p class="h-textCenter"><a class="btn btn--full btn--long h-fontHighlightLight" href="URL">View all events</a></p>
</div>
    

Template Example(s): T15

Camp Bow Wow Hicksville

1234 Main Street
New York, NY 11234
212.123.4567

Mon

7am - 12pm

4am - 7pm

Tue

7am - 7pm

Wed

7am - 7pm

Thu

7am - 7pm

Fri

7am - 7pm

Sat

7am - 7pm

Sun

7am - 7pm

Holidays

4pm - 7pm

New? Schedule Interview

Make Reservation

<div class="island island--tan h-hardEnds">
<div class="ornamnet icon-location">
<h5 class="h-colorRedBrand h-pushSmBottom">Camp Bow Wow Hicksville</h5>
<p class="h-lineHeightXSm">1234 Main Street</br>
New York, NY 11234</br>
212.123.4567</p>
<dl>
<dt>Mon</dt>
<dd>7am - 12pm</dd>
<dd class="multiLine">4PM - 7PM</dd>
<dd class="newLine"></dd>
<dt>Tues</dt>
<dd>7am - 7pm</dd>
<dd class="newLine"></dd>
<dt>Wed</dt>
<dd>7am - 7pm</dd>
<dd class="newLine"></dd>
<dt>Thurs</dt>
<dd>7am - 7pm</dd>
<dd class="newLine"></dd>
<dt>Fri</dt>
<dd>7am - 7pm</dd>
<dd class="newLine"></dd>
<dt>Sat</dt>
<dd>7am - 7pm</dd>
<dd class="newLine"></dd>
<dt>Sun</dt>
<dd>7am - 7pm</dd>
<dd class="newLine"></dd>
<dt>Holidays</dt>
<dd>4pm - 7pm</dd>
<dd class="newLine"></dd>
</dl>
<p><a class="btn btn--full btn--tertiary" href="URL">New? Schedule Interview</a></p>
<p><a class="btn btn--full btn--tertiary" href="URL">Make Reservation</a></p>
</div>
</div>
    

Template Example(s): T5, T9, T10, T11, T16, T17, T24

Our Services

• Dog Daycare
• Dog Boarding
• Dog Grooming
• Dog Training
• In-Home Pet Care
• Dog Walking
• Poop Scooping

<div class="islet islet--red h-hardEnds">
<div class="ornament ornamnet--invert">
<h5 class="h-pushSmBottom h-colorWhite">Our Services</h5>
<ul class="list--unstyled list--bordered list--bordered--red">
<li><a class="h-colorWhite" href="URL">Dog Daycare <i class"icon-right-open h-floatRight"></i></a></li>
<li><a class="h-colorWhite" href="URL">Dog Boarding <i class"icon-right-open h-floatRight"></i></a></li>
<li><a class="h-colorWhite" href="URL">Dog Grooming <i class"icon-right-open h-floatRight"></i></a></li>
<li><a class="h-colorWhite" href="URL">Dog Training <i class"icon-right-open h-floatRight"></i></a></li>
<li><a class="h-colorWhite" href="URL">In-Home Pet Care <i class"icon-right-open h-floatRight"></i></a></li>
<li><a class="h-colorWhite" href="URL">Dog Walking <i class"icon-right-open h-floatRight"></i></a></li>
<li><a class="h-colorWhite" href="URL">Poop Scooping <i class"icon-right-open h-floatRight"></i></a></li>
</ul>
</div>
</div>
    

Template Example(s): T17, T24

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>

Downloads

Site Image Templates (PSD)

CBW - web pattern

This is the template for the default repeating web pattern used within page banners. This template includes blue, red, green and tan pattern variations.

Blue - Dark

Blue - Light

Red

Tan

Tan (HB)

Green (HB)

CBW - print icons altered for web

CBW print icons adjusted for the web.

download

CBW - custom web icons

Custom web icons.

download

CBW - contact web icons

Contact web icons, seen within the footer.

download

CBW - award/testimonial badge

This template is for creating variations of the award/trophy badge, as seen within the awards & testimonials carousel.

download

Image Bar Banners

These are the templates for creating responsive images for image bar banners. Each image bar banner requires two image sizes.

Fullbleed banners require small and large templates (example:T14); contained banners require small and medium templates (example:T15).

download - small

download - medium

download - large

Interior Page Banner

These are the templates for creating responsive images for interior page banners. Each interior page banner requires three image sizes: small, large & extra-large.

download - small

download - large

download - extra-large

Corporate Homepage Banner

These are the templates for creating responsive images for corporate homepage banners. Each corporate homepage banner requires four image sizes: small, medium, large & extra-large.

download - small

download - medium

download - large

download - extra-large

Franchise Homepage Banner

These are the templates for creating responsive images for franchise homepage banners. Each franchise homepage banner requires four image sizes: small, medium, large & extra-large.

download - small

download - medium

download - large

download - extra-large

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.

Font-color Helper Classes

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

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

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

<p class="h-colorYellow">..</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>

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-sizeXSm">..</p>

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

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

<p class="h-sizeXLg">..</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>

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

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 (base.css, responsive.css and lateIE.css) 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 Scout 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.