Skip to content

Commit

Permalink
📝 Add Made in Hong Kong description in doc
Browse files Browse the repository at this point in the history
  • Loading branch information
kghugo committed Aug 5, 2020
1 parent 8e64fe1 commit 9a532cc
Showing 1 changed file with 17 additions and 19 deletions.
36 changes: 17 additions & 19 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,28 +2,26 @@

# PostCSS RFS Autopilot

[![Maintainability](https://api.codeclimate.com/v1/badges/ff984c8d9c6e4277723f/maintainability)](https://codeclimate.com/github/winston0410/postcss-rfs-autopilot/maintainability) [![Known Vulnerabilities](https://snyk.io/test/github/winston0410/postcss-rfs-autopilot/badge.svg?targetFile=package.json)](https://snyk.io/test/github/winston0410/postcss-rfs-autopilot?targetFile=package.json) [![Codacy Badge](https://app.codacy.com/project/badge/Grade/5ce28bbbcc174bfdad1dabd6ab3c64f6)](https://www.codacy.com/manual/winston0410/postcss-rfs-autopilot?utm_source=github.com&utm_medium=referral&utm_content=winston0410/postcss-rfs-autopilot&utm_campaign=Badge_Grade)
[![Maintainability](https://api.codeclimate.com/v1/badges/ff984c8d9c6e4277723f/maintainability)](https://codeclimate.com/github/winston0410/postcss-rfs-autopilot/maintainability) [![Known Vulnerabilities](https://snyk.io/test/github/winston0410/postcss-rfs-autopilot/badge.svg?targetFile=package.json)](https://snyk.io/test/github/winston0410/postcss-rfs-autopilot?targetFile=package.json) [![Codacy Badge](https://app.codacy.com/project/badge/Grade/5ce28bbbcc174bfdad1dabd6ab3c64f6)](https://www.codacy.com/manual/winston0410/postcss-rfs-autopilot?utm_source=github.com&utm_medium=referral&utm_content=winston0410/postcss-rfs-autopilot&utm_campaign=Badge_Grade)

[PostCSS] A plugin that automagically mark your CSS up with `rfs()` for [RFS](https://github.com/twbs/rfs).

[PostCSS]: https://github.com/postcss/postcss

```css
/* Original Input */
/* Original Input */
.foo {
font-size: 4em;
}
```

```css
/* After the transformation of RFS Autopilot but before RFS*/
/* After the transformation of RFS Autopilot but before RFS*/
.foo {
font-size: rfs(4em);
}
```

```css
/* After the transformation of RFS*/
/* After the transformation of RFS*/
.foo {
font-size: calc(1.525rem + 3.3vw);
}
Expand All @@ -41,25 +39,24 @@

With this plugin, you just need to declare rules you want to apply `rfs()` to, and it will do the heavy-lifting for you.

## Made in Hong Kong :free: :free:

This plugin is made with love by a Hong Konger.

## Installation

As this plugin is a PostCSS plugin, you need to install and set up PostCSS first before use it.
If you haven't used PostCSS before, set it up according to [official docs](https://github.com/postcss/postcss#usage).
As this plugin is a PostCSS plugin, you need to install and set up PostCSS first before use it. If you haven't used PostCSS before, set it up according to [official docs](https://github.com/postcss/postcss#usage).

Input this command in terminal and download this PostCSS plugin.

```
npm i postcss-rfs-autopilot
```

[RFS](https://github.com/twbs/rfs) is treated as an external dependency for this plugin, thus you would need to download and include it manually in your PostCSS config as usual.

```
npm i rfs
```

After you have installed this plugin, require it **before `RFS`** in your [PostCSS configuration files, or the place where you config PostCSS in your environment](https://github.com/postcss/postcss#usage)
Expand All @@ -75,7 +72,6 @@ module.exports = {
require('rfs')
]
}

```

Now we will mark up all the values for you with `rfs()`:rocket::rocket::rocket:!
Expand Down Expand Up @@ -118,50 +114,52 @@ If you want to include all for an option, pass in `"*"` as its value.

## API Reference

###`options.includedRules`
### `options.includedRules`

Data type: `[Array]`

Default value: `[ '*' ]`

Description: Control which CSS rules you want this plugin wrap it up with `rfs()`, for example `font-size`

###`options.includedSelectors`
### `options.includedSelectors`

Data type: `[Array]`

Default value: `[ '*' ]`

Description: Control which CSS selectors you want this plugin wrap it up with `rfs()`, for example `p .free`

###`options.includedUnits`
### `options.includedUnits`

Data type: `[Array]`

Default value: `[ 'px', 'rem' ]`

Description: Control which CSS units you want this plugin wrap it up with `rfs()`, for example `px`

###`options.excludedRules`
### `options.excludedRules`

Data type: `[Array]`

Default value: `[]`

Description: Control which CSS rules you **do not** want this plugin wrap it up with `rfs()`, for example `font-size`

###`options.includedSelectors`
### `options.includedSelectors`

Data type: `[Array]`

Default value: `[]`

Description: Control which CSS selectors you **do not** want this plugin wrap it up with `rfs()`, for example `p .free`

###`options.includedUnits`
### `options.includedUnits`

Data type: `[Array]`

Default value: `[]`

Description: Control which CSS units you **do not** want this plugin wrap it up with `rfs()`, for example `px`

[postcss]: https://github.com/postcss/postcss

0 comments on commit 9a532cc

Please sign in to comment.