Skip to content

Commit 9a3db86

Browse files
committed
Update README
1 parent 859eb27 commit 9a3db86

File tree

1 file changed

+17
-9
lines changed

1 file changed

+17
-9
lines changed

README.md

Lines changed: 17 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,10 @@
22

33
This is an embeddable component that you can include into your website to visualise RNA secondary structures.
44

5-
This plugin is written in React/Redux. It is bundled as a Web Component, so it should not clash with your website's
6-
javascript or CSS.
7-
85
## How to use
96

107
To use the latest stable version without worrying about updates, use the component's javascript package available at
11-
Github:
8+
GitHub:
129

1310
`<script type="text/javascript" src="https://rnacentral.github.io/r2dt-web/dist/r2dt-web.js"></script>`
1411

@@ -71,7 +68,7 @@ For a minimal example, see [urs-example.html](./urs-example.html).
7168

7269
## Installation
7370

74-
Download this package directly from Github.
71+
Download this package directly from GitHub.
7572

7673
`git clone https://github.com/RNAcentral/r2dt-web.git`
7774

@@ -104,6 +101,19 @@ Parameters that you can use to customise some elements of this embeddable compon
104101

105102
## Developer details
106103

104+
When integrating the r2dt-web component into your webpage, please be aware that its styles might conflict
105+
with the existing styles of your page. To prevent such CSS conflicts and ensure proper isolation of the
106+
component's styles, you can add the following lines to your webpage's CSS file:
107+
108+
```
109+
r2dt-web {
110+
all: initial;
111+
}
112+
```
113+
114+
This will reset all inherited styles for the r2dt-web component, minimizing the chances of unintended
115+
style interference.
116+
107117
### Local development
108118

109119
1. `npm install`
@@ -116,10 +126,8 @@ Parameters that you can use to customise some elements of this embeddable compon
116126

117127
### Notes
118128

119-
This embed is implemented as a Web Component, wrapping a piece of code in React/Redux.
120-
121-
Being a Web Component, it isolates CSS styles from the main page to avoid clash of styles with it.
122-
The CSS styles and fonts are bundled into the javascript inline via Webpack 3 build system, see webpack.config.js file.
129+
This embed is implemented as a Web Component, wrapping a piece of code in React/Redux.
130+
The CSS styles and fonts are bundled into the javascript inline via Webpack build system, see webpack.config.js file.
123131
Upon load of r2dt-web.js, the component registers itself in the custom elements registry.
124132

125133
Web Components accept input parameters as strings. That means that we have to parse parameters in Web Component

0 commit comments

Comments
 (0)