Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Should add layout architecture as well #12

Open
latobibor opened this issue Jan 6, 2017 · 3 comments
Open

Should add layout architecture as well #12

latobibor opened this issue Jan 6, 2017 · 3 comments

Comments

@latobibor
Copy link

latobibor commented Jan 6, 2017

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
Copy link
Owner

jareware commented Jan 6, 2017

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
Copy link

Sylk commented Oct 6, 2017

Update?

@jareware
Copy link
Owner

jareware commented Oct 7, 2017

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!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

3 participants