1033230 - create a new Layout css file in the shared directory

Status: RESOLVED FIXED

Description

[Arnau March [:arnau] ( not working in Firefox OS anymore :( )]

We lack of a base css file for creating layout structures

Comment 1

[Arnau March [:arnau] ( not working in Firefox OS anymore :( )]

Created attachment 8459300 [details] [review]
patch in github

Hey guys, I've been thinking we should try to fix all layout issues, providing a better way to build app structures.
This layout component is based on flexbox, and I also include here all needed markup for lists (we should deprecate list BB at some point).
I guess most apps in gaia could take advantage of it (mostly settings).
Please, let me know what you think :)

Comment 2

[Arnau March [:arnau] ( not working in Firefox OS anymore :( )]

Comment on attachment 8459300 [details] [review]
patch in github

Clearing review and feedback as Paco is proposing a new solution for this patch.

Comment 3

[Paco Rampas [:paco]]

Created attachment 8465261 [details] [review]
patch in github

Comment 4

[Arnau March [:arnau] ( not working in Firefox OS anymore :( )]

Comment on attachment 8465261 [details] [review]
patch in github

Thanks Paco!

Comment 5

[Paco Rampas [:paco]]

Merged: 7a8181f456fdd650f6c38a45c4e1a857ce1ec2ae

Comment 6

[Kevin Grandon :kgrandon]

Hey guys, just stopping by. I noticed that this landed with a bunch of .gaia-* classes. Since we've been landing web components with gaia- names, can we reserve those for web components in the future?

I think that having a gaia-footer and gaia-list web component make sense, and if there is some transition period, it will making grepping the codebase very difficult.

Thanks for the work on this, it looks good. I just wanted to note my concerns.

Comment 7

[Arnau March [:arnau] ( not working in Firefox OS anymore :( )]

Hey Kevin, you are right: those .gaia-* are meant to be temporal helpers 'till gaia components become more stable.
Lists BB is a very close structure, and we needed more options to improve consistency in all apps.
We have discussed this in the past, and as we need list elements to be as light as possible, having a web component for it would make it heavier than just a css file.
Your feedback, as always, is more than welcome ;)

Comment 8

[Kevin Grandon :kgrandon]

Individual list items should absolutely be normal content, but I do foresee us wanting to use a web component for the overall list - I'm sure this will help with things like virtual lists and scrolling performance in the future.

I suppose we should be cautious about how having a .gaia-list selector could interfere with a transition to a <gaia-list> component.