.page-header
	h1 Intro to Jade
p.lead Jade is a language which compiles to HTML. 
p This will not be an exhaustive document covering Jade but mainly covering conventions you'll see used in Kickstrap. For complete documentation, visit 
	a(href="http://jade-lang.com/") the Jade homepage.
p Like CoffeeScript and Stylus, this language substitutes indentation for noisy characters.
p For example, instead of 
p
	pre &lt;div&gt;
		|   &lt;span&gt;
		|     &lt;nav&gt;
		|     &lt;/nav&gt;
		|   &lt;/span&gt;
		| &lt;/div&gt;
p We can just write
p
	pre div
		|   span
		|     nav
p The closing of a tag is implied by beginning a new line indented back in. So if we wanted to say "hello" in the span, but not the nav, we'd say
p
	pre div
		|   span
		|     | hello
		|     nav
p The pipe (|) is a special character we use to tell jade that "hello" is not an html tag. Otherwise if we did this:
p
	pre div
		|   span
		|     hello
		|     nav
p We'd have this:
p
	pre &lt;div&gt;
		|   &lt;span&gt;
		|     &lt;nav&gt;
		|     &lt;/nav&gt;
		|     &lt;hello&gt;
		|     &lt;/hello&gt;
		|   &lt;/span&gt;
		| &lt;/div&gt;
h3 Writing inside tags
p Commonly, you'll need to add classes and ids to your tags. This is done using CSS syntax where dots (.) are classes and hashmarks (#) are ids.
p
	pre div.menu-item#main-menu
p Would yield
p
	pre &lt;div class="menu-item" id="main-menu"&gt;&lt;/div&gt;
p Other attributes can be encapsulated by parentheses as such:
p
	pre div.menu-item#main-menu(ng-click="activate()")
p Yields:
p
	pre &lt;div class="menu-item" id="main-menu" ng-click="activate()"&gt;&lt;/div&gt;