Skip to content

Commit 9440840

Browse files
authored
Nice long README
1 parent 47c58b9 commit 9440840

File tree

1 file changed

+82
-0
lines changed

1 file changed

+82
-0
lines changed

β€ŽREADME.md

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
### CSS constructor πŸ’„ for React components
2+
3+
![beta](https://img.shields.io/badge/status-beta-yellow.svg)
4+
5+
6+
7+
Every React component gets a javascript constructor for the functional logic.
8+
9+
**Introducing the css constructor for styling!**
10+
11+
```js
12+
import React from 'react';
13+
import css from 'css-constructor';
14+
15+
export default class Hello extends React.Component {
16+
17+
/* javascript constructor */
18+
constructor (props) {
19+
super(props);
20+
}
21+
22+
/* css constructor */
23+
@css`
24+
font-size: 16px;
25+
text-align: center;
26+
color: #5AF78E;
27+
font-family: monospace;
28+
`
29+
30+
render () {
31+
return <div>Styled text!</div>
32+
}
33+
};
34+
```
35+
36+
Features:
37+
38+
πŸŽ€ Supports real css
39+
40+
πŸ”Ό Attaches **inline styles** to the highest element in your component
41+
42+
πŸ’„ Offical library emoji
43+
44+
45+
46+
*Coming soon*
47+
48+
49+
50+
πŸ”₯ use props in css
51+
52+
πŸ™‹ classes instead of inline styles
53+
54+
πŸ“± media queries support
55+
56+
57+
#### Usage
58+
59+
```
60+
npm install css-constructor --save
61+
62+
Add a @css block just before the render function (important)
63+
64+
Bonus: It also works with the offical emoji
65+
@πŸ’„`
66+
color: #FF6962;
67+
`
68+
```
69+
70+
You can start using this right away. Even though πŸ’„ is in `BETA`, the `@css` block will always remain the same.
71+
72+
73+
css-constructor πŸ’„ uses [ES7 class function decorators](https://github.com/wycats/javascript-decorators) on the render function.
74+
75+
76+
#### Inspiration
77+
78+
Heavily inspired from [glamor](https://github.com/threepointone/glamor), [styled-components](https://github.com/styled-components/styled-components) and [radium](https://github.com/FormidableLabs/radium)
79+
80+
#### Support
81+
82+
If you think πŸ’„ is useful for your project, ⭐️ this repo for my motivation πŸ™‡πŸ»

0 commit comments

Comments
Β (0)