Flexomatic

Overview

flexomatic is a component-based flexbox grid system for React, built with styled-components and based on the Solved by Flexbox implementation. It aims to provide a simple and lightweight grid system with a flexible API that allows users to quickly set up and customize their grids. With features like full control over individual cells, responsiveness with media query support, and support for nested grids, flexomatic provides an easy-to-use solution for creating flexible grids in React applications.

Features

• Each Cell component is the same width by default
• Full control over individual Cell components, including width and alignment
• Responsive design with media query support
• Support for nested grids

Installation

To install flexomatic, you need to have styled-components already installed in your React project. Once you have styled-components installed, you can follow these steps:

1. Run the following command to install flexomatic:

npm install flexomatic

2. Import the Grid and Cell components from flexomatic in your React component file:

import { Grid, Cell } from 'flexomatic';

3. Use the Grid component as the parent container to initialize a grid:

<Grid>
  <Cell>Cell 1</Cell>
  <Cell>Cell 2</Cell>
  ...
</Grid>

4. Customize the grid by using props like flexCells, direction, align, and spacing.

Summary

flexomatic is a lightweight and flexible grid system for React applications. It offers a simple API for creating grids, with features like individual control over cells, responsiveness, and support for nested grids. By leveraging styled-components and following the Solved by Flexbox methodology, flexomatic provides an easy-to-use solution for building grids in React. With the ability to customize the grid layout and appearance, flexomatic empowers developers to create responsive and visually appealing grid-based designs.