RAML rendering using Jade

raml.css

.parent {
	color: #999;
}
.list-group-item > .badge {
	float: none;
	margin-right: 6px;
}
.panel-title > .block > .badge {
	float: right;
	margin-left: 5px;
}
.badge {
	border-radius: 0;
	text-transform: uppercase;
	width: 70px;
	font-weight: normal;
	color: #f3f3f6;
	line-height: normal;
	margin-right: 5px;
}
.block .badge {
	visibility: hidden;
}
.block.collapsed .badge {
	visibility: visible;
}
.badge_get {
	background-color: #63a8e2;
}
.badge_post {
	background-color: #6cbd7d;
}
.badge_put {
	background-color: #22bac4;
}
.badge_delete {
	background-color: #d26460;
}
.block {
	display: block;
}
.list-group, .panel-group {
	margin-bottom: 0;
}
.panel-group .panel+.panel-white {
	margin-top: 0;
}
.panel-group .panel-white {
	border-bottom: 1px solid #F5F5F5;
	border-radius: 0;
}
.panel-white:last-child {
	border-bottom-color: white;
	-webkit-box-shadow: none;
	box-shadow: none;
}
.panel-white .panel-heading {
	background: white;
}
.tab-pane ul {
	padding-left: 2em;
}
.tab-pane h2 {
	font-size: 1.2em;
	padding-bottom: 4px;
	border-bottom: 1px solid #ddd;
}
.tab-pane h3 {
	font-size: 1.1em;
}
.tab-content {
	border-left: 1px solid #ddd;
	border-right: 1px solid #ddd;
	border-bottom: 1px solid #ddd;
	padding: 10px;
}
#sidebar {
	margin-top: 30px;
}
.resource-description {
	border-bottom: 1px solid #ddd;
	background: #fcfcfc;
	padding: 15px 15px 0 15px;
	margin: -15px -15px 10px -15px;
}

resource.jade

mixin resource(resource)
	.panel.panel-white
		.panel-heading
			h4.panel-title
				a.block.collapsed(data-toggle='collapse', href='#panel_#{resource.uniqueId}')
					if resource.methods
						each method in resource.methods
							span.badge(id='#{method.method}_#{resource.uniqueId}', class="badge_#{method.method}") #{method.method} #{helpers.lock(method.securedBy)}
						span.parent=resource.parentUrl
						| #{resource.relativeUri}
		.panel-collapse.collapse(id='panel_#{resource.uniqueId}')
			.panel-body
				.list-group
					if resource.methods
						each method in resource.methods
							a.list-group-item(href='#', data-toggle='modal', data-target='##{resource.uniqueId}_#{method.method}')
								span.badge(class='badge_#{method.method}') #{method.method} #{helpers.lock(method.securedBy)}
								span!=helpers.md(resource.description)

		if resource.methods
			each method in resource.methods
				.modal.fade(id='#{resource.uniqueId}_#{method.method}')
					.modal-dialog
						.modal-content
							.modal-header
								button.close(type='button', data-dismiss='modal', aria-hidden='true') ×
								h4.modal-title
									span.badge(class='badge_#{method.method}') #{method.method} #{helpers.lock(method.securedBy)}
									span.parent=resource.parentUrl
									| #{resource.relativeUri}
							.modal-body
								.alert.alert-info!=helpers.md(method.description)

								// Nav tabs
								ul.nav.nav-tabs
									li.active: a(href='##{resource.uniqueId}_#{method.method}_request', data-toggle='tab') Request
									if method.responses
										li: a(href='##{resource.uniqueId}_#{method.method}_response', data-toggle='tab') Response

								// Tab panes
								.tab-content
									.tab-pane.active(id='#{resource.uniqueId}_#{method.method}_request')
										if resource.allUriParameters
											h3 URI Parameters
											ul
												each param in resource.allUriParameters
													li: strong=param.displayName
														|  #{param.type}

										if method.queryParameters
											h3 Query Parameters
											ul
												each param, key in method.queryParameters
													li.markdown
														strong=key
														em
															if param.required
																|  required
															if param.enum
																|  one of (#{param.enum})
															else
																|  (#{param.type})

														| !{helpers.md(param.description)}
														if param.schema
															p: small
																strong Schema:
																code!=param.schema

														if param.example
															p: small
																strong Example:
																code!=param.example

										if method.headers
											h3 Headers
											ul
												each header, headername in method.headers
													li.markdown
														strong=(header.displayName ? header.displayName : headername)
														em
															if header.required
																|  required
															if header.enum
																|  one of (#{header.enum})
															else
																|  (#{header.type})
														if header.description
															| !{helpers.md(header.description)}

										if method.body
											h3 Body
											each b, key in method.body
												p: strong Type: #{key}
												if formParameters
													strong Form Parameters
													ul
														each param in formParameters
															li.markdown
																strong=key
																em
																	if param.required
																		|  required
																	if param.enum
																		|  one of (#{param.enum})
																	else
																		|  (#{param.type})
																| !{helpers.md(description)}
																if param.schema
																	p:small
																		strong Schema:
																		code!=param.schema
																if param.example
																	p: small
																		strong Example:
																		code!=param.example
												if b.schema
													strong Schema:
													pre!=helpers.highlight(b.schema)

												if b.example
													strong Example:
													pre!=helpers.highlight(b.example)

									if method.responses
										.tab-pane(id='#{resource.uniqueId}_#{method.method}_response')
											each response, key in method.responses
												h2 HTTP status code 
													a(href='http://httpstatus.es/#{key}', target='_blank')=key
												| !{helpers.md(response.description)}

												if response.headers
													h3 Headers
													ul
														each header, headername in response.headers
															li: strong=headername
																| : #{header.type}
												if response.body
													h3 Body
														each rb, contentType in response.body
															p
																strong Type: #{contentType}
															if rb && rb.schema
																strong Schema:
																pre!=helpers.highlight(rb.schema)
															if tb && rb.example
																strong Example:
																pre!=helpers.highlight(rb.example)

template.jade

include resource.jade

extends ../layout

block body
	.page-header
		h1
			| #{title} API documentation
			if version
				|  
				small version #{version}
		p=baseUri
		if documentation
			each doc in documentation
				h3=doc.title
				div=doc.content

	each mainResource in resources
		.panel.panel-default
			.panel-heading
				h3.panel-title(id=mainResource.uniqueId)=mainResource.displayName ? mainResource.displayName : mainResource.relativeUri
			.panel-body
				if mainResource.description
					.resource-description!=helpers.md(mainResource.description)
					.panel-group
						+resource(mainResource)
						if mainResource.resources
							each resource in mainResource.resources
								+resource(resource)

block menu

	#sidebar.hidden-print.affix(role='complementary')
		h1 Resources
		hr
		ul.nav.nav-pills.nav-stacked
			each resource in resources
				li
					a(href='##{resource.uniqueId}')=resource.displayName ? resource.displayName : resource.relativeUri