grid system should be responsive

[cezaraugusto]

see brave/brave-browser#341 right now there's no way to change column arrangement based on viewport.

[petemill]

I think the problem here is using a generalized grid in the first place.

It's probably overkill when CSS contains native layout properties such as css-grid or flexbox.

A page or group of brave-ui Components should be able to use whichever layout is suited for that content, since every grouping has unique needs and focus.

Forcing every group of components in to the same rigid grid system, and having that grid system be able to respond to every type of content on every screen type could end up with something unmaintainable that caters to every possibility - something that takes just a couple lines in CSS for each unique group of components.

[cezaraugusto]

I agree that components should be able to use whichever layout is suited for that content and
I'm open for suggestions re improving our general grid solution.

However, I'm still reluctant about killing it in favor of the default CSS grid. brave-ui target audience is non-front-end-developers and making them deal with grid can be daunting. Otherwise, we'll need to get front-end resources to make anything that needs it which is ATM is a limited resource. We only have us both browser-wise and other front-end people are focused on feature-specific projects (BAT) and can't help other areas, so we either do it or things will get postponed.

Making an easy grid system hopefully allows other developers to mock UIs without too much trouble. Designers included. Current grid system is not 100% but once we have more use cases we can adapt it.

Please note I'm not saying I'm fully against standard CSS grids, I'm just trying to find an alternative where we keep the easiness principle and empower other developers not familiar with grid. suggestions open either by this issue or our front-end slack channel.

[petemill]

@cezaraugusto 👍 That is a noble cause - do we yet have examples of web / web-ui front-end Views that do not have the involvement of a css-certified(™) developer? I feel like that's a big challenge, to provide easier-to-use style boundaries yet flexible enough to get the results we want, without attempting to replicate the entirety of css in a scope as broad and non-specific as 'grid'. But go for it, there are plenty of examples out there which have attempted to do the same, with mixed results 🤜 🤛

However, high-usage items wanting a high level of polish, like the New Tab Page, do get the involvement of developers that need to be able to control all style aspects cleanly. IMO it's more important to get that working as we want, with polish and dynamic responsive style specific to the needs of that View, without cluttering a shared component with specific options and logic that is only for that View. Sometimes that will mean css-grid, sometimes flexbox, sometimes floats, and sometimes even absolute positioning 🤕

[cezaraugusto]

ok let's deprecate this thing. closing in favor of #71, thanks for the input!