# bs-flexboxgrid

> This is a small wrapper written around the `flexboxgrid` (http://flexboxgrid.com/) library. It's not written in a way to eliminate the CSS by using BS-CSS, but rather as a wrapper for the classes. It's API is similarly implemented to the `react-styled-fle

Latest version **3.0.0** (published 2021-05-20) · MIT license · 0 weekly downloads

## Install

```sh
npm install bs-flexboxgrid
pnpm add bs-flexboxgrid
yarn add bs-flexboxgrid
bun add bs-flexboxgrid
```

## Health

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

Positive: no vulnerabilities.

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

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 3.0.0 |
| Published | 2021-05-20 |
| First published | 2019-12-29 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 524.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 5 |
| Author | RWJ Peelen |
| Maintainers | rolandpeelen |
| Keywords | BuckleScript, ReasonReact, reason-react |

## Links

- npm: https://www.npmjs.com/package/bs-flexboxgrid
- Repository: https://github.com/rolandpeelen/bs-flexboxgrid
- npm.io page: https://npm.io/package/bs-flexboxgrid

## Dependencies (1)

- [flexboxgrid](https://npm.io/package/flexboxgrid.md) ^6.3.1

## Recent versions

- 3.0.0 (latest) — 2021-05-20
- 2.1.4 — 2021-02-09
- 2.1.3 — 2020-12-16
- 2.1.2 — 2020-12-16
- 2.1.1 — 2020-12-16
- 2.1.0 — 2020-10-26
- 2.0.0 — 2020-06-24
- 1.1.1 — 2020-01-02
- 1.1.0 — 2020-01-02
- 1.0.0 — 2019-12-29

## README

# bs-flexboxgrid
This is a small wrapper written around the `flexboxgrid` (http://flexboxgrid.com/) library. It's not written in a way to eliminate the CSS by using BS-CSS, but rather as a wrapper for the classes. It's API is similarly implemented to the `react-styled-flexboxgrid` (https://www.npmjs.com/package/react-styled-flexboxgrid).

# Usage
## Installation 
1. Install
```
yarn add bs-flexboxgrid
```
2. Add `bs-flexboxgrid` to your `bsconfig`
3. Namespace is `Flexboxgrid` (i.e. `Flexboxgrid.Row` or `Flexboxgrid.Col` or `open Flexboxgrid`)

## Types 
Types are similar to the `bs-css` ones in language.
```
type breakpoint = [
  | `none
  | `xs
  | `sm
  | `md
  | `lg 
];
```

## Row
NOTE - To keep the interface as clean as possible, all values, while technically optional, have defaulted fallbacks so no need for `Some(value)`.
```typescript
<Row start=breakpoint?
     center=breakpoint?
     _end=breakpoint?
     top=breakpoint?
     middle=breakpoint?
     bottom=breakpoint?
     around=breakpoint?
     between=breakpoint?
     reverse=boolean?
     className=string?>
 ...someStuff
</Row>
```

## Column
NOTE - To keep the interface as clean as possible, all values, while technically optional, have defaulted fallbacks, so no need for `Some(value)`.
```typescript
<Col fluid=breakpoint?
     first=breakpoint?
     last=breakpoint?
     xs=int?
     sm=int?
     md=int?
     lg=int?
     xsOffset=int?
     smOffset=int?
     mdOffset=int?
     lgOffset=int?
     className=string?>
 ...someStuff
</Col>
```

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