siddharthkp / Css Constructor
Programming Languages
Labels
Projects that are alternatives of or similar to Css Constructor
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
--
Usage
-
npm install css-constructor --save
-
import css from 'css-constructor'
-
Add a
@css
block just before therender
function (important) -
Add
transform-decorators-legacy
as the firstplugin
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.
--
How does it work?
๐ uses ES7 class method decorators on the render function. Detailed post coming soon.
Inspiration
Heavily inspired from glamor, styled-components and radium
Special thanks to thysultan. stylis is the bomb!
Support
โญ๏ธ this repo!