About this Template

This template is marked up in valid HTML 5 and CSS 3, but should downgrade well on IE 7. The template is responsive (renders well on large screens and smartphones). It is also designed with web accessibility standards in mind.

The HTML code is well-commented to help with your customization. Check your pages on a smartphone.

Three Page Types

The template has three page types. A front page with a large image welcomes people to your troop page. A content page with a sidebar holds any information you may need. A wide-content page can hold large images, maps, or calendars.

For best results use short words on the menu. If the menu stretches longer the 990px it will wrap to a second line. While functional, it is not the most attractive. For smaller screens, the menu will format well no matter how many items. For larger sites consider putting a secondary navigation menu in the Aside area.

Examples of Style

Morbi dignissim tempus magna at consequat. Cras blandit in nisl ut imperdiet. Curabitur venenatis non nulla quis lobortis. Aliquam risus felis, suscipit eu mattis vel, ultrices vitae mi. Ut id tristique mi, consequat congue lectus.

Nulla lobortis mattis est blandit ornare. Nam placerat auctor enim, non feugiat quam elementum ut. Donec venenatis egestas orci ac dignissim. Nullam vehicula turpis eu iaculis elementum. Vivamus hendrerit purus vitae semper imperdiet.

Nullam Vestibulum, Odio Four

Nullam vesibulum non fermentum vestibulum, enim nibh posuere lacus, eu porttitor sem sem nec leo.

Vivamus Consequat Nisi Five

Vivamus consequat nisi feugiat neque volutpat aliquam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam nec arcu id lectus hendrerit egestas.

Sed Nunc Magna Six

Sed nunc magna, dictum sit amet massa ac, tincidunt porttitor ligula. Donec odio leo, laoreet eu orci a, hendrerit pretium arcu. Phasellus enim velit, varius vel posuere in, venenatis sed orci. Curabitur fermentum quis lectus in pulvinar. Donec laoreet suscipit ante in malesuada.

Ordered List

Below is an ordered list with a sublist

Vivamus pretium nulla a justo interdum, in elementum tellus hendrerit.
Cras eget elit sed tellus elementum commodo.
1. First
  1. Part one
  2. Part two
  3. Part Three
  4. Part Four
2. Second
3. Third
4. Fourth
Phasellus tincidunt risus non arcu viverra, in pretium sapien molestie.
Praesent aliquam mauris non felis ullamcorper, eu varius felis lobortis.

That was an ordered list. The next list will follow a heading tag and include an unordered list and an ordered list.

Unordered List

Cras eget mauris vitae quam imperdiet ultricies eget vel quam.
Nam tincidunt leo id auctor lacinia.
Mauris sit amet sem gravida, posuere libero ac, luctus tortor.
- Larry
- Moe
- Curly
  - Shemp
  - Joe
Suspendisse at leo placerat, dignissim nisi ut, sollicitudin diam.

Other Things

Month	Savings
January	$100

Coffee: Black hot drink
Milk: White cold drink

This long paragraph will have some emphasized text, and some strong text, it contains^superscript and_subscript text. Maybe a citation like this: The Scream by Edward Munch. Painted in 1893. Maybe an abbreviation like the following: The WHO was founded in 1948. Maybe some ~~deleted Text~~ and some inserted Text to make my day. The variable x is just the way I like it. And finally a blockquote:

Please understand that ending a sentence with a preposition is something up with which I shall not put.
Probably Not Churchill

Above is a horizontal rule, and below is some code.


$(function() {
	var pull 		= $('#pull');
	menu 		= $('nav ul');
	menuHeight	= menu.height();

	$(pull).on('click', function(e) {
		e.preventDefault();
		menu.slideToggle();
	});

	$(window).resize(function(){
		var w = $(window).width();
		if(w > 320 && menu.is(':hidden')) {
			menu.removeAttr('style');
		}
	});
});

And finally, some pre-formatted text.


 _____                                   _     ______           _      _  __       
|  __ \                                 | |   |  ____|         | |    (_)/ _| 
| |__) | __ ___ _ __   __ _ _ __ ___  __| |   | |__ ___  _ __  | |     _| |_ ___  
|  ___/ '__/ _ \ '_ \ / _` | '__/ _ \/ _` |   |  __/ _ \| '__| | |    | |  _/ _ \ 
| |   | | |  __/ |_) | (_| | | |  __/ (_| |_  | | | (_) | |    | |____| | ||  __/_
|_|   |_|  \___| .__/ \__,_|_|  \___|\__,_(_) |_|  \___/|_|    |______|_|_| \___(_) 
               | |                                            
               |_|