Rev.pullInto(this) 'Row', 'Col'

Rev.registerExample 'Grid <Row> & <Col>',
  render: ->
    <div>
      <hr />
      <h3>Basic</h3>
      <Row>
        <Col small="2" large="4">Col</Col>
        <Col small="4" large="4">Col</Col>
        <Col small="6" large="4">Col</Col>
      </Row>
      <Row>
        <Col large="3">Col</Col>
        <Col large="6">Col</Col>
        <Col large="3">Col</Col>
      </Row>
      <Row>
        <Col small="6" large="2">Col</Col>
        <Col small="6" large="8">Col</Col>
        <Col small="12" large="2">Col</Col>
      </Row>
      <Row>
        <Col small="3">Col</Col>
        <Col small="9">Col</Col>
      </Row>
      <Row>
        <Col large="4">Col</Col>
        <Col large="8">Col</Col>
      </Row>
      <Row>
        <Col small="6" large="5">Col</Col>
        <Col small="6" large="7">Col</Col>
      </Row>
      <Row>
        <Col large="6">Col</Col>
        <Col large="6">Col</Col>
      </Row>
      <hr />
      <h3>Small Grid</h3>
      <Row>
        <Col small="2">2 columns</Col>
        <Col small="10">10 columns</Col>
      </Row>
      <Row>
        <Col small="3">3 columns</Col>
        <Col small="9">9 columns</Col>
      </Row>
      <hr />
      <h3>Medium Grid</h3>
      <Row>
        <Col medium="2">2 columns</Col>
        <Col medium="10">10 columns</Col>
      </Row>
      <Row>
        <Col medium="3">3 columns</Col>
        <Col medium="9">9 columns</Col>
      </Row>
      <hr />
      <h3>Offsets</h3>
      <Row>
        <Col large="1">Col</Col>
        <Col large="11">Col</Col>
      </Row>
      <Row>
        <Col large="1">1</Col>
        <Col large="10" largeOffset="1">10, offset 1</Col>
      </Row>
      <Row>
        <Col large="1">1</Col>
        <Col large="9" largeOffset="2">9, offset 2</Col>
      </Row>
      <Row>
        <Col large="1">1</Col>
        <Col large="8" largeOffset="3">8, offset 3</Col>
      </Row>
      <hr />
      <h3>Advanced</h3>
      <Row>
        <Col small="8">8
          <Row>
            <Col small="8">8 Nested
              <Row>
                <Col small="8">8 Nested Again</Col>
                <Col small="4">4</Col>
              </Row>
            </Col>
            <Col small="4">4</Col>
          </Row>
        </Col>
        <Col small="4">4</Col>
      </Row>
      <hr />
      <Row collapse>
        <Col large=6 className="exampleRowCollapseColumn">
          These are columns
        </Col>
        <Col large=6 className="exampleRowCollapseColumn">
          in a collapsed row
        </Col>
      </Row>
      <hr />
      <h3>Incomplete Rows</h3>
      <Row>
        <Col medium="3">3</Col>
        <Col medium="3">3</Col>
        <Col medium="3">3</Col>
      </Row>
      <Row>
        <Col medium="3">3</Col>
        <Col medium="3">3</Col>
        <Col medium="3" end>3 end</Col>
      </Row>
      <hr />
      <h3>Centered Columns</h3>
      <Row>
        <Col small="3" smallCentered>3 centered</Col>
      </Row>
      <Row>
        <Col small="6" largeCentered>6 centered</Col>
      </Row>
      <Row>
        <Col small="9" smallCentered largeUncentered>9 centered</Col>
      </Row>
      <Row>
        <Col small="11" smallCentered>11 centered</Col>
      </Row>
      <hr />
      <h3>Source Ordering</h3>
      <Row>
        <Col small="10" smallPush="2">10</Col>
        <Col small="2" smallPull="10">2, last</Col>
      </Row>
      <Row>
        <Col large="9" largePush="3">9</Col>
        <Col large="3" largePull="9">3, last</Col>
      </Row>
      <Row>
        <Col large="8">8</Col>
        <Col largePush="4" largePull="8">4, last</Col>
      </Row>
      <Row>
        <Col small="5" smallPush="7" medium="7" mediumPush="5">7</Col>
        <Col small="7" smallPull="5" medium="5" mediumPull="7">5, last</Col>
      </Row>
      <Row>
        <Col medium="6" mediumPush="6">6</Col>
        <Col medium="6" mediumPull="6">6, last</Col>
      </Row>
    </div>