Following error when trying to install through yarn...

--> yarn add react-styled-flexboxgrid

yarn add v1.15.2
[1/4] 🔍 Resolving packages...
[2/4] 🚚 Fetching packages...
error An unexpected error occurred: "https://registry.yarnpkg.com/event-stream/-/event-stream-3.3.6.tgz: Request failed "404 Not Found"".
info If you think this is a bug, please open a bug report with the information provided in "/Users/rakmenon/SNProjects/Personal/next-dynamic-pages/next-with-authored-pages/yarn-error.log".
info Visit https://yarnpkg.com/en/docs/cli/add for documentation about this command.

If so, should update peerDependencies.

I have the following nested structure. One a large screen, I'm seeing the offset that is applied to a child column being applied to a parent column. It looks like the smOffset of the child is being applied to the parent where it shouldn't be.

<Grid>
    <Row>
        <Col xs={false} sm={1}>
            <FlexBox>
                <XBorder/>
            </FlexBox>
        </Col>
        {/*Offset visible on large screen*/}
        <Col xsOffset={1} xs={11} sm={10}>

It was resolved by doing this:

<Grid>
    <Row>
        <Col xs={false} sm={1}>
            <FlexBox>
                <XBorder/>
            </FlexBox>
        </Col>
        <Col xsOffset={1} xs={11} smOffset={0} sm={10}>

I think it would be convenient to have an API that allows applying flex-direction: row/column-reverse using screen size.

It can be useful for example if you want a layout like that:

on lg/md
Text Preview

on sm/xs
Preview
Text

This API also would be similar to start, center, etc.

Version 10 of Node.js (code name Dubnium) has been released! 🎊

To see what happens to your code in Node.js 10, Greenkeeper has created a branch with the following changes:

• Added the new Node.js version to your .travis.yml

If you’re interested in upgrading this repo to Node.js 10, you can open a PR with these changes. Please note that this issue is just intended as a friendly reminder and the PR as a possible starting point for getting your code running on Node.js 10.

Your Greenkeeper Bot 🌴

Version 3.2.0 of cross-env just got published.

This version is covered by your current version range and after updating it in your project the build failed.

As cross-env is “only” a devDependency of this project it might not break production or downstream projects, but “only” your build or test tools – preventing new deploys or publishes.

I recommend you give this issue a high priority. I’m sure you can resolve this 💪

Your Greenkeeper Bot 🌴

Version 2.2.0 of eslint-plugin-standard just got published.

This version is covered by your current version range and after updating it in your project the build failed.

As eslint-plugin-standard is “only” a devDependency of this project it might not break production or downstream projects, but “only” your build or test tools – preventing new deploys or publishes.

I recommend you give this issue a high priority. I’m sure you can resolve this 💪

Your Greenkeeper Bot 🌴

I am trying to install this project locally as I need it as a dependency in my React 16.0.0 project (the current npm version doesn't yet support React 16.0.0, so I'm trying to install it as a git dependency with npm-git-install).

But I am getting an error from rollup when running npm install (which runs rollup -c && cross-env NODE_ENV=production rollup -c):

> rollup -c && cross-env NODE_ENV=production rollup -c

Creating development bundle...

src/index.js → dist/styled-flexboxgrid.js, dist/styled-flexboxgrid.es.js...
[!] (commonjs plugin) SyntaxError: Unexpected token (29:4) in ~/projects/react-styled-flexboxgrid/src/config.js
src/config.js (29:4)
SyntaxError: Unexpected token (29:4) in ~/projects/react-styled-flexboxgrid/src/config.js
    at error (~/projects/react-styled-flexboxgrid/node_modules/rollup/dist/rollup.js:185:14)
    at Promise.resolve.then.catch.err (~/projects/react-styled-flexboxgrid/node_modules/rollup/dist/rollup.js:9448:6)

I clearly see that transform-object-rest-spread is loaded as a plugin in .babelrc and rollup.config.js loads it from there, which I checked by printing this line:
plugins: babelrc.plugins.concat(['external-helpers']).

I'm not sure what's going on here, but it looks like maybe the babel spread plugin isn't called during transpiling before rollup bundles it. Has anyone else had that error before? Am I missing a global dependency that's not specified in the package.json?

Edit: Alternatively, when is the next release due? Because that would also fix my problem.

It seems that

<Row>
    <Col xs={6} sm={4}>
        <img src="https://placehold.it/100x50" />
    </Col>
    <Col xs={6} sm={4}>
        <img src="https://placehold.it/100x50" />
    </Col>
    <Col xs={6} sm={4}>
        <img src="https://placehold.it/100x50" />
    </Col>
</Row>

is not the same as

<Row>
    <Col sm={4} xs={6}>
        <img src="https://placehold.it/100x50" />
    </Col>
    <Col sm={4} xs={6} >
        <img src="https://placehold.it/100x50" />
    </Col>
    <Col sm={4} xs={6}>
        <img src="https://placehold.it/100x50" />
    </Col>
</Row>

Is this by design?

It immediately triggers the following error:

app.52fee47….js:781 TypeError: Cannot read property 'className' of undefined
    at eval (webpack:///./~/react-styled-flexboxgrid/lib/createProps.js?:11:52)
    at Array.filter (native)
    at createProps (webpack:///./~/react-styled-flexboxgrid/lib/createProps.js?:10:22)
    at Row (webpack:///./~/react-styled-flexboxgrid/lib/components/Row.js?:46:90)
    at eval (webpack:///./~/react-dom/lib/ReactCompositeComponent.js?:306:16)
    at measureLifeCyclePerf (webpack:///./~/react-dom/lib/ReactCompositeComponent.js?:75:12)
    at ReactCompositeComponentWrapper._constructComponentWithoutOwner (webpack:///./~/react-dom/lib/ReactCompositeComponent.js?:305:14)
    at ReactCompositeComponentWrapper._constructComponent (webpack:///./~/react-dom/lib/ReactCompositeComponent.js?:280:21)
    at ReactCompositeComponentWrapper.mountComponent (webpack:///./~/react-dom/lib/ReactCompositeComponent.js?:188:21)
    at Object.mountComponent (webpack:///./~/react-dom/lib/ReactReconciler.js?:46:35)

I reverted to 1.1.0 and things are working properly.

I want to use a gutter in the normal grid setting (specified width), but I see in the code that fluid is required to use a gutter. I wonder why that is?

Display error on Internet Explorer <= 11:

TypeError: El objeto no acepta la propiedad o el método 'isInteger'
TypeError: Object doesn't support this property or method
at Anonymous function (http://localhost:3000/_next/-/commons.js:49793:1)
at Anonymous function (http://localhost:3000/_next/-/commons.js:49789:17)
at Anonymous function (http://localhost:3000/_next/-/commons.js:41106:3)
at flatten (http://localhost:3000/_next/-/commons.js:41098:58)
at generateAndInjectStyles (http://localhost:3000/_next/-/commons.js:48676:5)
at generateAndInjectStyles (http://localhost:3000/_next/-/commons.js:48417:7)
at Anonymous function (http://localhost:3000/_next/-/commons.js:48438:11)
at subscribe (http://localhost:3000/_next/-/commons.js:48266:3)
at componentWillMount (http://localhost:3000/_next/-/commons.js:48429:9)
at Anonymous function (http://localhost:3000/_next/-/commons.js:26950:11)

Could you please explain the difference between container and breakpoints in the configuration?

Version 4.17.3 of webpack was just published.

This version is covered by your current version range and after updating it in your project the build failed.

webpack is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Your Greenkeeper Bot 🌴

Currently setting a center or end property on Row also sets text-align. This property is not responsible for the layout (that's what justify-content is for), but what's worse, it gets inherited by all children, causing unwanted effects. I still expect text to be left-aligned even when containing column is aligned to the right.

lint:eslint found some errors

.filter(k => ~DIMENSION_NAMES.indexOf(k))

Is it possible to do server side rendering?
I've tried using the methods documented here , but the returned elements are empty.

I really think that you should add an alternative field to specify the unit for widths:
containerUnits: 'px'
And allow the xs md etc properties to accept pixels

I noticed that outer_margin is not applied on <Grid></Grid> this becomes an issue on a extra small dimension xs since content touches the edges of the window. See image below on the bottom

For those who are interested I'm having this in my typings folder

/**
 * Type declarations for react-styled-flexboxgrid
 */

declare module 'react-styled-flexboxgrid' {

  import { StyledComponentClass } from 'styled-components';

  namespace ReactStyledFlexboxgrid {

    interface Theme {
      /**
       * rem
       */
      gridSize?: number;
      /**
       * rem
       */
      gutterWidth?: number;
      /**
       * rem
       */
      outerMargin?: number;
      mediaQuery?: string;
      container?: {
        /**
         * rem
         */
        sm?: number;
        /**
         * rem
         */
        md?: number;
        /**
         * rem
         */
        lg?: number;
      };
      breakpoints?: {
        /**
         * em
         */
        xs?: number;
        /**
         * em
         */
        sm?: number;
        /**
         * em
         */
        md?: number;
        /**
         * em
         */
        lg?: number;
      };
    }

    interface GridProps {
      fluid?: boolean;
    }

    interface RowProps {
      reverse?: boolean;
      start?: 'xs' | 'sm' | 'md' | 'lg';
      center?: 'xs' | 'sm' | 'md' | 'lg';
      end?: 'xs' | 'sm' | 'md' | 'lg';
      top?: 'xs' | 'sm' | 'md' | 'lg';
      middle?: 'xs' | 'sm' | 'md' | 'lg';
      bottom?: 'xs' | 'sm' | 'md' | 'lg';
      around?: 'xs' | 'sm' | 'md' | 'lg';
      between?: 'xs' | 'sm' | 'md' | 'lg';
      first?: 'xs' | 'sm' | 'md' | 'lg';
      last?: 'xs' | 'sm' | 'md' | 'lg';
      children?: React.ReactNode;
    }

    interface ColProps {
      reverse?: boolean;
      xs?: boolean | number;
      sm?: boolean | number;
      md?: boolean | number;
      lg?: boolean | number;
      xsOffset?: number;
      smOffset?: number;
      mdOffset?: number;
      lgOffset?: number;
    }

  }

  export interface Theme extends ReactStyledFlexboxgrid.Theme {}
  export const Grid: StyledComponentClass<ReactStyledFlexboxgrid.GridProps, 'div'>;
  export const Row: StyledComponentClass<ReactStyledFlexboxgrid.RowProps, 'div'>;
  export const Col: StyledComponentClass<ReactStyledFlexboxgrid.ColProps, 'div'>;
}

Hi! Thank you for creating this useful component.

There's a problem though, it doesn't render the Grids, Row and Col correctly compared to other component in the page that also uses styled-components (rendered correctly when printing).

Hi, nice lib. But, here is a really confusing behavior:
<Col md={3} sm={6} xs={12}> - doesn't work
<Col xs={12} sm={6} md={3}> - work.
Its the first time ever I see that the order of props has importance. :(

During an upgrade and using yarn outdated a lot, I noticed that this project has a 3.0 released on npm 2 months ago, but I can't find anything about that release in the Github repo. Master still shows 2.6.0, there's no 3.0 tag, branch, nothing. Was that an accidental release or something folks should actually be using?

<Col xs={false} [...] should lead to a style value of display: none!important.

The reason is that if you create a display: flex setting for the column for normal operations, it will override display: none for xs screens. And xs={false} is a hard rule.

if dont support below responsively,

<Row start="xs" end="lg">

why don't make it defaults to "xs" and becomes

<Row start>

Above looks a lot clear, less boilerplate !
now, everytime i need to write

<Row start="xs">

The "outerMargin" property is translated as padding for the Grid component.
But this seems to be applied only when the Grid is fluid.

"react-styled-flexboxgrid": "^2.2.0",
"styled-components": "^3.2.3",

Warning: Accessing PropTypes via the main React package is deprecated. Use the prop-types package from npm instead.

Hey,

I came across a very similar project here https://github.com/JSBros/hedron ; wouldn't it be nicer to merge efforts? Or am I missing a difference in intent?

A recent unit change to src/config.js moves from em to px. This is a breaking change to those using this repo as the units were simply changed without conversion. Also, on the demo site is a theme config generator that still shows units in em instead of px.

Please either revert to em in the src/config or adjust the semver and demo site, keeping px.

The PR in question: b832bb2#diff-9d9a6cd82f41984872a66a3ab0d440c4L16

When declaring the prop center="xs" the Row never lets go of the center class after it gets bigger than the declared "xs" size in the ThemeProvider component. I did some digging and it seems like the issue has to do with the order in which the classes are defined.
`

<Row start="sm" center="xs">
  <Col>Foo</Col>
</Row>

`

If I add the between prop to the Row component then the between takes over after the "xs" size declaration, but the start class is never added at the "md" size. Any suggestions on how to fix this would be appreciated. 👍

`

<Row start="md" between="sm" center="xs">
  <Col>Foo</Col>
</Row>

`

I want to extend your <Col> component, but still pass it the props sm,md, etc..

import { Col } from 'react-styled-flexboxgrid';
const ExtendedCol = Col.extend`
    ...
`;
const NewCol = (props) => {
    return (<ExtendedCol {...props}>{props.children}</ExtendedCol>);
};
export NewCol;

then in my code do:

<NewCol sm={6} md={4}>
    ...
</NewCol>

Is this possible?

See title

desired outcome:

All descendents of which are Grid, Rows and Cols take config from theme in the index.js file

actual behavior:

default gutterwidth and outerMargin are passed unless theme is directly called.

So we are presently passing theme over and over again down the app.... (see portion of code below)

What could I/we do differently to get the desired outcome?

in our /index.js

const theme = {
  flexboxgrid: {
    gutterWidth: 0,
    outerMargin: 0,
    breakpoints: {
      xs: 0,  // em
      sm: 48, // em
      md: 64, // em
      lg: 75 // em
    }
  }
};

render(
    <ThemeProvider theme={theme}>
      <App />
    </ThemeProvider>
  , document.getElementById('root'));

in our App.js lots of props passing using Styled-Components withTheme(Component)

class App extends React.Component {
  componentWillMount() {
    this.props.fetchConfig();
  }

  render() {
    return (
      <Grid fluid theme={this.props.theme}>
        <Row theme={this.props.theme}>
          <Col xs={12} theme={this.props.theme}><Header /></Col>
        </Row>
        <Row theme={this.props.theme}>
          <Col xs={12} theme={this.props.theme}>
            <Route component={CatchAllComponent} />
            <Route path="/login" component={LoginComponent} />
            <Route path="/forgotPassword" component={ForgotPassword} />
          </Col>
        </Row>
        <Row theme={this.props.theme}>
          <Col xs={12} theme={this.props.theme}><Footer /></Col>
        </Row>
      </Grid>
    );
  }
}
export default (withTheme(App));

just to explain the madness; it continues to each child component
this is login/index.js

    return (
      <MainSection theme={this.props.theme}>
        <LoginContainer>
          <LoginFieldRow>
            <Col xs={12}>
              <LoginTitle>
                Please Sign In
              </LoginTitle>
            </Col>
          </LoginFieldRow>
          <LoginFieldRow>
            {this.handleErrorCase()}
            {this.hasAuthKeys()}

            <Col xs={12}>
              <TextField
                type="text"
                label="Your Email Address"
                value={this.state.email}
                onChange={this.emailOnChange}
              />
            </Col>
          </LoginFieldRow>
          <LoginFieldRow>
            <Col xs={12}>
              <TextField
                type="password"
                label="Password"
                value={this.state.password}
                onChange={this.passwordOnChange}
              />
            </Col>
          </LoginFieldRow>
          <LoginButtonRow>
            <Col xs={12}>
              <LoginButton type="primary" onClick={this.loginHandler}>
                Sign In
              </LoginButton>
            </Col>
          </LoginButtonRow>
          <LoginLinkRow>
            <LinkDiv>
              <Link to="/forgotPassword">Forgot your password?</Link>
            </LinkDiv>
            <LinkDiv>
              <Link to="/login">Not a member?</Link>
            </LinkDiv>
          </LoginLinkRow>
        </LoginContainer>
        <ContactMessage />
      </MainSection>
    );
  }
}

We'd need to continue with all of and its

blah

May be related to:

#84
#19

I have been using this module for a while now and it saves me a ton of time! The API is polished and easy-to-learn. ThemeProvider integration is a lifesaver. However, pretty soon I'll have a few projects lined up that rely on Vue instead of React. I still plan to use styled components and its Vue-specific offerings.

I am opening this issue to propose this module be extended to incorporate more offshoots from the styled-components ecosystem. Having one library to rule them all is the dream, right?!

To that end, as a starting point, I propose adding packages for the following:

• vue-styled-components
• styled-elements

I foresee a change like this requiring a medium-to-large size refactor, most of the work would be in generalizing the styled-components CSS generation, then adding some helper functions to produce components for each separate integration.

Let me know what you think! If you like this idea, I am happy to help in any way I can.

EDIT: By the way, the NPM org name @styled-grid is not taken. It would make for nice package names to use a scope. For instance, you could NPM install @styled-grid/react or @styled-grid/vue instead of react-styled-flexboxgrid etc.

In this merge b832bb2 the workings of styled flexbox grid have been changed.

I don't think this is a good choice, and I'm having problems in my personal project because of this.

First, the merge changes em processing to px processing. This is not the way flexboxgrid (https://github.com/kristoferjoseph/flexboxgrid/blob/master/src/css/flexboxgrid.css) processes units and makes react-styled-flexboxgrid actually not flexboxgrid anymore.

The +1 on the min width was presumably the reason to switch to pixels, since this is the common way to prevent media query problems. On my project I'm seeing single columns on two <Col xs={12} sm={6} [...] because of this.

In short, this can't be right.

this project has the same bug as in this thread kristoferjoseph/flexboxgrid#144

Is there any way of changing the order of elements depending on breakpoints? For now I can only hide and show elements but it does not seem like a proper solution?

Is there a way to override config object to not include the "screen only" restriction on the media tag? This is preventing the grid from rendering properly when trying to print in the browser.

I found the code in the config that's adding it but wasn't quite sure on how to override it.
conf.media = Object.keys(conf.breakpoints).reduce((media, breakpoint) => { const breakpointWidth = conf.breakpoints[breakpoint] media[breakpoint] = makeMedia('only screen' + (breakpoint === 0 ? '' : and (min-width: ${breakpointWidth}em))) return media }, {})

Last property should be on the column to make the column move to the last position.

See example on http://flexboxgrid.com/ or:

<div class="row">
    <div class="col-xs-2 last-xs">
        <div class="box">
            1
        </div>
    </div>
    <div class="col-xs-2">
        <div class="box">
            2
        </div>
    </div>
    <div class="col-xs-2">
        <div class="box">
            3
        </div>
    </div>
</div>

The default value of flex-direction is row.

Hi there, thanks for a great library!

With styled-components v2, there's a new attrs API that simplifies wrapping third-party components.

However, wrapping one of react-styled-flexboxgrid's components, for example Col, raises:

Warning: Unknown prop `theme` on <div> tag. Remove this prop from the element

Here's the gist: https://gist.github.com/aaronmcadam/52b5d1f93d472ce5f33738c8f52b76ed

I made an update of the module to the last version, and the properties md and lg do not work in the Col component.

<Col xs={12} sm={4} md={4} lg={2}>
<ItemList {...process} />
</Col>

We're looking into switching shiny from styled-components to emotion. In doing so, we'd want a grid system that uses emotion as well.

Not wanting to change grid systems, I'll fork react-styled-flexboxgrid and see if I can add an emotion build, much in the same way as rebass support both frameworks - that is from a separate import path.

// This would still use styled-components
import { Grid, Col, Row } from 'react-styled-flexboxgrid'

// This would use emotion
import { Grid, Col, Row } from 'react-styled-flexboxgrid/emotion'

Would you be open to a pull request that makes react-styled-flexboxgrid support both styled-components and emotion?

Hi, This is not an issue but a request. Could you update your peer dependency?
[email protected]" has unmet peer dependency "prop-types@^15.6.0".

Thanks,

Version 3.4.6 of styled-components was just published.

This version is covered by your current version range and after updating it in your project the build failed.

styled-components is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Your Greenkeeper Bot 🌴

if you set outerMargin to 0 and resize the browser to mobile breakpoint it causes scrolling.

Steps to reproduce:

1. enter: https://loicmahieu.github.io/react-styled-flexboxgrid/demo/index.html
2. set outerMargin = 0
3. resize browser

Hello!

I'm attempting to run the demo for this project locally but have been having trouble with the dependencies. I believe there are conflicting versions of react-dom and react in use. The specific error is:

react-dom.development.js:833 Uncaught TypeError: Cannot read property 'ReactCurrentOwner' of undefined

reproduction steps:

git clone [email protected]:LoicMahieu/react-styled-flexboxgrid.git
cd react-styled-flexboxgrid
npm install
npm install styled-components@2
npm install  react@^16.0.0-0
npm install prop-types@^15.0.0-0
npm start

Go to http://localhost:8080

I've taken the dependencies listed above from the README.md. If I should be using a different set of peer dependencies please let me know!

Hi,

have you planned to change the theme to allow the container props to have a string value ? It'll allow the dev to set its own size unit.

If it's not on the planning but you like the idea I can look into it

Example :

const theme = {
  flexboxgrid: {
    // ...
    container: {
      sm: '100%',
      md: '80%',
      lg: '70%'
    },
    // ...
  }
}

In og flexboxgrid.css .first-* & .last-* are used to change the position of a col within a row. So it stands to reasons that those props should actually be Col props instead of Row props as they are now.