How to use without webpack? about react-flexbox-grid

[silvenon]

Why does react-flexbox-grid require a module bundler?

For CSS Modules to fully work. A precompiled distribution might cause name conflicts (unlikely, but still) and you wouldn't be able to use composes feature for the flexboxgrid module etc.

The requirement is still slightly silly, I agree. We'll think of something…

[drouillard]

@silvenon To add perspective of someone just starting with project.. CSS Modules also makes this project incompatible with create-react-app as there is not the ability to run custom loaders by default.

Overall great project though. Thanks for effort.

*edit Tried out spec project included in this repo and the class names being created look better. Still being 'localized' but at least can tell which classes are being used. In my large project the classNames seemed completely mangled. I was able to fork and remove css modules easy enough though.

[MechJosh0]

@nadeemja I had the same problem but couldn't get it to bundle with Meteor.

I too wanted to avoid using Meteors package system so I went with react-mdl. This follows the Material specification by Google by using getmdl and turning it into easy React components.

The only problem with this is that you cannot link to the /extra folder as mentioned in their requirements due to Meteors build system. Instead I copied the css/js files into the Meteor /client/ folder, in the future I plan to create a script which will do this automatically when the files update but right now it's manually. Hopefully MDG will allow linking to a node_modules file in the future but for the time being you have to hack it.

Sorry this isn't a solution for react-flexbox-grid, but I hope it solves your problem.

[SpencerSharkey]

👍 for this... I don't want to require webpack for this single (awesome) module

[silvenon]

Which module bundler are you using instead?

[nadeemja]

Hi!

I'm using MeteorJS.

[silvenon]

I'm not familiar with Meteor, does #32 help?

[nadeemja]

Sort of. Using a meteor-package does work, but I'm trying to stay on a npm-only path. Why does react-flexbox-grid require a module bundler?

[Nico-L]

Hi,

👍 also. I am using meteor +react and would like to avoid using webpack.

thanks

[silvenon]

@roylee0704 is using CSS Modules really necessary for this library? It's really simple and I doubt that there would be name clashes because people usually use only one grid system per project. Or perhaps we could make two distributions, one default and the other one for webpack?

[fortunto2]

@nadeemja
Hi, look my fork of package https://atmospherejs.com/lifefilm/react-flexbox-grid
without webpack

[nomadtechie]

Would like to be able to use this with JSPM so adding another vote. :-)

[PolGuixe]

For meteor users you can try to use https://github.com/nathantreid/meteor-css-modules.

However I haven't been able to do a working set-up :( See: akanix42/meteor-css-modules#66

[yanickrochon]

Since Meteor can effectively import CSS now, why isn't this module simply not adding flexboxgrid to it's peer dependencies and let users load it however they want? Then simply apply the darn CSS classes like it can be done manually?

Because this actually works

<div className="row">
  <div className="col-xs-12 col-sm-4 col-md-3 col-lg-2">
    Foo
  </div>
</div>

So I'm wondering why this doesn't work

<Row>
  <Col xs={6} sm={4} md={3} lg={2}>
    Foo
  </Col>
</Row>

[silvenon]

why isn't this module simply not adding flexboxgrid to it's peer dependencies

It is.

Then simply apply the darn CSS classes like it can be done manually?

Because this module is intended exclusively for CSS Modules. We should make it fall back to regular classes if CSS Modules aren't used, but I'm not sure how easy (or possible) that is.

[silvenon]

But the more I think about it, the more I'm leaning towards advising you to simply use the flexboxgrid module + classes directly. If you aren't going to use CSS Modules, using react-flexbox-grid to get to flexboxgrid seems like an unnecessary middle step.

[yanickrochon]

@silvenon perhaps. Then again, if you argue like this, so is this module, then. No? 😛

[silvenon]

@yanickrochon sorry, could you rephrase that? I would love to hear reasons for using this module without CSS Modules, I just didn't understand the sentence. 😅

[yanickrochon]

@silvenon When I came down to choose between two Material Design UI frameworks, I had the choice between MaterializeCSS + React-Materialize (which includes a flex grid already) or Material UI and Flexbox Grid.

The interesting thing is that the latter (Material UI) does not use any CSS, but does everything inline with styles (that can be overridden either with style props or through CSS and !important instruction. Even material icons are bundled as React Components, drawing SVG elements directly. The point being that CSS is not a requirement anymore, especially if the rules are generic and functionality wrapped in components.

This project is pretty similar, in the sense that the requirement on Flexbox Grid makes the entire thing big and quite useless, as you pointed out, as people can simply include flexboxgrid's CSS and use it directly, even in react. However, bundling the styles as standalone react component, compatible with FlexBoxGrid (the end result is the same, and the API doesn't change) makes the project work seamlessly in any react environment, because there are no dependencies.

Ideally, this is how I see this kind of project. Because it's better to change a single component than to refactor the entire app for every instances of <div className="row"> and such.

[silvenon]

Please subscribe to #60 to receive updates about react-flexbox-grid falling back to regular classes in case CSS Modules aren't enabled.