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 |
This comment has been minimized.
This comment has been minimized.
@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. |
This comment has been minimized.
This comment has been minimized.
@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
This comment has been minimized.
jhilden commentedDec 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.