https://github.com/AndreasFaust/react-raster

Advanced grid- and styling-system which is highly customizable and ready for server-side-rendering.
https://github.com/AndreasFaust/react-raster

Last synced: 20 days ago
JSON representation

Advanced grid- and styling-system which is highly customizable and ready for server-side-rendering.

• Host: GitHub
• URL: https://github.com/AndreasFaust/react-raster
• Owner: AndreasFaust
• License: mit
• Archived: true
• Created: 2019-03-20T16:43:55.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2022-04-28T19:39:18.000Z (about 4 years ago)
• Last Synced: 2025-09-21T20:54:26.033Z (9 months ago)
• Language: TypeScript
• Homepage: https://andreasfaust.github.io/react-raster-docs/
• Size: 63.5 MB
• Stars: 80
• Watchers: 2
• Forks: 4
• Open Issues: 7
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE.md

Awesome Lists containing this project

• awesome-github-projects - react-raster - Advanced grid- and styling-system which is highly customizable and ready for server-side-rendering. ⭐80 `TypeScript` (📦 Legacy & Inactive Projects)

README

          
![react-raster Logo](https://raw.github.com/andreasfaust/react-raster/master/assets/react-raster-logo.png?sanitize=true)

**react-raster** is an advanced grid- and layout-system based on **styled-components**. It is highly customizable while being easy to use. Regardless, if your grid is simple or complex: react-raster simplifies layouting. 😽

[![NPM](https://img.shields.io/npm/v/react-raster.svg)](https://www.npmjs.com/package/react-raster) [![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)

- Custom Breakpoints and Colspan

- Free nesting of Boxes while preserving the grid

- Custom styles for every element at every breakpoint

- Extending functionality of CSS-Grid-Layout

- Lightweight and performant architecture

- Visual control via ESC-key

- Written in TypeScript

- Ready for server-side-rendering

## ✍️ [See the Documentation!](https://andreasfaust.github.io/react-raster-docs)

**⭐ Try it out and _star it_ if you like it!**

---

## PeerDependencies

- react: >= 16.8.0,

- react-dom: >= 16.8.0,

- styled-components: >= 5.2.0

---

## Install

Install all dependencies via `yarn` or `npm`.

```bash

yarn add react-raster styled-components react react-dom

```

---

## Basic Usage

- `react-raster` has only one component called **Box**.

- Define `brekpoints` and a `colspan` to start a new Grid and nest `Box`-Elements inside each other — they will preserve the Grid automatically.

- Further style your `Box`-Elements directly via `props`. The API is close to CSS, only CamelCase.

```jsx

  

    Hello World!

  

  

    

      Stop

    

    

      Wars!

    

  

```

---

## Contributing

Every contribution is very much appreciated.

**If you like `react-raster`, don't hesitate to star it on [GitHub](https://github.com/AndreasFaust/react-raster).**

---

## License

Licensed under the MIT License, Copyright © 2019-present Andreas Faust.

See [LICENSE](LICENSE.md) for more information.