You haven't shown up to the office in your underwear, neither should your UI.
Dress Code extracts certain comment blocks from your stylesheets and creates a styleguide with them.
Its really flexible, you can:
- Include your own CSS
- Include your own JS
- Render the styleguide with your own template
gem install dress_code_react
Dress code requires the python library "pygments" for syntax highlighting.
sudo easy_install pygments
Dress Code is generally used as a command line tool that takes a yaml config file. It will search your files and extract documentation that matches a regular expresssion.
Usage:
dress_code_react [config_path]
Example:
dress_code_react config/styleguide.yml
Example config yaml file:
# required - the file to generate
out_file: styleguide/index.html
# required - the files to extract docs from
glob: stylesheets/**/*.css
# optional - components can display where they are defined, this will be
# stripped from that definition
base_dir: stylesheets
# optional - mustache template rendered for the `out_file`
template: styleguide/index.mustache
# optional - CSS files to load in the template
css:
- public/stylesheets/framework.css
- public/stylesheets/app.css
# optional - Inline CSS styles, defaults to true
inline_css: false
# optional - JavaScript files to load in the template
js:
- public/js/behaviors.js
# optional - Inline JS, defaults to true
inline_js: falseComments like the following will be extracted from your stylesheets:
/*
@styleguide Buttons
Buttons are amazing.
```html
<button class="btn">Button</button>
```
*/
The content of your comment block is parsed as markdown with github-style code fences. HTML code fences will be syntax highlighted and rendered (YES RENDERED!) in your styleguide.
Feel free to extend DressCodeReact::Extractor to match your own style of comments.
You can require any of the classes in lib to extend Dress Code for your particular needs. Check out bin/dress_code_react to see how to use them.