Generic components in Blueprint

[goranmoomin]

Environment

• Package version(s): 3.17.1
• Browser and OS versions: Safari / macOS 10.13.5

Question

I was wondering about generic layout components in Blueprint.
For example, 'Container'-esque classes are provided in
Bulma, components are provided in material-ui, etc.

Does blueprint expect users to roll out their own layout components? Or is it me not noticing such components?

I have found out that blueprint doesn’t provide a grid system at the variables section(not a good place IMHO), does the same apply to generic components?

(The reason why I am using blueprintjs, not other libraries I have included in my comments is because of not only asthetics but also the fact that blueprint exposes all classes, since it allows myself to build components with the same look-and-feel with the components blueprint provides.
If there are classes that are exposed for such generic situations, I will gladly roll out my own components.)

[dmackerman]

The question becomes what goals are you trying to achieve with your "Container-esque" components that directly relate to Blueprint?

If you were to write a Box or Flex component, not much would need to be shared from Blueprint itself. You could build a Grid component that has shortcuts for CSS-grid styles. Most of the underlying Blueprint spacing and padding are calculated from the pt-grid-size variable.

[goranmoomin]

@dmackerman Well, I was thinking about something really basic; things like centering elements (with an optional max-width set),
but by reading the codebase it looks like the library just doesn’t try to have opinions about things like max-width values.

Still, maybe one generic component that centers it’s children with a margin of 0 $pt-grid-size * 4 might be a great foundation.

[adidahiya]

You're right, Blueprint doesn't provide any generic layout components out of the box. There is one container component, Card, but in general we suggest rolling your own. As suggested in that small "grid system" section of the docs, we mostly just write flex box CSS directly to style our layouts in Blueprint-based applications. For some more advanced layouts we use things like react-mosaic.

[goranmoomin]

@adidahiya I’m sorry for asking questions not exactly relevant to blueprint, but do you have some suggestions for a generic flexbox-based lightweight (non-styling) React component library that can be used with blueprint?

[gkanellopoulos]

@pcr910303 I am using React Grid System with Blueprint and so far I have not seen any issues.

[goranmoomin]

@gkanellopoulos Thanks for your suggestions! 👍