Skip to content

Commit f33f2ad

Browse files
committed
Update README
1 parent a01e9dc commit f33f2ad

File tree

1 file changed

+13
-44
lines changed

1 file changed

+13
-44
lines changed

README.md

Lines changed: 13 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -1,45 +1,24 @@
11
# GrapesJS Parser PostCSS
22

3+
This plugin enables custom CSS parser via [PostCSS](https://github.com/postcss/postcss). If you import templates from HTML/CSS or embed custom codes (eg. by using [grapesjs-custom-code](https://github.com/artf/grapesjs-custom-code) plugin) you definitely need to use this one to avoid issues with styles, [check here why](http://grapesjs.com/docs/guides/Custom-CSS-parser.html#cssom-results-are-inconsistent).
34

4-
<span><a href="https://david-dm.org/artf/grapesjs-plugin-boilerplate#info=devDependencies" title="View the status of this project's development dependencies on DavidDM"><img src="https://img.shields.io/david/dev/artf/grapesjs-plugin-boilerplate.svg" alt="Dev Dependency Status" /></a></span>
5+
> Requires GrapesJS v0.14.33 or higher
56
6-
This boilerplate helps you quickly start a production ready plugin for GrapesJS. If you don't know from where to start, check this guide [Creating plugins](https://grapesjs.com/docs/modules/Plugins.html). Sections below are also used as boilerplate for your README, follow these steps below
7-
8-
### Usage
9-
1. Clone this repository `git clone https://github.com/artf/grapesjs-plugin-boilerplate.git YOUR-PLUGIN-NAME`
10-
1. Replace in all files `YOUR-PLUGIN-NAME` and `grapesjs-plugin-boilerplate` with your plugin name.
11-
**The name of your plugin depends on the `name` key in your `package.json`**
12-
1. Update all the data in `package.json`
13-
1. Install dependencies `npm i` and run the local server `npm start`
14-
1. Start creating your plugin from `src/index.js`
15-
1. Show some gif/demo if possible
16-
1. Update README
17-
1. When you're ready, build your source with `npm run build`
18-
1. Publish
197

208

219

2210

2311
## Summary
2412

25-
* Plugin name: `YOUR-PLUGIN-NAME`
26-
* Components
27-
* `new-component1`
28-
* `new-component2`
29-
* Blocks
30-
* `new-block1`
31-
* `new-block1`
32-
...
13+
* Plugin name: `grapesjs-parser-postcss`
3314

3415

3516

3617

3718

3819
## Options
3920

40-
|Option|Description|Default|
41-
|-|-|-
42-
|`option1`|Description option|`default value`|
21+
This plugin has no options
4322

4423

4524

@@ -48,11 +27,11 @@ This boilerplate helps you quickly start a production ready plugin for GrapesJS.
4827
## Download
4928

5029
* CDN
51-
* `https://unpkg.com/YOUR-PLUGIN-NAME`
30+
* `https://unpkg.com/grapesjs-parser-postcss`
5231
* NPM
53-
* `npm i YOUR-PLUGIN-NAME`
32+
* `npm i grapesjs-parser-postcss`
5433
* GIT
55-
* `git clone https://github.com/YOUR-NAME/YOUR-PLUGIN-NAME.git`
34+
* `git clone https://github.com/artf/grapesjs-parser-postcss.git`
5635

5736

5837

@@ -64,38 +43,28 @@ Directly in the browser
6443
```html
6544
<link href="https://unpkg.com/grapesjs/dist/css/grapes.min.css" rel="stylesheet"/>
6645
<script src="https://unpkg.com/grapesjs"></script>
67-
<script src="path/to/YOUR-PLUGIN-NAME.min.js"></script>
46+
<script src="path/to/grapesjs-parser-postcss.min.js"></script>
6847

6948
<div id="gjs"></div>
7049

7150
<script type="text/javascript">
7251
var editor = grapesjs.init({
7352
container : '#gjs',
7453
// ...
75-
plugins: ['YOUR-PLUGIN-NAME'],
76-
pluginsOpts: {
77-
'YOUR-PLUGIN-NAME': { /* options */ }
78-
}
54+
plugins: ['grapesjs-parser-postcss'],
7955
});
8056
</script>
8157
```
8258

8359
Modern javascript
8460
```js
8561
import grapesjs from 'grapesjs';
86-
import yourPluginName from 'YOUR-PLUGIN-NAME';
62+
import parserPostCSS from 'grapesjs-parser-postcss';
8763

8864
const editor = grapesjs.init({
8965
container : '#gjs',
9066
// ...
91-
plugins: [yourPluginName],
92-
pluginsOpts: {
93-
[yourPluginName]: { /* options */ }
94-
}
95-
// or
96-
plugins: [
97-
editor => yourPluginName(editor, { /* options */ }),
98-
],
67+
plugins: [parserPostCSS],
9968
});
10069
```
10170

@@ -108,8 +77,8 @@ const editor = grapesjs.init({
10877
Clone the repository
10978

11079
```sh
111-
$ git clone https://github.com/YOUR-NAME/YOUR-PLUGIN-NAME.git
112-
$ cd YOUR-PLUGIN-NAME
80+
$ git clone https://github.com/artf/grapesjs-parser-postcss.git
81+
$ cd grapesjs-parser-postcss
11382
```
11483

11584
Install dependencies

0 commit comments

Comments
 (0)