react-flexbox-grid - A set of React components implementing flexboxgrid with the power of CSS Modules

  •        11

react-flexbox-grid is a set of React components that implement flexboxgrid.css. It even has an optional support for CSS Modules with some extra configuration.react-flexbox-grid imports the styles from flexboxgrid, that's why we're configuring the loader for it.



Related Projects

react-absolute-grid - An absolutely positioned, animated, filterable, sortable, drag and droppable, ES6 grid for React

An absolute layout grid with animations, filtering, zooming, and drag and drop support. Use your own component as the grid item. See the Demo. The idea behind AbsoluteGrid is high performance. This is achieved by using Translate3d to position each item in the layout. Items are never removed from the DOM, instead they are hidden. For best performance you should avoid re-arranging or removing items which you pass into AbsoluteGrid, instead you can use the filtered and sort properties to hide or sort an item. Those properties are customizable using the keyProp and filterProp properties. In addition, all data passed must be immutable so that we don't waste any renders.

css-gridish - Automatically build your grid design’s CSS Grid code, CSS Flexbox fallback code, Sketch artboards, and Chrome extension

This tool is not a grid system with a grid already designed for you. Instead, CSS Gridish builds all of the resources for the grid your team designed. We hope it helps teams adapt CSS Grid sooner and enables more complex layouts. To show how versatile the tool is, we have examples of grids from Bootstrap, Carbon Design System, and Material Design.

grd - A CSS grid framework using Flexbox. Only 321 bytes (Gzipped).

A CSS grid framework using Flexbox. Flexible Box Layout Module and calc() as CSS unit value used in Grd are available on modern browsers (Chrome, Firefox, Safari, Opera, Edge and IE11).

react-native-grid-view - React Native Grid/Collection View component

This component allows to display a grid/collection of items with more than one item per row. The items per row is configurable and it uses a 'ListView' in order to have a proper recycle mechanism.

react-big-calendar - gcal/outlook like calendar component

An events calendar component built for React and made for modern browsers (read: IE10+) and uses flexbox over the classic tables-ception approach. Inspired by Full Calendar.

react-css-modules - Seamless mapping of class names to CSS modules inside of React components.

If you are considering to use react-css-modules, evaluate if babel-plugin-react-css-modules covers your use case. babel-plugin-react-css-modules is a lightweight alternative of react-css-modules. babel-plugin-react-css-modules is not a drop-in replacement and does not cover all the use cases of react-css-modules. However, it has a lot smaller performance overhead (0-10% vs +50%; see Performance) and a lot smaller size footprint (less than 2kb vs +17kb).

react-grid-layout - A draggable and resizable grid layout with responsive breakpoints, for React.

React-Grid-Layout is a grid layout system much like Packery or Gridster, for React. Unlike those systems, it is responsive and supports breakpoints. Breakpoint layouts can be provided by the user or autogenerated.

autoresponsive-react - Auto Responsive Layout Library For React

Auto responsive grid layout library for React.See our for information on how to contribute.

react-css-components - Define React presentational components with CSS

Define React presentational components with CSS (or even SASS or Less if you like). The implementation is based on CSS modules. In fact React CSS Components is just a thin API on top of CSS modules.

primereact - UI Components for React

See PrimeReact homepage for live showcase and documentation.In order to install dependencies you should install yarn. You can follow the yarn setup instructions here.

react-native-styling-cheat-sheet - Most of the React Native styling material in one page

Most of the React Native styling material in one page. Imported from the official docs.

Semantic-UI - Semantic is a UI component framework based around useful principles from natural language

Semantic is a UI framework designed for theming.Semantic allows developers to build beautiful websites fast, with concise HTML, intuitive javascript, and simplified debugging, helping make front-end development a delightful experience. Semantic is responsively designed allowing your website to scale on multiple devices. Semantic is production ready and partnered with frameworks such as React, Angular, Meteor, and Ember, which means you can integrate it with any of these frameworks to organize your UI layer alongside your application logic.