# fire-grid

> > A basic grid system using [flex-box](https://css-tricks.com/snippets/css/a-guide-to-flexbox/).

Latest version **0.1.1** (published 2019-08-10) · 0 weekly downloads

## Install

```sh
npm install fire-grid
pnpm add fire-grid
yarn add fire-grid
bun add fire-grid
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.1 |
| Published | 2019-08-10 |
| First published | 2019-08-10 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 10 |
| Unpacked size | 820.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | eduardodangelo |

## Links

- npm: https://www.npmjs.com/package/fire-grid
- Homepage: https://eduardo-dangelo.github.io/fire-grid
- npm.io page: https://npm.io/package/fire-grid

## Dependencies (10)

- [react](https://npm.io/package/react.md) ^16.8.6
- [react-dom](https://npm.io/package/react-dom.md) ^16.8.6
- [typescript](https://npm.io/package/typescript.md) ^3.5.3
- [@types/jest](https://npm.io/package/@types/jest.md) ^24.0.15
- [@types/node](https://npm.io/package/@types/node.md) ^12.6.8
- [@types/react](https://npm.io/package/@types/react.md) ^16.8.23
- [react-scripts](https://npm.io/package/react-scripts.md) 3.0.1
- [@types/react-dom](https://npm.io/package/@types/react-dom.md) ^16.8.4
- [styled-components](https://npm.io/package/styled-components.md) ^4.3.2
- [@types/styled-components](https://npm.io/package/@types/styled-components.md) ^4.1.18

## Recent versions

- 0.1.1 (latest) — 2019-08-10
- 0.1.0 — 2019-08-10

## README

# Fire Grid
> A basic grid system using [flex-box](https://css-tricks.com/snippets/css/a-guide-to-flexbox/).

### Components
- Container
- Row
- Col
    
### Import
 
You can import any component individually:
 
`import Row from './common/grid/Row';`
 
or use multiple imports from the root folder:
 
`import { Row, Col } from './common';`

## Usage
 
```
<Container>
  <Row>
    <Col size={1/3}>
      you code here...
    </Col> 
    <Col size={2/3}>
      you code here too...
    </Col> 
  </Row>
</Container>
```

## Components
   
### Container
> Add a max-width of `1370px` and margin `auto` to center-align it self.

##### Props:

Name | Type | Default Value | Example
---------- | -------- | ------ | ----------
`maxWidth` | `number` | `1370` | `<Container maxWidth={400}/>`

### Row
> Display `flex` and adds a marginX of `-12px` and margin-bottom of `24px`.

##### Props:

Name | Type | Default Value | Example
---------- | -------- | ------ | ----------
`alignItems` | `string` | `stretch` | [check guide for available values](https://css-tricks.com/snippets/css/a-guide-to-flexbox/).
`justifyContent` | `string` | `stretch` | [check guide for available values](https://css-tricks.com/snippets/css/a-guide-to-flexbox/).

### Col
> Add a paddingX of `12px`.

##### Props:

Name | Type | Default Value | Example
---------- | -------- | ------ | ----------
`size` | `number` or `object` | `auto (equal divided)` | `size={1}` `size={{ xs: 1, sm: 0.5 }}`

#### Size:
> By default `<Col/>` will be divided equally. Use `size={1}` for a full-width column or any fraction for 
custom sizes. Ex: `size={0.5}` or `size={1 / 2}` for a half size column.

##### Breakpoints:
> There is 5 breakpoint for Col size. You can use by just declaring the breakpoints as an object. 

>Ex: `<Col size={{ md: 1, lg: 0.5 }}/>`

xs | sm |  md | lg | xl 
--- | --- | --- | --- | ---
0 (auto) | 540px | 720px | 960px | 1200px

## Extra
> *It is NOT required to add a `<Container />` to use `<Row/>` & `<Col/>`*

> *It is required to add a `<Row />` to use `<Col/>`*

> *Avoid use numbers larger than `1` to define `<Col/>` sizes. Ex:*

###### Wrong:
```
<Row>
  <Col size={2} />
  <Col size={1} /> 
</Row>
```

###### Right:
```
<Row>
  <Col size={1} />
  <Col size={0.5} /> 
</Row>
```

---
_Source: https://npm.io/package/fire-grid · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._