rcss-grid v0.0.2

rcss-grid

Generate Bourbon Neat equivalent CSS output using RCSS for ReactJS.

No dependency on React or RCSS. Likely usable for react-style too.

Example usage:

var React = require('react/addons');
var Rcss = require('RCSS');
var Neat = require('rcss-grid');

Neat.column(4); // relative width in ratio
Neat.gutter(1); // relative width in ratio
Neat.directionContext('rtl'); // right to left
var outerContainer = Rcss.registerClass(Neat.outerContainer('90%'));
var row = Rcss.registerClass(Neat.row());
var one = Rcss.registerClass(Neat.spanColumns('1 of 12')); // must use of, '12' not allowed
var two = Rcss.registerClass(Neat.spanColumns('2 of 12'));
var three = Rcss.registerClass(Neat.spanColumns('3 of 12'));
var four = Rcss.registerClass(Neat.spanColumns('5 of 12'));
Neat.directionContext('ltr'); // left to right
var oneOfFour = Rcss.registerClass(Neat.spanColumns('1 of 4'));
var threeOfFour = Rcss.registerClass(Rcss.cascade(Neat.spanColumns('2 of 4'), Neat.shift('1 of 4'))); // pushed further on

var exampleOne = React.DOM.div({className:outerContainer.className}, 
	React.DOM.div({className:row.className}, 
		React.DOM.div({className:one.className}, '1 of 12'),
		React.DOM.div({className:two.className}, '2 of 12'),
		React.DOM.div({className:three.className}, '3 of 12'),
		React.DOM.div({className:four.className}, 
			React.DOM.div({className:row.className}, 
				React.DOM.div({className:oneOfFour.className}, '1 of 4'),
				React.DOM.div({className:threeOfFour.className}, '2 of 4')
			)
		),
		React.DOM.div({className:one.className}, '1 of 12')
	)
);

Rcss.injectAll(); // adds classes as CSS string to style tag

var Example = React.createFactory(React.createClass({
	displayName: 'Example',
	render: function () {
		return React.DOM.div({},
			exampleOne
		);
	}
}));

React.render(
	Example(),
	document.getElementById("example")
);