H1 Heading Default, Big, Red, Brown and Teal

Above is the H1 tag. With all heading tags you can specify if you want part or all of the text to be bigger (increases font size by 16%) and what color. The available classes are: “big”, “red”, “brown” and “blue”.

H2 Heading With Big + Brown Classes

Above is an example of the H2 tag with “big” and “brown” classes. This style is used on the heading for the home page.

H3 Heading

H4 Heading

H5 Heading

H6 HEADING

Below are two different dividers. One is a simple divider and the other is a “Top” divider, which when you click on the text link “Go To Top”, it will take you back to the top of the page. The “Top” divider has an extra 10px buffer on both top and bottom. The regular divider uses <div class=”divider”>. To make a “Top” divider, just add “top” to the class. (.ie <div class=”divider top”>)

Layout Boxes

Button Links

Button links are supported by adding the “btn” class on A LINKS and using the html <button> tag. There are three states; normal, hover and active (when you click). Using button links is an alternative way to give some links more weight than others by adding the button look. These buttons will automatically pick up the color of the portal you are in.

Alert Styles

There are four alert styles including info, warning, help and error. These are added to the page by attaching the “alert info”, “alert warning”, “alert help” and “alert error” classes to a DIV. These alerts will be 100% width of any column.

List Styles

To create a dot, checkmark or arrow list like the ones seen below add a class of “dotlist”, “checklist” or “arrowlist” to the <ul> tag. The lists below are contained within the “onefourth” layout boxes, but can be arranged however you want. The icons will automatically pick up the color of the portal you are in.

Form Elements

The form elements are both styled and sized with CSS. There is a slight drop shadow and border color change on focus. Click each textarea to view the styling changes.

Form Example

Image Alignment

These images use both “alignleft” and “alignright” classes. Be sure to only use these classes with images.

These don’t work as well on medium size devices due to text wrapping. Paragraphs may be squished too much and be only one word before going to the next line. Made it so these align images would not float on smaller sizes. Using Bootstrap Columns would be a better choice. You can then have column sizes change on different screen widths. NOTE: When using aligns make sure that img tags are not trapped with headings or other paragraphs with text. Otherwise the won’t float properly on smaller sized devices.

Maecenas et malesuada lorem. Fusce et purus quam, vulputate accumsan lorem. Mauris quis dapibus nulla? Donec metus massa, tempus ac auctor a, dictum a enim. Vestibulum tempus pellentesque sem, vitae hendrerit arcu malesuada quis. Nunc at dapibus augue. Suspendisse potenti. Mauris laoreet tincidunt mauris in mattis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla facilisi. Pellentesque id sem turpis, nec eleifend mi. Sed ac varius urna. Nam nibh elit, gravida sed eleifend vitae, adipiscing sit amet nisl. In at mauris dui, eget euismod velit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse adipiscing, lectus in egestas tempus, nulla velit ultrices risus, at rhoncus mi tortor et neque. Donec sit amet feugiat ipsum. Nulla nisl leo, semper nec placerat ornare, ultrices et risus. Phasellus ornare condimentum felis in iaculis! Suspendisse vehicula, velit at eleifend hendrerit; tellus diam fermentum est, a luctus lacus quam id nibh. Morbi est tellus, adipiscing ut porta id, eleifend egestas nisl. Donec consequat viverra dolor a ultricies! Duis lobortis vestibulum lacus. Integer ullamcorper pharetra dui, ac fermentum tortor elementum vel. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis a consectetur justo. Etiam scelerisque, purus ut cursus consectetur, nisi justo euismod velit, sed hendrerit lacus orci eu leo. Aliquam a sagittis erat. Quisque ipsum elit, feugiat eget euismod quis, lacinia ut elit!

Phasellus ornare condimentum felis in iaculis! Suspendisse vehicula, velit at eleifend hendrerit; tellus diam fermentum est, a luctus lacus quam id nibh. Morbi est tellus, adipiscing ut porta id, eleifend egestas nisl. Donec consequat viverra dolor a ultricies! Duis lobortis vestibulum lacus. Integer ullamcorper pharetra dui, ac fermentum tortor elementum vel. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis a consectetur justo. Etiam scelerisque, purus ut cursus consectetur, nisi justo euismod velit, sed hendrerit lacus orci eu leo. Aliquam a sagittis erat. Quisque ipsum elit, feugiat eget euismod quis, lacinia ut elit! Maecenas et malesuada lorem. Fusce et purus quam, vulputate accumsan lorem. Mauris quis dapibus nulla? Donec metus massa, tempus ac auctor a, dictum a enim. Vestibulum tempus pellentesque sem, vitae hendrerit arcu malesuada quis. Nunc at dapibus augue. Suspendisse potenti. Mauris laoreet tincidunt mauris in mattis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla facilisi. Pellentesque id sem turpis, nec eleifend mi. Sed ac varius urna. Nam nibh elit, gravida sed eleifend vitae, adipiscing sit amet nisl. In at mauris dui, eget euismod velit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse adipiscing, lectus in egestas tempus, nulla velit ultrices risus, at rhoncus mi tortor et neque. Donec sit amet feugiat ipsum. Nulla nisl leo, semper nec placerat ornare, ultrices et risus.

Other Notes / Recap

By default you don’t have to use Bootstrap Columns. Only if you need columns, will you need to create a row and columns.

Tables

Tables are not preferred unless no other option is available. Tables are not responsive and usually require lots of coding to make work in all device sizes. In case a table is needed font-sizes shrink down on smaller width devices and scrolling to see the whole table (if the table is larger than the device) is enabled.

A List Of Relevant Classes

• “red”, “brown”, “teal”– changes color of text for that element
• “big”– increases font size by 16% (use with h2)
• “divider”, “divider top”– creates full width divider(s)
• “col-md-6”– creates half width layout column for medium width devices
• “col-md-4”– creates third width layout column for medium width devices
• “col-md-8”– creates two third width layout column for medium width devices
• “col-md-3”– creates one fourth width layout column for medium width devices
• “col-md-9”– creates three fourth width layout column for medium width devices
• “button”– can be used on a:links to create button links and also on form buttons
• “dotlist”, “checklist”, “arrowlist”– added to ULs to create different image based lists
• “alignleft”– used on images only to float left of content
• “alignright”– used on images only to float right of content
• “bordered”– used on images only add borders around images