Style Guide

Guide to existing styles that can be used to create pages.

Headline One <h1>

Headline Two <h2>

Headline Three <h3>

Headline Four <h4>

View Style guide without left portlet here (to see layout styles fullwidth).

Intro Text - (class="lead") Lorem ipsum dolor sit amet, consectetur adipiscing elit. Qua tu etiam inprudens utebare non numquam. Eadem nunc mea adversum te oratio est. Quam ob rem tandem, inquit, non satisfacit? Dicam, inquam, et quidem discendi causa magis, quam quo te aut Epicurum reprehensum velim. Quare attende, quaeso.

Id enim volumus, id contendimus, ut officii fructus sit ipsum officium. Quod cum accidisset ut alter alterum necopinato videremus, surrexit statim. Nosti, credo, illud: Nemo pius est, qui pietatem-; Scaevolam M. Suam denique cuique naturam esse ad vivendum ducem. Hoc enim identidem dicitis, non intellegere nos quam dicatis voluptatem. Erat enim Polemonis. Num quid tale Democritus?

Duo Reges: constructio interrete. Nullus est igitur cuiusquam dies natalis. Sed in rebus apertissimis nimium longi sumus. Illa videamus, quae a te de amicitia dicta sunt. Sequitur disserendi ratio cognitioque naturae; Ille enim occurrentia nescio quae comminiscebatur; Quid enim de amicitia statueris utilitatis causa expetenda vides.

Bulleted List

  • Item One
  • Item Two
  • Item Three
  • Item Four

Ordered List

  1. Item One
  2. Item Two
  3. Item Three
  4. Item Four

 

Button Styles

Button

Button Large

Layout Options

Always enclose columns within a new row. div class="row-fluid" Remember to close the row.

Columns will stack on mobile devices. 

Please note that the layout options are achieved using text view only. A basic understanding of HTML is required. Switch to "Textile" format using the Text Format option at the top right of the editor window.

Two column layout

div class="span6"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Integer enim neque volutpat ac tincidunt vitae semper. Commodo sed egestas egestas fringilla phasellus faucibus scelerisque eleifend donec. Libero enim sed faucibus turpis in eu mi bibendum neque. Faucibus scelerisque eleifend donec pretium vulputate sapien nec sagittis.

Two column layout

div class="span6" Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Integer enim neque volutpat ac tincidunt vitae semper. Commodo sed egestas egestas fringilla phasellus faucibus scelerisque eleifend donec. Libero enim sed faucibus turpis in eu mi bibendum neque. Faucibus scelerisque eleifend donec pretium vulputate sapien nec sagittis.

Three column layout

div class="span4"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Integer enim neque volutpat ac tincidunt vitae semper. Commodo sed egestas egestas fringilla phasellus faucibus scelerisque eleifend donec. Libero enim sed faucibus turpis in eu mi bibendum neque. Faucibus scelerisque eleifend donec pretium vulputate sapien nec sagittis.

Three column layout

div class="span4" Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Integer enim neque volutpat ac tincidunt vitae semper. Commodo sed egestas egestas fringilla phasellus faucibus scelerisque eleifend donec. Libero enim sed faucibus turpis in eu mi bibendum neque. Faucibus scelerisque eleifend donec pretium vulputate sapien nec sagittis.

Three column layout

div class="span4"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Integer enim neque volutpat ac tincidunt vitae semper. Commodo sed egestas egestas fringilla phasellus faucibus scelerisque eleifend donec. Libero enim sed faucibus turpis in eu mi bibendum neque. Faucibus scelerisque eleifend donec pretium vulputate sapien nec sagittis.

Four column layout

div class="span3"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Integer enim neque volutpat ac tincidunt vitae semper. Commodo sed egestas egestas fringilla phasellus faucibus scelerisque eleifend donec. Libero enim sed faucibus turpis in eu mi bibendum neque.

Four column layout

div class="span3"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Integer enim neque volutpat ac tincidunt vitae semper. Commodo sed egestas egestas fringilla phasellus faucibus scelerisque eleifend donec. Libero enim sed faucibus turpis in eu mi bibendum neque.

Four column layout

div class="span3" Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Integer enim neque volutpat ac tincidunt vitae semper. Commodo sed egestas egestas fringilla phasellus faucibus scelerisque eleifend donec. Libero enim sed faucibus turpis in eu mi bibendum neque.

Four column layout

div class="span3" Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Integer enim neque volutpat ac tincidunt vitae semper. Commodo sed egestas egestas fringilla phasellus faucibus scelerisque eleifend donec. Libero enim sed faucibus turpis in eu mi bibendum neque.

One-third column layout

div class="span4" Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Integer enim neque volutpat ac tincidunt vitae semper. Commodo sed egestas egestas fringilla phasellus faucibus scelerisque eleifend donec. Libero enim sed faucibus turpis in eu mi bibendum neque.

Two third column layout

div class="span8" Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Integer enim neque volutpat ac tincidunt vitae semper. Commodo sed egestas egestas fringilla phasellus faucibus scelerisque eleifend donec. Libero enim sed faucibus turpis in eu mi bibendum neque.

Two third column layout

div class="span8" Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Integer enim neque volutpat ac tincidunt vitae semper. Commodo sed egestas egestas fringilla phasellus faucibus scelerisque eleifend donec. Libero enim sed faucibus turpis in eu mi bibendum neque.

One-third column layout

div class="span4" Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Integer enim neque volutpat ac tincidunt vitae semper. Commodo sed egestas egestas fringilla phasellus faucibus scelerisque eleifend donec. Libero enim sed faucibus turpis in eu mi bibendum neque.

Three-fourth column layout

div class="span9" Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Integer enim neque volutpat ac tincidunt vitae semper. Commodo sed egestas egestas fringilla phasellus faucibus scelerisque eleifend donec. Libero enim sed faucibus turpis in eu mi bibendum neque.

One-fourth column layout

div class="span3" Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Integer enim neque volutpat ac tincidunt vitae semper. Commodo sed egestas egestas fringilla phasellus faucibus scelerisque eleifend donec. Libero enim sed faucibus turpis in eu mi bibendum neque.

 

Responsive Table

Add 'table responsive' class to table: table class="table responsive"

Header OneHeader TwoHeader ThreeHeader Four
Column One Column Two Column Three Column Four
Column One Column Two Column Three Column Four
Column One Column Two Column Three Column Four

Positioning Images

Deer at NREL
Description becomes caption
This image is positioned left and the size is 'large'. The description field becomes the caption.

Image sizes:

Available image sizes in editor.

Deer at NREL
Description becomes caption
This image is positioned right and the size is 'preview'.  Added a 'clearing' div between the two images to stop them from stacking.

Back to Top