1 | # RenderKid
|
2 | [![Build Status](https://secure.travis-ci.org/AriaMinaei/RenderKid.png)](http://travis-ci.org/AriaMinaei/RenderKid)
|
3 |
|
4 | 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.
|
5 |
|
6 | ## Installation
|
7 |
|
8 | Install with npm:
|
9 | ```
|
10 | $ npm install renderkid
|
11 | ```
|
12 |
|
13 | ## Usage
|
14 |
|
15 | ```coffeescript
|
16 | RenderKid = require('renderkid')
|
17 |
|
18 | r = new RenderKid()
|
19 |
|
20 | r.style({
|
21 | "ul": {
|
22 | display: "block"
|
23 | margin: "2 0 2"
|
24 | }
|
25 |
|
26 | "li": {
|
27 | display: "block"
|
28 | marginBottom: "1"
|
29 | }
|
30 |
|
31 | "key": {
|
32 | color: "grey"
|
33 | marginRight: "1"
|
34 | }
|
35 |
|
36 | "value": {
|
37 | color: "bright-white"
|
38 | }
|
39 | })
|
40 |
|
41 | output = r.render("
|
42 | <ul>
|
43 | <li>
|
44 | <key>Name:</key>
|
45 | <value>RenderKid</value>
|
46 | </li>
|
47 | <li>
|
48 | <key>Version:</key>
|
49 | <value>0.2</value>
|
50 | </li>
|
51 | <li>
|
52 | <key>Last Update:</key>
|
53 | <value>Jan 2015</value>
|
54 | </li>
|
55 | </ul>
|
56 | ")
|
57 |
|
58 | console.log(output)
|
59 | ```
|
60 |
|
61 | ![screenshot of usage](https://github.com/AriaMinaei/RenderKid/raw/master/docs/images/usage.png)
|
62 |
|
63 | ## Stylesheet properties
|
64 |
|
65 | ### Display mode
|
66 |
|
67 | Elements can have a `display` of either `inline`, `block`, or `none`:
|
68 | ```coffeescript
|
69 | r.style({
|
70 | "div": {
|
71 | display: "block"
|
72 | }
|
73 |
|
74 | "span": {
|
75 | display: "inline" # default
|
76 | }
|
77 |
|
78 | "hidden": {
|
79 | display: "none"
|
80 | }
|
81 | })
|
82 |
|
83 | output = r.render("
|
84 | <div>This will fill one or more rows.</div>
|
85 | <span>These</span> <span>will</span> <span>be</span> in the same <span>line.</span>
|
86 | <hidden>This won't be displayed.</hidden>
|
87 | ")
|
88 |
|
89 | console.log(output)
|
90 | ```
|
91 |
|
92 | ![screenshot of usage](https://github.com/AriaMinaei/RenderKid/raw/master/docs/images/display.png)
|
93 |
|
94 |
|
95 | ### Margin
|
96 |
|
97 | Margins work just like they do in browsers:
|
98 | ```coffeescript
|
99 | r.style({
|
100 | "li": {
|
101 | display: "block"
|
102 |
|
103 | marginTop: "1"
|
104 | marginRight: "2"
|
105 | marginBottom: "3"
|
106 | marginLeft: "4"
|
107 |
|
108 | # or the shorthand version:
|
109 | "margin": "1 2 3 4"
|
110 | },
|
111 |
|
112 | "highlight": {
|
113 | display: "inline"
|
114 | marginLeft: "2"
|
115 | marginRight: "2"
|
116 | }
|
117 | })
|
118 |
|
119 | r.render("
|
120 | <ul>
|
121 | <li>Item <highlgiht>1</highlight></li>
|
122 | <li>Item <highlgiht>2</highlight></li>
|
123 | <li>Item <highlgiht>3</highlight></li>
|
124 | </ul>
|
125 | ")
|
126 | ```
|
127 |
|
128 | ### Padding
|
129 |
|
130 | See margins above. Paddings work the same way, only inward.
|
131 |
|
132 | ### Width and Height
|
133 |
|
134 | Block elements can have explicit width and height:
|
135 | ```coffeescript
|
136 | r.style({
|
137 | "box": {
|
138 | display: "block"
|
139 | "width": "4"
|
140 | "height": "2"
|
141 | }
|
142 | })
|
143 |
|
144 | r.render("<box>This is a box and some of its text will be truncated.</box>")
|
145 | ```
|
146 |
|
147 | ### Colors
|
148 |
|
149 | You can set a custom color and background color for each element:
|
150 |
|
151 | ```coffeescript
|
152 | r.style({
|
153 | "error": {
|
154 | color: "black"
|
155 | background: "red"
|
156 | }
|
157 | })
|
158 | ```
|
159 |
|
160 | 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`.
|
161 |
|
162 | ### Bullet points
|
163 |
|
164 | Block elements can have bullet points on their margins. Let's start with an example:
|
165 | ```coffeescript
|
166 | r.style({
|
167 | "li": {
|
168 | # To add bullet points to an element, first you
|
169 | # should make some room for the bullet point by
|
170 | # giving your element some margin to the left:
|
171 | marginLeft: "4",
|
172 |
|
173 | # Now we can add a bullet point to our margin:
|
174 | bullet: '"-"'
|
175 | }
|
176 | })
|
177 |
|
178 | # The four hyphens are there for visual reference
|
179 | r.render("
|
180 | ----
|
181 | <li>Item 1</li>
|
182 | <li>Item 2</li>
|
183 | <li>Item 3</li>
|
184 | ----
|
185 | ")
|
186 | ```
|
187 | And here is the result:
|
188 |
|
189 | ![screenshot of bullet points, 1](https://github.com/AriaMinaei/RenderKid/raw/master/docs/images/bullets-1.png)
|