Skeleton

JSX source:

<Grid>
  <h5>Rendered output:</h5>
  <Row>
    <Column size="2">Two</Column>
    <Column size="10">Ten</Column>
  </Row>
  <Row>
    <Column size="1/2">1/2</Column>
    <Column size="1/2">1/2</Column>
  </Row>
  <Row>
    <Column size="4" offset="2">Four, offset by Two</Column>
    <Column size="6">Six</Column>
  </Row>
</Grid>

Components generated with:

var skeleton = {
  components: {
    'Grid': 'div.container'
  , 'Row': 'div.row'
  , 'Column(size, offset)': 'div.{columnSize(size, offset)}'
  },

  functions: {
    columnSize(size, offset) {
      if (!size) {
        throw new Error('Column size must be specified.')
      }
      if (typeof columnSizes[size] == 'undefined') {
        throw new Error('Unknown Column size: ' + size)
      }
      if (offset && typeof columnSizes[offset] == 'undefined') {
        throw new Error('Unknown Column offset: ' + offset)
      }
      var parts = [columnSizes[size], 'column' + (singularSizes[size] ? '' : 's')]
      if (offset) {
        parts.push('offset-by-' + columnSizes[offset])
      }
      return parts.join(' ')
    }
  }
}

var {Grid, Row, Column} = ReactDSL(skeleton)