https://github.com/jakewies/flexomatic

A flexbox grid system built with styled-components and based on the Solved by Flexbox implementation
https://github.com/jakewies/flexomatic

component-library flexbox javascript react styled-components

Last synced: about 2 months ago
JSON representation

A flexbox grid system built with styled-components and based on the Solved by Flexbox implementation

• Host: GitHub
• URL: https://github.com/jakewies/flexomatic
• Owner: jakewies
• Created: 2018-02-14T11:24:18.000Z (almost 7 years ago)
• Default Branch: master
• Last Pushed: 2022-12-09T08:23:02.000Z (about 2 years ago)
• Last Synced: 2024-10-17T12:11:37.265Z (2 months ago)
• Topics: component-library, flexbox, javascript, react, styled-components
• Language: JavaScript
• Homepage: https://flexomatic.netlify.com/
• Size: 1.96 MB
• Stars: 7
• Watchers: 2
• Forks: 0
• Open Issues: 16
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        


  



A component-based flexbox grid system for React, built with `styled-components` and based on the [Solved by Flexbox](https://philipwalton.github.io/solved-by-flexbox/demos/grids/) implementation.

### Why should you use this?

`flexomatic` aims to be a very simple, lightweight grid system with a flexible API that allows you to get up and running in seconds. It is based on the methodology proposed in [Solved by Flexbox](https://philipwalton.github.io/solved-by-flexbox/demos/grids/), where the goal is to expose a minimal grid system that doesn't weigh the user down with a multitude of options.

### Features

* Each `Cell` component is the same width by default

* Full control over individual `Cell` components, including width and alignment

* Responsive, with media query support

* Nested Grids

## Getting started

```

yarn add flexomatic

```

Note that `flexomatic` lists `styled-components` as a `peerDependency`, therefore it expects you to have `styled-components` already installed in your project.

```javascript

import React from 'react'

import { Grid, Cell } from 'flexomatic'

const App = () => (

  

    1

    2

    3

  

)

```

### Grid

The parent container that initializes a grid. Think of it like a row in bootstrap.

```javascript

import { Grid } from 'flexomatic'

```

**Available props**

`flexCells`

If passed to the `Grid` component, all `Cell` children will have a `display` property of `flex`.

`direction`

Sets the `flex-direction` of the grid. Available options:

* `row` (default)

* `row-reverse`

* `column`

* `column-reverse`

`align`

Aligns `Cell` children using the `align-items` style. Available options:

* `start`

* `center`

* `end`

* `baseline`

`spacing`

A string value representing the default space between `Cell` components, or the "gutters" (default: "1em").

### Cell

The individual columns of a grid.

```javascript

import { Cell } from 'flexomatic'

```

**Available props**

`flexed`

Assigns an individual `Cell`'s `display` property to `flex`. This is useful if you want to make a specific `Cell` a flex parent without doing so to its siblings.

`width`

Explicitly sets the width of a `Cell` as a percentage value using a number greater than 0 and less than or equal to 1.

```javascript

  // as number

      // width: 100%

    // width: 50%

   // width: 25%

```

You can also use keywords `full`, `half`, `third`, and `fourth`to set the width.

```javascript

  // as keyword

   // width: 100%

   // width: 50%

```

| keyword | Width  |

| ------- | ------ |

| full    | 100%   |

| half    | 50%    |

| third   | 33.33% |

| fourth  | 25%    |

**Multiple widths**

The `Cell` component supports multiple widths for different screen sizes. You can achieve this by passing an array to the `width` prop. `flexomatic` supports 3 screen sizes:

| Base | Tablet | Desktop |

| ---- | ------ | ------- |

|      | 768px  | 1024px  |

Each item in the array represents a different size.

```javascript

  // as array

  

  

  

```

The examples above will result in the styling:

```css

.Cell {

  width: 100%;

  @media (min-width: 768px) {

    width: 50%;

  }

  @media (min-width: 1024px) {

    width: 25%;

  }

}

```

Note that it's not necessary to pass exactly 3 values to the width array, but more than 3 will result in an error.

## Contributing

I'd love to get some feedback and contribution from the community. Feel free to file an issue, create a pull request, or leave some feedback as to how you think this project can be improved! 😄