From 26105034da4fcce7ac883c899d781f016559310d Mon Sep 17 00:00:00 2001 From: ruki Date: Thu, 8 Nov 2018 00:38:48 +0800 Subject: switch to vuepress --- node_modules/renderkid/README.md | 189 +++++++++++++++++++++++++++++++++++++++ 1 file changed, 189 insertions(+) create mode 100644 node_modules/renderkid/README.md (limited to 'node_modules/renderkid/README.md') diff --git a/node_modules/renderkid/README.md b/node_modules/renderkid/README.md new file mode 100644 index 00000000..b98f93d5 --- /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(" + +") + +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(" +
This will fill one or more rows.
+These will be in the same line. +This won't be displayed. +") + +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(" + +") +``` + +### 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(" +---- +
  • Item 1
  • +
  • Item 2
  • +
  • Item 3
  • +---- +") +``` +And here is the result: + +![screenshot of bullet points, 1](https://github.com/AriaMinaei/RenderKid/raw/master/docs/images/bullets-1.png) -- cgit v1.2.3