aboutsummaryrefslogtreecommitdiff
path: root/node_modules/renderkid/README.md
diff options
context:
space:
mode:
Diffstat (limited to 'node_modules/renderkid/README.md')
-rw-r--r--node_modules/renderkid/README.md189
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)