falconjs-component-flexgrid

12 Column Flex Grid Component for FalconJS

Getting Started

inside your FalconJS App directory

• Install the package npm install --save falconjs-component-flexgrid or yard add falcon-js-component-flexgrid

• Import inside your App

    import {Row, Col} from 'falconjs-component-flexgrid'
    import 'falconjs-component-flexgrid/dist/index.css'

Usage

Baseline

In Rows use the gutter property for spacing. In Columns use the span property to define the span of the column on the 12 grid

    <Row gutter={40} >
          <Col span={4}><div>1</div></Col>
          <Col span={4}><div>2</div></Col>
          <Col span={4}><div>3</div></Col>
    </Row>

Offset

Offset the position of the column to the right.

   <Row gutter={20}>
          <Col span={4} offset={4}> <div>Span 4 | Offset 4</div></Col>
          <Col span={4}><div>Span 4</div></Col>
   </Row>

#### Order Sort the columns within <Row>

    <Row gutter={20}>
        <Col span={4} order={3}><div>C</div></Col>
        <Col span={4} order={2}><div>B</div></Col>
        <Col span={4} order={1}><div>A</div></Col>
    </Row>

Align and Distribute

justify to distribute the columns inside the row options: start, center, end, space-between, and space-around code snippet <Row justify="center">

vertical to vertical align the columnds inside the row options: top, middle, bottom code snippet <Row vertical="top">

Flexbox parameters can be passed to Row to align and distribute the columns inside it.

Vertical alignment

        <Row gutter={20} justify="center" vertical="bottom">
          <Col span={4} > <div class="tall">Tall</div></Col>
          <Col span={4} > <div class="medium">Medium</div> </Col>
          <Col span={4} > <div class="short">Short</div></Col>
        </Row>

        <Row gutter={20} justify="center" vertical="middle">
          <Col span={4} > <div class="tall">Tall</div></Col>
          <Col span={4} > <div class="medium">Medium</div> </Col>
          <Col span={4} > <div class="short">Short</div></Col>
        </Row> 

        <Row gutter={20} justify="center" vertical="top">
          <Col span={4} > <div class="tall">Tall</div></Col>
          <Col span={4} > <div class="medium">Medium</div> </Col>
          <Col span={4} > <div class="short">Short</div></Col>
        </Row>   

Distribute (Justify)

        <Row gutter={20} justify="start">
          <Col span={3} > <div class="tall">Tall</div></Col>
          <Col span={3} > <div class="medium">Medium</div> </Col>
          <Col span={3} > <div class="short">Short</div></Col>
        </Row>

        <Row gutter={20} justify="center">
          <Col span={3} > <div class="tall">Tall</div></Col>
          <Col span={3} > <div class="medium">Medium</div> </Col>
          <Col span={3} > <div class="short">Short</div></Col>
        </Row>

        <Row gutter={20} justify="end">
          <Col span={3} > <div class="tall">Tall</div></Col>
          <Col span={3} > <div class="medium">Medium</div> </Col>
          <Col span={3} > <div class="short">Short</div></Col>
        </Row>

        <Row gutter={20} justify="space-between">
          <Col span={3} > <div class="tall">Tall</div></Col>
          <Col span={3} > <div class="medium">Medium</div> </Col>
          <Col span={3} > <div class="short">Short</div></Col>
        </Row>

        <Row gutter={20} justify="space-around">
          <Col span={3} > <div class="tall">Tall</div></Col>
          <Col span={3} > <div class="medium">Medium</div> </Col>
          <Col span={3} > <div class="short">Short</div></Col>
        </Row>

Responsive

dimension xs, sm, md, lg, xl

        <Row gutter={20} justify="center" vertical="top">
          <Col xs={12} sm={12}  md={4} lg={6} xl={6}><div> xs-12 sm-12 md-4 lg-6 xl-6</div></Col>
          <Col xs={12} sm={12} md ={8} lg={6} xl={6}><div> sm-12 sm-12 md-8 lg-6 xl-6</div></Col>
        </Row>

*note: span and offset can be defined as a property of the query like so md={{ span:4, offset: 4}}

Component Properties

Row

<Row>

Property	Description	Type	Default	Options
vertical	Vertical alignment of the Columns inside the Row	String	start	start, middle, botoom
gutter	Spacing between columns	Number	0	0 to ...
justify	Horizontal distributionon the columns	String	start	start,end,center, space-around, space-between

Col

<Col>

Property	Description	Type	Default	Note
span	Number of Cells to be occupied by the Columns	Number	none	setting setting the value to 0 would yield display:none to the Column
offset	cell offset from the left of the Column	Number	0
order	column number in row	Number	node	This will result to sorting of the Columns inside a particular row
xs	<768px and also default setting, could be a span value or a object contain above props	Number or Object		media query
sm	≥768px, could be a span value or a object contain above props	Number or Object		media query
md	≥992px, could be a span value or a object contain above props	Number or Object		media query
lg	≥1200px, could be a span value or a object contain above props	Number or Object		media query
xl	≥1600px, could be a span value or a object contain above props	Number or Object		media query

Contributions and request are welcome!

Please Fork and submit PR

Testing

Prerequesite on testing install parcel to install npm i -g parcel-bundler

• Clone this repo git clone https://github.com/jmdisuanco/falconjs-component-flexgid
• cd falcon-js-component-flexgrid
• npm start
• the demo will be served on http://localhost:8000

Base on

This is based on FalconJS flex grid component is based on Abraztsov's ReactSimpleFlexGrid