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("

• Name: RenderKid
• Version: 0.2
• Last Update: Jan 2015

")

console.log(output) ```

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("

These will be in the same line. This won't be displayed. ")

console.log(output) ```

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("

• Item 1
• Item 2
• Item 3

") ```

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("This is a box and some of its text will be truncated.") ```

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("

") ``` And here is the result: