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

The colors for each portal are set using a specific ID on the body tag of the page. The use of these classes are meant for other elements as well as the Madaba pages including home, contact, get involved, site map and privacy.

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

Layout is done by rows and columns. All layout is based on 12 column grid of Bootstrap Version 3. For more information about layout visit Bootstrap’s Guide on Grids.

Rows

Columns must be set in a row. There are 12 columns possible in each row. Make sure you count to 12 columns.
<div class="row">

Columns and Device Widths

Bootstrap uses multiple classes for columns based on device width.

  • X-Small: col-xs-*
  • Small: col-sm-*
  • Medium: col-md-*
  • Large: col-lg-*

These styles cascade so most times you’ll use col-md-* and it will work for all other device sizes.

One half column

This box splits the page in half. 6 is half of 12 in a 12 column grid. So the code would be:

<div class="col-md-6">

One half column

This box splits the page in half. 6 is half of 12 in a 12 column grid.

<div class="col-md-6">

One third column

This box splits the page in one-third. 4 is a third of 12 in a 12 column grid.

<div class="col-md-4">

One third column

This box splits the page in one-third. 4 is a third of 12 in a 12 column grid.

<div class="col-md-4">

One third column

This box splits the page in one-third. 4 is a third of 12 in a 12 column grid.

<div class="col-md-4">

Two third column

This box splits the page in two-thirds. 8 is two-thirds of 12 in a 12 column grid.

<div class="col-md-8">

One third column

This box splits the page in one-third. 4 is a third of 12 in a 12 column grid.

<div class="col-md-4">

One forth column

This box splits the page in one-forth. 3 is a forth of 12 in a 12 column grid.

<div class="col-md-3">

One forth column

This box splits the page in one-forth. 3 is a forth of 12 in a 12 column grid.

<div class="col-md-3">

One forth column

This box splits the page in one-forth. 3 is a forth of 12 in a 12 column grid.

<div class="col-md-3">

One forth column

This box splits the page in one-forth. 3 is a forth of 12 in a 12 column grid.

<div class="col-md-3">

One forth column

This box splits the page in one-forth. 3 is a forth of 12 in a 12 column grid.

<div class="col-md-3">

Threes forths column

This box splits the page in three-forths. 9 is three-forths of 12 in a 12 column grid.

<div class="col-md-9">

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.

Click Here A Really Long Button Title

<a href="..." class="btn">click here</a>

 

<button>click here</button>

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.

This box uses the “alert info” class.
This box uses the “alert warning” class.
This box uses the “alert help” class.
This box uses the “alert error” class.
This box uses the “alert info” class.
This box uses the “alert help” class.
This box uses the “alert error” class.
This box uses the “alert info” class.
This box uses the “alert warning” class.
This box uses the “alert help” class.
This box uses the “alert error” class.

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.

Dot List
  • Dot List Item #1
  • Dot List Item #2
  • Dot List Item #3
Check List
  • Check List Item #1
  • Check List Item #2
  • Check List Item #3
Arrow List
  • Arrow List Item #1
  • Arrow List Item #2
  • Arrow List Item #3

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

This form is inside a Bootstrap Column. This form does not have a containing DIV.

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

© 2021 Madaba Plains Project. All rights reserved. Any unauthorized duplication of images or content on this site is strictly prohibited.