diff options
Diffstat (limited to 'node_modules/renderkid/README.md')
-rw-r--r-- | node_modules/renderkid/README.md | 189 |
1 files changed, 189 insertions, 0 deletions
diff --git a/node_modules/renderkid/README.md b/node_modules/renderkid/README.md new file mode 100644 index 000000000..b98f93d5f --- /dev/null +++ b/node_modules/renderkid/README.md @@ -0,0 +1,189 @@ +# RenderKid +[![Build Status](https://secure.travis-ci.org/AriaMinaei/RenderKid.png)](http://travis-ci.org/AriaMinaei/RenderKid) + +RenderKid allows you to use HTML and CSS to style your CLI output, making it easy to create a beautiful, readable, and consistent look for your nodejs tool. + +## Installation + +Install with npm: +``` +$ npm install renderkid +``` + +## Usage + +```coffeescript +RenderKid = require('renderkid') + +r = new RenderKid() + +r.style({ + "ul": { + display: "block" + margin: "2 0 2" + } + + "li": { + display: "block" + marginBottom: "1" + } + + "key": { + color: "grey" + marginRight: "1" + } + + "value": { + color: "bright-white" + } +}) + +output = r.render(" +<ul> + <li> + <key>Name:</key> + <value>RenderKid</value> + </li> + <li> + <key>Version:</key> + <value>0.2</value> + </li> + <li> + <key>Last Update:</key> + <value>Jan 2015</value> + </li> +</ul> +") + +console.log(output) +``` + +![screenshot of usage](https://github.com/AriaMinaei/RenderKid/raw/master/docs/images/usage.png) + +## Stylesheet properties + +### Display mode + +Elements can have a `display` of either `inline`, `block`, or `none`: +```coffeescript +r.style({ + "div": { + display: "block" + } + + "span": { + display: "inline" # default + } + + "hidden": { + display: "none" + } +}) + +output = r.render(" +<div>This will fill one or more rows.</div> +<span>These</span> <span>will</span> <span>be</span> in the same <span>line.</span> +<hidden>This won't be displayed.</hidden> +") + +console.log(output) +``` + +![screenshot of usage](https://github.com/AriaMinaei/RenderKid/raw/master/docs/images/display.png) + + +### Margin + +Margins work just like they do in browsers: +```coffeescript +r.style({ + "li": { + display: "block" + + marginTop: "1" + marginRight: "2" + marginBottom: "3" + marginLeft: "4" + + # or the shorthand version: + "margin": "1 2 3 4" + }, + + "highlight": { + display: "inline" + marginLeft: "2" + marginRight: "2" + } +}) + +r.render(" +<ul> + <li>Item <highlgiht>1</highlight></li> + <li>Item <highlgiht>2</highlight></li> + <li>Item <highlgiht>3</highlight></li> +</ul> +") +``` + +### Padding + +See margins above. Paddings work the same way, only inward. + +### Width and Height + +Block elements can have explicit width and height: +```coffeescript +r.style({ + "box": { + display: "block" + "width": "4" + "height": "2" + } +}) + +r.render("<box>This is a box and some of its text will be truncated.</box>") +``` + +### Colors + +You can set a custom color and background color for each element: + +```coffeescript +r.style({ + "error": { + color: "black" + background: "red" + } +}) +``` + +List of colors currently supported are `black`, `red`, `green`, `yellow`, `blue`, `magenta`, `cyan`, `white`, `grey`, `bright-red`, `bright-green`, `bright-yellow`, `bright-blue`, `bright-magenta`, `bright-cyan`, `bright-white`. + +### Bullet points + +Block elements can have bullet points on their margins. Let's start with an example: +```coffeescript +r.style({ + "li": { + # To add bullet points to an element, first you + # should make some room for the bullet point by + # giving your element some margin to the left: + marginLeft: "4", + + # Now we can add a bullet point to our margin: + bullet: '"-"' + } +}) + +# The four hyphens are there for visual reference +r.render(" +---- +<li>Item 1</li> +<li>Item 2</li> +<li>Item 3</li> +---- +") +``` +And here is the result: + +![screenshot of bullet points, 1](https://github.com/AriaMinaei/RenderKid/raw/master/docs/images/bullets-1.png) |