diff --git a/Creating-a-plugin.md b/Creating-a-plugin.md
index ab8ea1d..22b540c 100644
--- a/Creating-a-plugin.md
+++ b/Creating-a-plugin.md
@@ -161,6 +161,54 @@ On windows:
Now open `http://localhost:9001/apples` in your browser.
+# Respects some rules for styling your plugin
+
+### Basic template for a button icon in toolbar
+```html
+
+
+```
+See [How to add new icon to etherpad](https://github.com/ether/etherpad-lite/wiki/Adding-a-new-font-icon-to-fontawesome-etherpad)
+
+### Basic template for a popup
+```html
+
+
+
+
+
+```
+
+And to open/close it from javascript
+```js
+$('#my-popup-id').addClass('popup-show'); // show
+$('#my-popup-id').removeClass('popup-show'); // hide
+```
+
+Check how it is done in [ep_hyper_link](https://github.com/seballot/ep_embedded_hyperlinks2/tree/master/templates) for a simple example
+
+### Basic template for a button
+```html
+
+
+```
+`btn-primary` is a colored button quite visible, use it for action like save, submit...
+`btn-default` is a more discreet button, use it for action like cancel, go back...
+
+### Insert vertical containers (such as table of content, comments...)
+
+use `eejsBlock_editorContainerBox` hook, have a look how it is done on [ep_table_of_contents](https://github.com/JohnMcLear/ep_table_of_contents/blob/master/ep.json) for a simple example
+
+### General rules
+- Do not change font property (`font-family` and `font-size`) inside your plugin, just use inherit one
+- Do not change the color or size of the text, use inherited values. If you want bigger text, use headings `h1` or `h2`
+- Try to not use absolute positioning everywhere, [flexboxes](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) are often much more efficient
+- Do not add property to the main DOM object like the `#editorcontainerbox`, or `#outerdocbody iframe`
+
# Writing and running front-end tests for your plugin
Etherpad allows you to easily create front-end tests for plugins.