Every React component gets an inbuilt javascript constructor for functional logic.
Introducing the css constructor for styling!
import React from 'react';
import css from 'css-constructor'; // 👶 Super tiny: only 1.2K gzipped!
export default class Hello extends React.Component {
/* javascript constructor */
constructor (props) {
super(props);
}
/* css constructor */
@css` // 🔒 Isolated and co-located
font-size: 16px;
text-align: center; // 🎀 Supports the entirety of CSS
color: {this.props.color}; // 🔥 Use props in css
display: flex; // 💻 Built in vendor prefixing
&:hover { // 🌀 Pseudo selectors
color: #FFF;
}
img { // 👪 Nested css
border-radius: 50%;
}
#handle {
margin-top: 20px;
}
@media (max-width: 600px) { // 📱 Media queries support
& {font-size: 18px;}
}
`
render () {
return (<div> // 🔼 Attaches class to the highest element
<img src="https://github.com/siddharthkp.png"/>
<div id="handle">@siddharthkp</div>
</div>)
}
};
// <Hello color='papayawhip'/>
--
Other features
🙋 Uses classes instead of inline styles
🔧 Editable in developer tools
👶 Super tiny: only 1.2K gzipped!
💄 Official library emoji
Coming soon
🌏 server side rendering
--
npm install css-constructor --save
import css from 'css-constructor'
Add a @css block just before the render function (important)
Add transform-decorators-legacy as the first plugin in your .babelrc (already downloaded with 💄).
If you are not familiar with babel plugins you can follow the detailed instructions here.
Or, if you would prefer using 💄 without adding the babel transform for decorators, up-vote this issue.
--
💄 uses ES7 class method decorators on the render function. Detailed post coming soon.
Heavily inspired from glamor, styled-components and radium
Special thanks to thysultan. stylis is the bomb!
⭐️ this repo!
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4