Bootstrap

JSX source:

<Container>
  <h2>Rendered output:</h2>
  <Row>
    <Col xs="12" md="8"><code>xs="12" md="8"</code></Col>
    <Col xs="6" md="4"><code>xs="6" md="4"</code></Col>
  </Row>
  <Row>
    <Col md="4"><code>md="4"</code></Col>
    <Col md="4" mdOffset="4"><code>md="4" mdOffset="4"</code></Col>
  </Row>
  <Row>
    <Col sm="9">
      Level 1: <code>sm="9"</code>
      <Row>
        <Col xs="8" sm="6">Level 2: <code>xs="8" sm="6"</code></Col>
        <Col xs="4" sm="6">Level 2: <code>xs="4" sm="6"</code></Col>
      </Row>
    </Col>
  </Row>
</Container>

Components generated with:

var colSizeRE = /^(?:[1-9]|1[0-2])$/

var bootstrap = {
  components: {
    'Container(fluid)': 'div.{container(fluid)}'
  , 'Row': 'div.row'
  , 'Col(xs, sm, md, lg, xsOffset, smOffset, mdOffset, lgOffset)':
      `div.col-xs-{xs}.col-sm-{sm}.col-md-{md}.col-lg-{lg}
          .col-xs-offset-{xsOffset}.col-sm-offset-{smOffset}
          .col-md-offset-{mdOffset}.col-lg-offset-{lgOffset}`
  },

  functions: {
    container(fluid) {
      return fluid ? 'container-fluid' : 'container'
    }
  }
}

var {Container, Row, Col} = ReactDSL(bootstrap)