Skip to content

Commit

Permalink
Update package.json and README
Browse files Browse the repository at this point in the history
  • Loading branch information
@cognitom
cognitom committed Mar 15, 2017
1 parent 113d7a2 commit b70b52b
Show file tree
Hide file tree
Showing 2 changed files with 27 additions and 119 deletions.
117 changes: 23 additions & 94 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,19 +4,14 @@

> Front-end printing solution - previewable and live-reloadable!
Recently, we say "front-end" everyday. Then why don't we make the printing documents in front-end? We believe we can make it perfectly without back-end. Paper CSS is just [a small snippet of CSS](https://raw.githubusercontent.com/cognitom/paper-css/master/paper.css), but it helps us create them in browser easily.

- ***New!***: HTML --> PDF generation via CLI. [See detail here](CLI).
Recently, we say "front-end" every day. Then why don't we make the printing documents in front-end? We believe we can make it perfectly without back-end. Paper CSS is just [a small snippet of CSS](https://raw.githubusercontent.com/cognitom/paper-css/master/paper.css), but it helps us create them in browser easily.

## Table of Contents

- [Installation](#installation)
- [Usage](#usage)
- [CLI](#cli)
- [preview](#preview)
- [create](#create)
- [export](#export)
- [Try](#try)
- [Basic Usage](#basic-usage)
- [Live Preview](#live-preview)
- [PDF Generation](#pdf-generation)
- Why Paper CSS?
- [Previewable](#previewable)
- [Live-reloading](#live-reloading)
Expand All @@ -28,7 +23,7 @@ Recently, we say "front-end" everyday. Then why don't we make the printing docum
Get Paper CSS from [cdnjs](https://cdnjs.com/libraries/paper-css) (recommended):

```html
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/paper-css/0.2.3/paper.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/paper-css/0.3.0/paper.css">
```

Or download [paper.css](https://raw.githubusercontent.com/cognitom/paper-css/master/paper.css) file from GitHub manually, or via npm:
Expand All @@ -37,7 +32,7 @@ Or download [paper.css](https://raw.githubusercontent.com/cognitom/paper-css/mas
$ npm install paper-css
```

## Usage
## Basic Usage

Load paper-css into `<head>` like this:

Expand All @@ -50,7 +45,7 @@ Load paper-css into `<head>` like this:
<style>@page { size: A5 }</style>
```

Set the class of `<body>` and set also "sheet" for each sheet.
Set the class of `<body>` and also set "sheet" for each sheet.

```html
<!-- Set "A5", "A4" or "A3" for class name -->
Expand All @@ -71,113 +66,47 @@ Set the class of `<body>` and set also "sheet" for each sheet.

See also [the examples](examples/) for detail.

## CLI

We have small tool for previewing and PDF generation with ease. To use Paper CSS as a CLI tool, install it in global:

```bash
$ npm install --global paper-css
```

**Note**: to use Paper CSS as just CSS, you don't have to install CLI tool.

`paper` has three subcommands:

- [preview](#preview)
- [create](#create)
- [export](#export)

### preview

Preview your HTML file with live-reloading. The command below starts the preview server and open the HTML document in your browser automatically:

```bash
$ paper preview <file>
```

You can also omit `preview` subcommand. Simply type like this:

```bash
$ paper <file>
```

If you have no document yet, check [our examples](examples/) and the next section.
## Live Preview

**Note**: `paper preview` doesn't have any option at this point.

### create

```bash
$ paper create <file>
```

Or use this shortcut: `$ paper c <file>`

All options are optional.

- `--size` or `-s`: page size - `A4`, `A5`, `A3`
- `--padding`: padding - `10mm`, `15mm`, `20mm`, `25mm`, `none`
- `--landscape` or `-l`: landscape mode

### export

Export your HTML as PDF. The command below generates a PDF file.
Install [live-server](https://github.com/tapio/live-server):

```bash
$ paper export <file>
$ npm install --global live-server
```

Or use this shortcut: `$ paper e <file>`

All options are optional.

- `--size` or `-s`: page size - `A4`, `A5`, `A3`
- `--landscape` or `-l`: in landscape orientation
- `--background` or `-b`: with background images or color
- `--wait`: waiting time (msec) before printing
- `--output` or `-o`: where to export PDF

**Note**: *the value in CSS* is prior over options above, so you don't have to set `--size` or `--landscape` basically.

Here's an example of usage:
Then, preview your HTML file:

```bash
$ paper export your-document.html --background --wait 3000 --output any/location/your-document.pdf
$ live-server your-document.html
```

## Try
Your browser will open the document. And the browser will automatically reload the page when changes are detected.

If you haven't have our CLI yet, install it:
See more detail and all options [here](https://github.com/tapio/live-server#usage-from-command-line).

```bash
$ npm install --global paper-css
```
## PDF Generation

Create an empty HTML document:
Install [electron-pdf](https://github.com/fraserxu/electron-pdf):

```bash
$ paper create first.html --size A5 --landscape

$ npm install --global electron-pdf
```

Open it in your favorite editor and open preview in the browser:
Then, generate a PDF file from your HTML file:

```bash
$ atom first.html
$ paper first.html
$ electron-pdf your-document.html your-document.pdf
```

Edit the file and save your change. Then the preview will be automatically reloaded. To export it as PDF, type a command below:
See more details and all options [here](https://github.com/fraserxu/electron-pdf#all-available-options).

```bash
$ paper export first.html
```
**Note**: we used to provide a small CLI tool `paper-css` while `v0.2.x`, we've dropped it in favor of `electron-pdf` which is a better option to do the same, basically.

## Why Paper CSS?

### Previewable

You can check the design and layout before printing. See the browser like when you build a webpage.
You can check the design and layout before printing. See the browser like when you build a web page.

![Preview](images/preview.png)

Expand All @@ -187,7 +116,7 @@ You can check the design and layout before printing. See the browser like when y

### Live-reloading

It's just HTML/CSS, so we can edit it with live-reloading. See [preview](#preview) section above.
It's just HTML/CSS, so we can edit it with live-reloading. See [Live Preview](#live-preview) section above.

![Live reloading](images/live-reload.png)

Expand Down
29 changes: 4 additions & 25 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,6 @@
"name": "paper-css",
"version": "0.2.3",
"description": "Paper CSS for happy printing",
"bin": {
"paper": "./bin/paper.js"
},
"files": [
"bin",
"lib",
Expand All @@ -27,33 +24,15 @@
"url": "https://github.com/cognitom/paper-css/issues"
},
"homepage": "https://github.com/cognitom/paper-css",
"dependencies": {
"async-to-gen": "^1.3.0",
"connect": "^3.5.0",
"connect-livereload": "^0.6.0",
"fs-promise": "^1.0.0",
"livereload": "^0.6.0",
"meow": "^3.7.0",
"nightmare": "^2.9.1",
"opn": "^4.0.2",
"portfinder": "^1.0.10",
"reify": "^0.4.4",
"serve-static": "^1.11.1"
},
"devDependencies": {
"clean-css": "^3.4.23",
"mocha": "^3.2.0",
"request": "^2.79.0",
"request-promise-native": "^1.0.3",
"standard": "^8.6.0"
"electron-pdf": "^1.2.0",
"live-server": "^1.2.0"
},
"scripts": {
"build": "npm run minify && npm run export",
"minify": "cleancss paper.css -o paper.min.css",
"test": "npm run standard && npm run mocha",
"standard": "standard lib/* test/*",
"mocha": "mocha --require reify --require async-to-gen/register test/*.js",
"preview": "./bin/paper.js examples/receipt.html",
"export": "./bin/paper.js export examples/receipt.html --output images/receipt.pdf"
"preview": "live-server examples/receipt.html",
"export": "electron-pdf examples/receipt.html images/receipt.pdf"
}
}

0 comments on commit b70b52b

Please sign in to comment.