Instantly share code, notes, and snippets.

Embed
What would you like to do?
How to pass options in the [LivingStyleGuide gem](https://github.com/hagenburger/livingstyleguide-example).
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
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
@jhilden

This comment has been minimized.

jhilden commented Dec 16, 2013

I don't quite understand the @float-left use case. Shouldn't the CSS module know how it is supposed to float?

I first thought that @full-width was referring to the container of the module, so I would rename it to something like @full-page-width or similar.

@hagenburger

This comment has been minimized.

Owner

hagenburger commented Dec 18, 2013

@jhilden: Sometimes it could make sense to have the example on the left and the description on the right side or two examples next to each other. So the whole example block would float.

@hagenburger

This comment has been minimized.

Owner

hagenburger commented Dec 18, 2013

@jhilden: Sometimes it could make sense to have the example on the left and the description on the right side or two examples next to each other. So the whole example block would float.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment