Migration away from bootstrap columns

[fregante]

There are two situations in which we should do away with Bootstrap columns, both of which result into sub-optimal DX and UX:

• multi-column layouts where one column should never be smaller than X, where display: flex would be a better option, like the blueprints page sidebar
• single-column layout where we abuse the sizing attributes to define an approximately good width, like https://github.com/pixiebrix/pixiebrix-extension/blob/4316982bff85ba09cad449498e26467d981bef61/src/components/Centered.tsx#L38 https://github.com/pixiebrix/pixiebrix-extension/blob/6e509683f605ce45e8c20b0bde829eae0a69a26e/src/pageEditor/tabs/editRecipeTab/EditRecipe.tsx#L166 https://github.com/pixiebrix/pixiebrix-extension/blob/6e509683f605ce45e8c20b0bde829eae0a69a26e/src/options/pages/onboarding/SetupPage.tsx#L36

<Centered> demo

https://user-images.githubusercontent.com/1402241/210045076-d3f97c86-6322-4216-9978-34193f902a62.mov

Blueprints sidebar

Possible solutions

• Single column: Use the new max-* classes added by #4909
• Multi-column: For example, use display: flex; flex-wrap: wrap and then something like width: 20%; flex-basis: 20rem on sidebars:
  • it has a minimum width
  • it still grows if the window is extra large (might not be necessary)
  • it automatically wraps just like BS in the Blueprints

Related

• https://github.com/pixiebrix/pixiebrix-extension/pull/4909
• https://github.com/pixiebrix/pixiebrix-extension/issues/2779

[twschiller]

cc @corinnemayans. This is a good thing for Brandon to be aware when he starts

[fregante]

There's also something I'd like to start preferring: https://dev.to/domagojvidovic/dont-use-margins-for-spacing-between-components-use-gaps-4llc

When I first read this, I didn't really like it, but now I think it does make sense: margins are kind of a hack (think of the negative margins Bootstraps uses on row and of the :last-child {margin: 0} reset you'd need).

This strategy also pairs well with my suggestion to have the parent decide the size of the children since PB is an app that should fit the window, it's not a document:

• https://github.com/pixiebrix/pixiebrix-extension/pull/2179

[github-actions[bot]]

This issue will be closed in 7 days unless the stale label is removed, or a comment is added to the issue.

[github-actions[bot]]

This issue was closed because it has been stale for 7 days with no activity.

[fregante]

Reopening this as we're actually taking steps towards this already:

• #7443
• #7464
• https://github.com/pixiebrix/pixiebrix-app/pull/4601

[github-actions[bot]]

This issue will be closed in 7 days unless the stale label is removed, or a comment is added to the issue.

[github-actions[bot]]

This issue was closed because it has been stale for 7 days with no activity.