Skip to content

Commit c5bdfef

Browse files
committed
Updated README.md
1 parent a0131a0 commit c5bdfef

File tree

1 file changed

+32
-35
lines changed

1 file changed

+32
-35
lines changed

README.md

Lines changed: 32 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -15,58 +15,56 @@ Inspired by the [SUIT CSS](https://suitcss.github.io/) methodology.
1515
You write:
1616

1717
```javascript
18-
/** @jsx React.DOM */
19-
20-
var Profile = React.createClass({
21-
render: function () {
22-
return (
23-
<Style sheet="
24-
& .card {
25-
cursor: pointer;
26-
margin: 15px;
27-
padding: 15px;
28-
text-align: center;
29-
height: 200px;
30-
}
31-
& img {
32-
width: 130px;
33-
height: 130px;
34-
}
35-
& p {
36-
margin: 10px;
37-
}
38-
">
39-
<div className="card">
40-
<img src="mao.jpg" />
41-
<p>Mao</p>
42-
</div>
43-
</Style>
44-
);
45-
}
46-
});
18+
var Profile = React.createClass({
19+
render: function () {
20+
return (
21+
<Style sheet="
22+
& .card {
23+
cursor: pointer;
24+
margin: 15px;
25+
padding: 15px;
26+
text-align: center;
27+
height: 200px;
28+
}
29+
& img {
30+
width: 130px;
31+
height: 130px;
32+
}
33+
& p {
34+
margin: 10px;
35+
}
36+
">
37+
<div className="card">
38+
<img src="mao.jpg" />
39+
<p>Mao</p>
40+
</div>
41+
</Style>
42+
);
43+
}
44+
});
4745
```
4846

4947
You get namespaced CSS that works on sub-components (comparable to HTML5 `<style scoped>`):
5048

5149
```html
52-
<div class="Style-4n412lnmi">
50+
<div id="InlineCss-1">
5351
<div class="card">
5452
<img src="mao.jpg">
5553
<p>Mao</p>
5654
</div>
5755
<style>
58-
.Style-4n412lnmi .card {
56+
#InlineCss-1 .card {
5957
cursor: pointer;
6058
margin: 15px;
6159
padding: 15px;
6260
text-align: center;
6361
height: 200px;
6462
}
65-
.Style-4n412lnmi img {
63+
#InlineCss-1 img {
6664
width: 130px;
6765
height: 130px;
6866
}
69-
.Style-4n412lnmi p {
67+
#InlineCss-1 p {
7068
margin: 10px;
7169
}
7270
</style>
@@ -81,8 +79,7 @@ For a cascaded effect, see the `index.html` demo.
8179

8280
## Usage
8381

84-
Run `npm run watch` in your terminal and play with `views/Main.jsx` to get a feel of
85-
the server-side rendering and client-side hot updates.
82+
Run `npm run watch` in your terminal and play with `examples.jsx` to get a feel of react-inline-css.
8683

8784
## Community
8885

0 commit comments

Comments
 (0)