Skip to content

Commit

Permalink
Update README.md
Browse files Browse the repository at this point in the history
Improve documentation by adding links to the npm package page,
  • Loading branch information
jonathantneal authored Oct 25, 2018
1 parent e8ed0a1 commit 1738250
Showing 1 changed file with 34 additions and 16 deletions.
50 changes: 34 additions & 16 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,16 +1,19 @@
# postcss-calc [![Build Status](https://travis-ci.org/postcss/postcss-calc.png)](https://travis-ci.org/postcss/postcss-calc)
# PostCSS Calc [<img src="https://postcss.github.io/postcss/logo.svg" alt="PostCSS" width="90" height="90" align="right">][PostCSS]

> [PostCSS](https://github.com/postcss/postcss) plugin to reduce `calc()`.
[![NPM Version][npm-img]][npm-url]
[![Build Status][cli-img]][cli-url]
[![Support Chat][git-img]][git-url]

This plugin reduce `calc()` references whenever it's possible.
This can be particularly useful with the [postcss-custom-properties](https://github.com/postcss/postcss-custom-properties) plugin.
[PostCSS Calc] lets you reduce `calc()` references whenever it's possible. This
can be particularly useful with the [PostCSS Custom Properties] plugin.

**Note:** When multiple units are mixed together in the same expression, the `calc()` statement is left as is, to fallback to the [w3c calc() feature](http://www.w3.org/TR/css3-values/#calc).
When multiple units are mixed together in the same expression, the `calc()`
statement is left as is, to fallback to the [W3C calc() implementation].

## Installation

```console
$ npm install postcss-calc
```bash
npm install postcss-calc
```

## Usage
Expand All @@ -31,7 +34,7 @@ var output = postcss()
.css
```

**Example** (with [postcss-custom-properties](https://github.com/postcss/postcss-custom-properties) enabled as well):
**Example** (with [PostCSS Custom Properties] enabled as well):

```js
// dependencies
Expand Down Expand Up @@ -86,7 +89,7 @@ h1 {
}
```

Checkout [tests](src/__tests__/index.js) for more examples.
Checkout [tests] for more examples.

### Options

Expand All @@ -103,7 +106,8 @@ var out = postcss()

#### `preserve` (default: `false`)

Allow you to preserve calc() usage in output so browsers will handle decimal precision themselves.
Allow you to preserve calc() usage in output so browsers will handle decimal
precision themselves.

```js
var out = postcss()
Expand Down Expand Up @@ -157,15 +161,29 @@ div[data-size="calc(3*3)"] {

## Contributing

Work on a branch, install dev-dependencies, respect coding style & run tests before submitting a bug fix or a feature.
Work on a branch, install dev-dependencies, respect coding style & run tests
before submitting a bug fix or a feature.

```console
$ git clone https://github.com/postcss/postcss-calc.git
$ git checkout -b patch-1
$ npm install
$ npm test
```bash
git clone git@github.com:postcss/postcss-calc.git
git checkout -b patch-1
npm install
npm test
```

## [Changelog](CHANGELOG.md)

## [License](LICENSE)

[cli-img]: https://img.shields.io/travis/postcss/postcss-calc/master.svg
[cli-url]: https://travis-ci.org/postcss/postcss-calc
[git-img]: https://img.shields.io/badge/support-chat-blue.svg
[git-url]: https://gitter.im/postcss/postcss
[npm-img]: https://img.shields.io/npm/v/postcss-calc.svg
[npm-url]: https://www.npmjs.com/package/postcss-calc

[PostCSS]: https://github.com/postcss
[PostCSS Calc]: https://github.com/postcss/postcss-calc
[PostCSS Custom Properties]: https://github.com/postcss/postcss-custom-properties
[tests]: src/__tests__/index.js
[W3C calc() implementation]: https://www.w3.org/TR/css3-values/#calc-notation

0 comments on commit 1738250

Please sign in to comment.