kickstrap/templates/new/views/partials/jade.jade

Framework for advanced Bootstrap web development

.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 <div>
		|   <span>
		|     <nav>
		|     </nav>
		|   </span>
		| </div>
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 <div>
		|   <span>
		|     <nav>
		|     </nav>
		|     <hello>
		|     </hello>
		|   </span>
		| </div>
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 <div class="menu-item" id="main-menu"></div>
p Other attributes can be encapsulated by parentheses as such:
p
	pre div.menu-item#main-menu(ng-click="activate()")
p Yields:
p
	pre <div class="menu-item" id="main-menu" ng-click="activate()"></div>