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 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 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
- 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 sublist item
- This is a sublist item
- This is a sublist item
- This is a list item
This is a table with style "Basic Table"
| Heading1 | Heading2 | Heading3 | Heading4 |
|---|
| Data Cell | Data Cell | Really Really Really Really Long Data Cell | Data Cell |
| Data Cell | Longer Data Cell | Data Cell | Data Cell |
| Data Cell | Data Cell | Data Cell | Data Cell |
Below is a table with style "Striped Table"
| Heading1 | Heading2 | Heading3 | Heading4 |
|---|
| Data Cell | Data Cell | Really Really Really Really Long Data Cell | Data Cell |
| Data Cell | Longer Data Cell | Data Cell | Data Cell |
| Data Cell | Really Really Really Really Long Data Cell | Data Cell | Data Cell |
| Data Cell | Data Cell | Data Cell | Data Cell |
| Really Really Really Really Long Data Cell | Longer Data Cell | Data Cell | Data Cell |
| Data Cell | Really Really Really Really Long Data Cell | Data Cell | Data Cell |
| Data Cell | Data Cell | Data Cell | Data 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.
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.
Generic Collapsible Toggle - Section 1
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.
Generic Collapsible Toggle - Section 2
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.