Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/santosfrancisco/react-awesome-styled-grid

A responsive 8-point grid system layout for React using styled-components
https://github.com/santosfrancisco/react-awesome-styled-grid

List: react-awesome-styled-grid

8pt-grid grid grid-layout grid-system mobile-first react react-grid reactjs responsive styled-components

Last synced: 1 day ago
JSON representation

A responsive 8-point grid system layout for React using styled-components

Host: GitHub
URL: https://github.com/santosfrancisco/react-awesome-styled-grid
Owner: santosfrancisco
License: mit
Created: 2018-09-15T15:13:47.000Z (over 6 years ago)
Default Branch: master
Last Pushed: 2024-04-14T00:14:44.000Z (10 months ago)
Last Synced: 2024-04-14T11:01:01.354Z (10 months ago)
Topics: 8pt-grid, grid, grid-layout, grid-system, mobile-first, react, react-grid, reactjs, responsive, styled-components
Language: JavaScript
Homepage: https://awesome-styled-grid.netlify.app/
Size: 9.92 MB
Stars: 217
Watchers: 5
Forks: 33
Open Issues: 13
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE

Awesome Lists containing this project

awesome-made-by-brazilians - react-awesome-styled-grid

README

        [![npm version](https://badge.fury.io/js/react-awesome-styled-grid.svg)](https://www.npmjs.com/package/react-awesome-styled-grid)

[![All Contributors](https://img.shields.io/badge/all_contributors-6-orange.svg?style=flat-square)](#contributors)

[![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://commitizen.github.io/cz-cli/)

[![js-standard-style](https://img.shields.io/badge/code%20style-standard-brightgreen.svg)](http://standardjs.com)

[![codecov](https://codecov.io/gh/santosfrancisco/react-awesome-styled-grid/branch/master/graph/badge.svg)](https://codecov.io/gh/santosfrancisco/react-awesome-styled-grid)

[![Publish to NPM](https://github.com/santosfrancisco/react-awesome-styled-grid/actions/workflows/publish.yml/badge.svg)](https://github.com/santosfrancisco/react-awesome-styled-grid/actions/workflows/publish.yml)

[![Netlify Status](https://api.netlify.com/api/v1/badges/47a9c7f7-444d-4df9-bc7b-10cb06265ed7/deploy-status)](https://app.netlify.com/sites/awesome-styled-grid/deploys)

# React Awesome Styled Grid 😎

A responsive grid system for React using styled-components

## Installation

```bash

npm i --save react-awesome-styled-grid

```

## Dependencies

**styled-components** is a peerDependency and must be installed separately.

```bash

npm i --save styled-components

```

## Documentation

Click [here](https://awesome-styled-grid.netlify.app/) for documentation

## Basic usage

This grid system is mobile-first based on [Google Material Design](https://material.io/design/layout/responsive-layout-grid.html).

Number of columns: **xs**: 4, **sm**: 8, **md**: 8, **lg**: 12, **xl**: 12

Breakpoints size: **xs**: > 1rem, **sm**: > 48rem, **md**: > 64rem, **lg**: > 90rem, **xl**: > 120rem

> for a custom configuration, [see this section](https://awesome-styled-grid.netlify.app/custom) of documentation

```js

import { Container, Row, Col } from "react-awesome-styled-grid";

const MyCoolComponent = () => (

  

    

      

        Col A

      

      

        Col B

      

    

  

);

```

## Development

run `yarn install` or `npm install` to install all dependencies

run `yarn start` or `npm run start` to run Docusaurus on port 3000

Go to [http://localhost:3000/demo](http://localhost:3000/demo) to see live demo and edit [Demo.tsx](src/pages/demo.tsx) file

## Built With

- [Styled-components](https://github.com/styled-components) - Visual primitives for the component age.

- [Docusaurus](https:://docusaurus.io) - Build optimized websites quickly, focus on your content

- [Rollup](https://rollupjs.org/guide/en) - Rollup is a module bundler for JavaScript

## Contributing

Please read [CONTRIBUTING.md](https://github.com/santosfrancisco/react-awesome-styled-grid/blob/master/CONTRIBUTING.md) for details on our code of conduct, and the process for submitting pull requests to us.

See also the list of [contributors](https://github.com/santosfrancisco/react-awesome-styled-grid/contributors) who participated in this project.

## License

This project is licensed under the MIT License - see the [LICENSE.md](LICENSE.md) file for details

## Contributors

Thanks goes to these wonderful people ([emoji key](https://github.com/kentcdodds/all-contributors#emoji-key)):


_{Francisco Santos}
💻 📖 👀
_{Camila Belo}
⚠️
_{Fábio Henrique Gabriele}
⚠️
_{Bernardo Mariano}
💻
_{Ahmed Tarek}
💻
_{Steve Swanson}
🚧

This project follows the [all-contributors](https://github.com/kentcdodds/all-contributors) specification. Contributions of any kind welcome!