hagenburger/_examples.md

## _examples.md
Markdown Documentation File
===========================


A normal example without options (would output the HTML directly and syntax-highlighted afterwards):

~~~ example
<div class="header">
  ...
</div>
~~~


This example would be parsed by Haml first and outputted as HTML and syntax-highlighted Haml:

~~~ example
@haml
.header
   ...
~~~


The wrapper of this example would get and additional class (maybe because this example should be on inverse background).
Also it would span the full browser width (used to be `~~~ layout-example`):

~~~ example
@class: my-additional-class
@full-width
<div class="something-wide">
  ...
</div>
~~~


A half-width example witch floats left and has some custom CSS attached:

~~~ example
@float-left
@style: background: black
<div class="small-box">
  ...
</div>
~~~

## styleguide-1.html.lsg
# The <title> of the output HTML:
title: "My Living Style Guide"

# Your Sass source file that you create the style guide for:
source: application.css.scss

# JavaScript files that should be imported in the <head>:
javascript-before:
  - modernizr.js

# JavaScript files that should be imported right before the </body>:
javascript-after:
  - http://code.jquery.com/jquery-2.0.3.js
  - application.js

## styleguide-3-with-styling.html.lsg
title: "My Living Style Guide"
source: application.css.scss
javascript-before:
  - modernizr.js
javascript-after:
  - jquery.js
  - application.js

# You can use your own colors and styling by setting:
style:
  color: blue
  base-font: Verdana
  width: 960px
  code-color: green
  # More configuration options can be found here:
  # https://github.com/hagenburger/livingstyleguide/blob/master/stylesheets/_livingstyleguide.scss
	Markdown Documentation File
	===========================


	A normal example without options (would output the HTML directly and syntax-highlighted afterwards):

	~~~ example
	<div class="header">
	...
	</div>
	~~~


	This example would be parsed by Haml first and outputted as HTML and syntax-highlighted Haml:

	~~~ example
	@haml
	.header
	...
	~~~


	The wrapper of this example would get and additional class (maybe because this example should be on inverse background).
	Also it would span the full browser width (used to be `~~~ layout-example`):

	~~~ example
	@class: my-additional-class
	@full-width
	<div class="something-wide">
	...
	</div>
	~~~


	A half-width example witch floats left and has some custom CSS attached:

	~~~ example
	@float-left
	@style: background: black
	<div class="small-box">
	...
	</div>
	~~~
	# The <title> of the output HTML:
	title: "My Living Style Guide"

	# Your Sass source file that you create the style guide for:
	source: application.css.scss

	# JavaScript files that should be imported in the <head>:
	javascript-before:
	- modernizr.js

	# JavaScript files that should be imported right before the </body>:
	javascript-after:
	- http://code.jquery.com/jquery-2.0.3.js
	- application.js