search

jareware / css-architecture

8 simple rules for a robust, scalable CSS architecture
2.59k stars 129 forks source link

Should add layout architecture as well #12

Open latobibor opened 7 years ago

latobibor commented 7 years ago

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).

jareware commented 7 years ago

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.

Sylk commented 7 years ago

Update?

jareware commented 7 years ago

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!