css-architecture icon indicating copy to clipboard operation
css-architecture copied to clipboard

Should add layout architecture as well

Open latobibor opened this issue 7 years ago • 3 comments

Thanks for the article, we will definitely discuss it with my colleagues!

As an enhancement I would add bits about working with layout. Sizes, positioning, modern approaches (flex, for example). Often times I see people defining absolute heights and widths:

.my-div {
  width: 145px;
  height: 120px;
}

But from where do this magical numbers coming from? Would they hold up on a 4K display? What happens if an other <div>'s size is changed? You end up fixing one and seeing two others break.

(I would really appreciate if anyone has a link to how you should approach and architect placement, sizes, proportions in a large UI).

latobibor avatar Jan 06 '17 15:01 latobibor

That'd definitely be something to cover too!

Personally I'd recommend flexbox whenever your target browsers permit (which should be most of the time these days). Start from the top down, slicing your UI into horizontal and vertical flex containers as necessary, and use flex and width where appropriate.

It's not exactly what you're looking for, but https://philipwalton.github.io/solved-by-flexbox/ catalogues some common UI patterns and their implementations with flexbox.

jareware avatar Jan 06 '17 22:01 jareware

Update?

Sylk avatar Oct 06 '17 14:10 Sylk

While the topic proposed by @latobibor is something I'd love to write about, I think it's on a level of abstraction slightly above what's covered here. Thus, I think it'll warrant a separate article.

I'll keep this issue open as a reminder, and close & link back when I get around to writing it!

jareware avatar Oct 07 '17 10:10 jareware