0.0.13 • Published 9 years ago
debonair v0.0.13
Debonair
npm install debonair
Homepage: http://brochington.github.io/debonair
Debonair is a library created to assist in the creation, organization, and editing of styles within the context of React (and hopefully React-Native). It brings many priciples and concepts of a functional programming paradigm into the way we interact with styles.
Features
- Use Composition to create Styles!
- Simplifies thought process when contructing styles.
- Enables strong code reuse patterns.
- Loves ES6 conventions.
Example
import { Styler } from "debonair";
/*
create an instance of a styler, which is just a functor that will return a react style prop compatible object.
*/
let standardBox = Styler.create({
height: 100,
width: 100
});
let fancyBorder = styler.create({
border: "dashed blue 3px"
});
let fancyBox = standardBox(fancyBorder);
/*
{
height: 100,
width: 100,
border: "dashed blue 3px"
}
*/
let bigFancyBox = standardBox(
standardBox.map(val => val + 200),
fancyBorder,
{backgroundColor: "orange"}
);
/*
{
height: 300,
width: 300,
border: "dashed blue 3px",
backgroundColor: "orange"
}
*/
Installation
npm install debonair
In ES6:
import { Debonair, Styler } from "debonair";
Require:
var Styler = require("debonair").Styler;
Build
Debonair uses Webpack to build the library.
Make sure you have webpack installed
$ npm install webpack -g
Build bundle
$ webpack
for Production (uglified):
$ webpack -p
Tests:
$ karma start