Style Guide

This site is based on the Bootstrap 2.3.2 Framework. In addition to the styling set forth below you may also reference standard Bootstrap styles here, http://getbootstrap.com/2.3.2/base-css.html.


This is an H1 Header

This is the area in which you will provide the actual text for your Web site. Until we enter the production phase of your Web site, we will use this example paragraph. This paragraph is only added to give you an idea of how the text will flow in conjunction with the design of your Web site. It is intended for testing purposes only and is not reflective of the actual text that will be provided for this area once your Web site is completed. This is a link…

Full-Width Page Automation

To make any page full-width select "Make Page Full-Width" from the CMS' "Styles" dropdown (with any page element selected) or add the class "makeFullWidthPage" to any element within the CMS.

This text is being pulled from this image's alt tag. It does not matter how long it is the text will wrap.This is an H2 Header

This image has style "Photo Float Right with Caption" & its link (anchor tag) has style "Open Link in Lightbox" »

This is the area in which you will provide the actual text for your Web site. Until we enter the production phase of your Web site, we will use this example paragraph. This paragraph is only added to give you an idea of how the text will flow in conjunction with the design of your Web site. It is intended for testing purposes only and is not reflective of the actual text that will be provided for this area once your Web site is completed.

This is a link in a new paragraph »

This is an H3 Header

This is the area in which you will provide the actual text for your Web site. Until we enter the production phase of your Web site, we will use this example paragraph. This paragraph is only added to give you an idea of how the text will flow in conjunction with the design of your Web site. It is intended for testing purposes only and is not reflective of the actual text that will be provided for this area once your Web site is completed.

This is an H4 Header

The above image has style "Grayscale Photo" & its link (anchor tag) has style "Open Link in Lightbox". This is the area in which you will provide the actual text for your Web site. Until we enter the production phase of your Web site, we will use this example paragraph. This paragraph is only added to give you an idea of how the text will flow in conjunction with the design of your Web site. It is intended for testing purposes only and is not reflective of the actual text that will be provided for this area once your Web site is completed.

This is an H5 Header

This is the area in which you will provide the actual text for your Web site. Until we enter the production phase of your Web site, we will use this example paragraph. This paragraph is only added to give you an idea of how the text will flow in conjunction with the design of your Web site. It is intended for testing purposes only and is not reflective of the actual text that will be provided for this area once your Web site is completed.

This text is being pulled from this image's alt tag. This is an H6 Header

« This image has style "Photo Float Left with Caption"

This is the area in which you will provide the actual text for your Web site. Until we enter the production phase of your Web site, we will use this example paragraph. This paragraph is only added to give you an idea of how the text will flow in conjunction with the design of your Web site. It is intended for testing purposes only and is not reflective of the actual text that will be provided for this area once your Web site is completed.

Buttons

Button Button Primary Button Info Button Warning Button Danger Button SuccessButton Inverse

Large Button

Button

Immediately above are some links with the style "Button", "Button Primary", "Button Info", "Button Danger", and "Button Success" respectively. This is the area in which you will provide the actual text for your Web site. Until we enter the production phase of your Web site, we will use this example paragraph. This paragraph is only added to give you an idea of how the text will flow.


Below is a Responsive Embedded Video

Embedded videos MUST be wrapped like this, <div class="video-container">[VIDEO EMBED CODE HERE]</div>, in order to perform responsively.

This is an unordered list
  • This is a list item
    • This is a sublist item
    • This is a sublist item
    • This is a sublist item
  • This is a list item. This is the area in which you will provide the actual text for your Web site. This is the area in which you will provide the actual text for your Web site.
  • This is a list item that's a link
This is an unordered list with style "Check List"
  • This is a list item. This is the area in which you will provide the actual text for your Web site. This is the area in which you will provide the actual text for your Web site.
  • This is a list item that's a link
  • This is a list item
    • This is a sublist item
    • This is a sublist item
This is an unordered list with style "Arrow List"
(It is meant to be used for a list of links)
This is an unordered list with style "Un-Bulleted List"
  • This is a list item. This is the area in which you will provide the actual text for your Web site. This is the area in which you will provide the actual text for your Web site.
  • This is a list item that's a link
  • This is a list item
    • This is a sublist item
    • This is a sublist item
This is an ordered list
  1. This is a list item.This is the area in which you will provide the actual text for your Web site. This is the area in which you will provide the actual text for your Web site.
  2. This is a list item that's a link
    • This is a sublist item
    • This is a sublist item
    • This is a sublist item
  3. This is a list item
This is a table with style "Basic Table"
Heading1Heading2Heading3Heading4
Data CellData CellReally Really Really Really Long Data CellData Cell
Data CellLonger Data CellData CellData Cell
Data CellData CellData CellData Cell
Below is a table with style "Striped Table"
Heading1Heading2Heading3Heading4
Data CellData CellReally Really Really Really Long Data CellData Cell
Data CellLonger Data CellData CellData Cell
Data CellReally Really Really Really Long Data CellData CellData Cell
Data CellData CellData CellData Cell
Really Really Really Really Long Data CellLonger Data CellData CellData Cell
Data CellReally Really Really Really Long Data CellData CellData Cell
Data CellData CellData CellData Cell
Below is a responsive table with style "Striped Table" wrapped in a div of class "flip-scroll" (<div class="flip-scroll">table</div>). The result is a table that scrolls horizontally one column at a time on small screen devices. This is useful for displaying large numeric tables on mobile devices.
Heading1Heading2Heading3Heading4
Data CellData CellReally Really Really Really Long Data CellData Cell
Data CellLonger Data CellData CellData Cell
Data CellReally Really Really Really Long Data CellData CellData Cell
Data CellData CellData CellData Cell
Really Really Really Really Long Data CellLonger Data CellData CellData Cell
Data CellReally Really Really Really Long Data CellData CellData Cell
Data CellData CellData CellData Cell
Below is a responsive table that can used for multi-column text-based layouts.

The table below has the style "Responsive Collapsing Table". This style forces the table's columns to collapse into a single column when viewed at mobile size. Note, images incorporated into the columns of this table will arrest the column's ability to shrink beyond the width of the images.

This is column 1

This is the area in which you will provide the actual text for your Web site. Until we enter the production phase of your Web site, we will use this example paragraph. This paragraph is only added to give you an idea of how the text will flow in conjunction with the design of your Web site. It is intended for testing purposes only and is not reflective of the actual text that will be provided for this area once your Web site is completed.

This is column 2

This is the area in which you will provide the actual text for your Web site. Until we enter the production phase of your Web site, we will use this example paragraph. This paragraph is only added to give you an idea of how the text will flow in conjunction with the design of your Web site. It is intended for testing purposes only and is not reflective of the actual text that will be provided for this area once your Web site is completed.

This is column 3

This is the area in which you will provide the actual text for your Web site. Until we enter the production phase of your Web site, we will use this example paragraph. This paragraph is only added to give you an idea of how the text will flow in conjunction with the design of your Web site. It is intended for testing purposes only and is not reflective of the actual text that will be provided for this area once your Web site is completed.


Above this paragraph is a horizontal rule (html <hr /> tag). This is the area in which you will provide the actual text for your Web site. Until we enter the production phase of your Web site, we will use this example paragraph. This paragraph is only added to give you an idea of how the text will flow in conjunction with the design of your Web site. It is intended for testing purposes only and is not reflective of the actual text that will be provided for this area once your Web site is completed.

*This paragraph has style "disclaimer". It can be used anywhere on the page for disclaimers. sit amet, consectetur adipiscing elit. Vestibulum ac enim nec felis mollis lacinia non convallis nisl. Vestibulum sed urna nec orci ullamcorper ullamcorper ultrices non nisl. Aenean pretium enim mattis massa tincidunt gravida faucibus purus tempor. Nullam eu magna in neque ultricies aliquet vitae non quam.


Styles to Show/Hide Content

There is a bolded line of text below this that has style "Only Visible on Phones". It will only display at mobile-sized resolutions.

*This sentence will ONLY display when this page is viewed at a mobile-sized resolution.

There is a bolded line of text below this that has style "Hidden on Phones". It will only display at mobile-sized resolutions.

*This sentence will NOT display when this page is viewed at a mobile-sized resolution.

There is a bolded line of text below this that has style "Do Not Print". It will not display when this page is printed.

*This sentence will NOT display when this page is printed.

 


SAMPLE LAYOUT - Two column responsive layout

This is column 1

This is the area in which you will provide the actual text for your Web site. Until we enter the production phase of your Web site, we will use this example paragraph. This paragraph is only added to give you an idea of how the text will flow in conjunction with the design of your Web site. It is intended for testing purposes only and is not reflective of the actual text that will be provided for this area once your Web site is completed.

This is column 2

This is the area in which you will provide the actual text for your Web site. Until we enter the production phase of your Web site, we will use this example paragraph. This paragraph is only added to give you an idea of how the text will flow in conjunction with the design of your Web site. It is intended for testing purposes only and is not reflective of the actual text that will be provided for this area once your Web site is completed.


SAMPLE LAYOUT - Three column responsive layout

This is column 1

This is the area in which you will provide the actual text for your Web site. Until we enter the production phase of your Web site, we will use this example paragraph. This paragraph is only added to give you an idea of how the text will flow in conjunction with the design of your Web site. It is intended for testing purposes only and is not reflective of the actual text that will be provided for this area once your Web site is completed.

This is column 2

This is the area in which you will provide the actual text for your Web site. Until we enter the production phase of your Web site, we will use this example paragraph. This paragraph is only added to give you an idea of how the text will flow in conjunction with the design of your Web site. It is intended for testing purposes only and is not reflective of the actual text that will be provided for this area once your Web site is completed.

This is column 3

This is the area in which you will provide the actual text for your Web site. Until we enter the production phase of your Web site, we will use this example paragraph. This paragraph is only added to give you an idea of how the text will flow in conjunction with the design of your Web site. It is intended for testing purposes only and is not reflective of the actual text that will be provided for this area once your Web site is completed.


SAMPLE LAYOUT - Four column responsive layout

This is column 1

This is the area in which you will provide the actual text for your Web site. Until we enter the production phase of your Web site, we will use this example paragraph. This paragraph is only added to give you an idea of how the text will flow in conjunction with the design of your Web site. It is intended for testing purposes only and is not reflective of the actual text that will be provided for this area once your Web site is completed.

This is column 2

This is the area in which you will provide the actual text for your Web site. Until we enter the production phase of your Web site, we will use this example paragraph. This paragraph is only added to give you an idea of how the text will flow in conjunction with the design of your Web site. It is intended for testing purposes only and is not reflective of the actual text that will be provided for this area once your Web site is completed.

This is column 3

This is the area in which you will provide the actual text for your Web site. Until we enter the production phase of your Web site, we will use this example paragraph. This paragraph is only added to give you an idea of how the text will flow in conjunction with the design of your Web site. It is intended for testing purposes only and is not reflective of the actual text that will be provided for this area once your Web site is completed.

This is column 4

This is the area in which you will provide the actual text for your Web site. Until we enter the production phase of your Web site, we will use this example paragraph. This paragraph is only added to give you an idea of how the text will flow in conjunction with the design of your Web site. It is intended for testing purposes only and is not reflective of the actual text that will be provided for this area once your Web site is completed.


SAMPLE LAYOUT - Image-based grid of links

Just apply the "Image Link In Grid" style to the link (anchor tag) wrapped around each image. Note, the images should all share the same height and the same width for alignment purposes.


SAMPLE LAYOUT - Sections with photos & text

This is an H3 Header

This is the area in which you will provide the actual text for your Web site. Until we enter the production phase of your Web site, we will use this example paragraph. This paragraph is only added to give you an idea of how the text will flow in conjunction with the design of your Web site. It is intended for testing purposes only and is not reflective of the actual text that will be provided for this area once your Web site is completed.


This is an H3 Header

This is the area in which you will provide the actual text for your Web site. Until we enter the production phase of your Web site, we will use this example paragraph. This paragraph is only added to give you an idea of how the text will flow in conjunction with the design of your Web site. It is intended for testing purposes only and is not reflective of the actual text that will be provided for this area once your Web site is completed.

This is the area in which you will provide the actual text for your Web site. Until we enter the production phase of your Web site, we will use this example paragraph. This paragraph is only added to give you an idea of how the text will flow in conjunction with the design of your Web site. It is intended for testing purposes only and is not reflective of the actual text that will be provided for this area once your Web site is completed.


This is an H3 Header

This is the area in which you will provide the actual text for your Web site. Until we enter the production phase of your Web site, we will use this example paragraph. This paragraph is only added to give you an idea of how the text will flow in conjunction with the design of your Web site. It is intended for testing purposes only and is not reflective of the actual text that will be provided for this area once your Web site is completed.


Below is a "blockquote" element used for quoting/testimonials.

"This company has been so great to work with lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque dignissim diam ac elit semper fringilla. Phasellus hendrerit sed nisl posuere porttitor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras gravida, velit non cursus ornare, ante leo feugiat felis, tincidunt faucibus metus erat vitae justo. Fusce vestibulum est convallis tristique posuere. Proin augue tortor, ornare eget venenatis nec, pharetra vitae justo."

Jane Smith
Project Manager
Center for Important Discoveries
Below is a div with style "Well".
This is an H5 Header in a Well

This is a paragraph in a well. This is the area in which you will provide the actual text for your Web site. Until we enter the production phase of your Web site, we will use this example paragraph. This paragraph is only added to give you an idea of how the text will flow in conjunction with the design of your Web site. It is intended for testing purposes only and is not reflective of the actual text that will be provided for this area once your Web site is completed.


This is a paragraph in a well. This is the area in which you will provide the actual text for your Web site. Until we enter the production phase of your Web site, we will use this example paragraph. This paragraph is only added to give you an idea of how the text will flow in conjunction with the design of your Web site. It is intended for testing purposes only and is not reflective of the actual text that will be provided for this area once your Web site is completed.


This is a paragraph in a well. This is the area in which you will provide the actual text for your Web site. Until we enter the production phase of your Web site, we will use this example paragraph. This paragraph is only added to give you an idea of how the text will flow in conjunction with the design of your Web site. It is intended for testing purposes only and is not reflective of the actual text that will be provided for this area once your Web site is completed.