css-verbose
v0.3.0
Published
A verbose library for smoother CSS-in-JS
Downloads
6
Readme
CSS Verbose
This library is for users of CSS-in-JS (pure React, Radium, Aphrodite or whatever).
It provides an API close to real CSS for a more meaningful approach of CSS-in-JS.
Install
npm install css-verbose --save
Usage
// ES6
import { rgba } from 'css-verbose';
// CommonJS
const CssVerbose = require('css-verbose');
...
render() {
return (
<div style={styles}>
Lorem Ipsum
</div>
);
}
let styles = {
color: 'red',
// ES6
backgroundColor: rgba(45, 65, 77, 0.98),
// CommonJS
backgroundColor: CssVerbose.rgba(45, 65, 77, 0.98)
};
Features
This module is under development, feel free to open an issue to submit an idea that will ease your pain!
Note that all these examples assume that you used ES6 imports. If you still use CommonJS's require, simply add the name of your object before the function name.
Units
You can use an helper to convert a number to a CSS unit:
CSS:
{
width: 100px;
height: 10em;
margin-top: 1%;
}
JS:
{
width: (100).px(),
height: (10).em(),
marginTop: (1).percents();
}
Note that most of helpers here will convert standard numbers to px unit if needed.
Colors
Colors helpers are working the exact same way as CSS functions:
CSS:
{
background-color: rgb(150, 34, 78);
color: rgba(70, 45, 12, 0.4);
}
JS:
{
backgroundColor: rgb(150, 34, 78),
color: rgba(70, 45, 12, 0.4)
}
Margin / Padding
Two helpers margin() and padding() are provided to handle margin and padding, which both act the same. They will automatically convert standard numbers to pixels:
CSS:
{
margin: 10px 40px 1% 6em;
padding: 50px 3px;
}
JS:
{
margin: margin(10, 40, (1).percents(), (6).em()),
padding: padding(50, 3)
}
Borders
A border() helper is provided to handle borders. The style parameter is mandatory. If you only provide 2 parameters, it will assume that they are the width and the style. It will automatically convert standard numbers to pixels:
CSS:
{
border: 3px solid rgb(0, 230, 54);
}
JS:
{
border: border(3, 'solid', rgb(0, 230, 54))
}