View on GitHub

React-skeleton

React UI framework built with the Skeleton responsive css boilerplate.

Download this project as a .zip file Download this project as a tar.gz file

react-skeleton

react-skeleton is a React UI framework built with the Skeleton responsive css boilerplate.

Installation

react-skeleton is available as an npm package

npm install react-skeleton

Usage

After you've included react-skeleton in your project you can use the components and style implementation like this:

var React = require('react');
var Button    = require('react-skeleton').Button;

var Page = React.createClass({

  render: function() {
    return (
        <Button>Default Button</Button>
        <Button primary={true}>Primary Button</Button>
    );
  }

});

module.exports = Page;

or include the whole framework like this (and use namespaced components):

var React = require('react');
var Skelton = require('react-skeleton');

var Page = React.createClass({

  render: function() {
    return (
        <Skelton.Button>Default Button</Skelton.Button>
    );
  }

});

module.exports = Page;

Styles

Styles are a proof of concept based on Christopher Chedeau's @vjeux talk at NationJS.

example :

'use strict';

var util = require('../utils');
var Variables = require('./variables');

module.exports = function(isHovered, custom) {
    var base = {
        color: '#1EAEDB',
        backgroundColor: 'transparent'
    }

    var hover = {
        color:'#0FA0CE'
    }
    return util.m(base, isHovered ? hover : {}, custom ? custom : {});
}

Allows a composition of styles as well as simple customization with the custom parameter which is props.style

getInitialState: function() {
    return {
        hover:false 
    };
},

toggleHover: function(e) {
    this.setState({hover:!this.state.hover});
},

render: function() {
    var jss = Styles.Button(this.props.primary, this.state.hover, this.props.style);
    return (
        <button style={jss} onMouseOver={this.toggleHover} onMouseOut={this.toggleHover}>{this.props.children}</button>
    );
}