chillicream / react-rasta

React Rasta is a powerful and flexible grid system for React

---

The most powerful and flexible grid system for React

React Rasta is a 12 column grid system built on top of the CSS flexbox layout and styled-components.

Getting Started

Here you will find all you need to get started quickly.

Install Package

First things first. Install the package react-rasta with yarn or npm.

When using yarn it looks like this.

yarn add react-rasta

And when using npm it looks like this.

npm install react-rasta --save

Required Dependencies

React Rasta depends on the following packages which need to be installed manually.

Package	Version
react	16 or higher
styled-components	3 or higher

Code Examples

import React, {Component} from "react";
import {Column, Container, Row} from "react-rasta";

export default class App extends Component {
  render() {
    return (
      <Container>
        <Row>
          <Column size={3}>Left</Column>
          <Column size={{xs: 9, md: 3}}>Middle 1</Column>
          <Column size={{xs: 9, md: 3}}>Middle 2</Column>
          <Column size={3}>Right</Column>
        </Row>
      </Container>
    );
  }
}

Breakpoints (which will end up in media queries) could be redefined via ThemeProvider.

import React, {Component} from "react";
import {Column, Container, Row, ThemeProvider} from "react-rasta";

const breakpoints = {
  phone: 0,
  tablet: 600,
  desktop: 800,
};

const containerWidth = {
  // do not specify phone here
  tablet: 560,
  desktop: 760,
};

export default class App extends Component {
  render() {
    return (
      <ThemeProvider theme={{breakpoints, containerWidth}}>
        <Container>
          <Row>
            <Column size={3}>Left</Column>
            <Column size={{phone: 9, tablet: 3}}>Middle 1</Column>
            <Column size={{phone: 9, tablet: 3}}>Middle 2</Column>
            <Column size={3}>Right</Column>
          </Row>
        </Container>
      </ThemeProvider>
    );
  }
}

Documentation

Click here for the documentation.

react-rasta's Issues

Update to styled-components 4.0

TypeScript: size prop name conflicts with InputHTMLAttributes

See DefinitelyTyped/DefinitelyTyped#28597

I would suggest renaming the size attribute.

As a workaround you can define a dummy interface and pass it to the attrs constructor.

TypeError - "StyledComponents_1.injectGlobal is not a function"

StyledComponents_1.injectGlobal is not a function

Steps to reproduce
Update Styled-Components to v4.0 and above

Error shown via Codesandbox : https://codesandbox.io/embed/v0zzjj2x6l

IE11 doesn't support property or method 'includes'

Hi, compiled ES5 version contains array.includes which isn't support in ie11.
Can you please replace it? Thanks

how to prevent child components expanding beyond parent column?

Hi!
I really enjoy the relative simplicity of react-rasta.

Right now I'm trying to understand what I can use to prevent children/react components inside a column from expanding everything. I've not seen any difference using Flex="none".

What approach to take here?
Is there a flexbox property I need to look into or should I try to use a combination of css via styled components on those child components?

Improve Code Coverage

The code coverage for version 1.0 should be at least 80%.

Error in build

I am using CRA and giving the yarn build command displays the following error:

Failed to compile.

Failed to minify the code from this file:

        ./node_modules/react-rasta/lib/theme/StyledComponents.js:11

Read more here: http://bit.ly/2tRViJ9

Can you help me?
Best regards

Complete Documentation

Fill the documentation project react-rasta-docs with content.

Gutter width seems to always be 30px

Hey,

I've been checking out this library for a new project I'm working on. I've got the following:

// other imports
import { Theme, ThemeProvider } from 'react-rasta';

const theme: Theme = {
  gutterWidth: 20,
}

export const App = () => (
  <Provider>
    <ThemeProvider theme={theme}>
      <Router>
        <Routes />
      </Router>
    </ThemeProvider>
  </Provider>
)

However, the gutter width seems to stay 30px in my app:

Am I doing something wrong?