News for hackers. Stuff that matters.
Re:Ask HN: Resources to learn basic UI layout design for Rea... by devsatish on Thursday April 09, 2020 @09:26AM (#22822291)
As some one in similar boat. The best resource has been rolling up sleeves and digging into Flexbox (https://css-tricks.com/snippets/css/a-guide-to-flexbox/). Start with Admin Page templates for some visual cues (tons of them on themeforest/github - both for Web/Mobile)
Re:Ask HN: Resources to learn basic UI layout design for Rea... by ithrow on Thursday April 09, 2020 @12:41PM (#22824374)
Wasn't CSS Grids the best thing that has ever happened to CSS? Why is Flexbox keep getting recommended on its own without Grid?
Re:Ask HN: Resources to learn basic UI layout design for Rea... by nicoburns on Thursday April 09, 2020 @12:56PM (#22824570)
IE11 doesn't have full support, so unless you're lucky enough to be able to ignore IE, you have to resort to jacks and workarounds to use grid. At which point it's generally easier just to use flexbox.

Grid will be awesome very soon.

Re:Ask HN: Resources to learn basic UI layout design for Rea... by toyg on Thursday April 09, 2020 @01:08PM (#22824735)
IE (all versions) is estimated to account for less than 6% of users, these days. It’s so small it’s basically “exotic browser” territory.

I think the argument these days should be “do X unless you’re unfortunate enough to care about IE”.

Re:Ask HN: Resources to learn basic UI layout design for Rea... by luckyscs on Thursday April 09, 2020 @01:10PM (#22824766)
I've yet to work on a product that didn't care about IE. I look forward to that day more than I look forward to the return of the Messiah.
Re:Ask HN: Resources to learn basic UI layout design for Rea... by nicoburns on Friday April 10, 2020 @09:14AM (#22832657)
6% is still quite a lot! IE6 and IE8 were both still widely supported until they had <1% narket share. Firefox at 8% doesn't have much more than that.
Re:Ask HN: Resources to learn basic UI layout design for Rea... by _bxg1 on Thursday April 09, 2020 @02:13PM (#22825516)
Flexbox is for "1D layouts"; "lists" (including ones that wrap). Grid is for "2D layouts". In most cases you don't really need Grid (and it has a much steeper learning curve), but if you want to, say, mimic a <table> without an actual <table> element, Flexbox simply cannot do that.
Re:Ask HN: Resources to learn basic UI layout design for Rea... by luckyscs on Thursday April 09, 2020 @01:09PM (#22824745)
I find flexbox has a small, easy to learn and teach api that allows you to do almost any kind of web app layout that you would need to do, exceptions being grids and tables.

Css Grid is less intuitive but they do make grid gutters much much easier.

Most of the time I reach for flex box. Only when I'm doing a guttered grid would I reach for css grids.

With how hard it is to get a companies UI devs on the same technology and patterns, flexbox is an easy standard to coordinate around.

Not to mention it's better supported.

Re:Ask HN: Resources to learn basic UI layout design for Rea... by JamesSwift on Thursday April 09, 2020 @01:52PM (#22825278)
Grid is awesome, and I highly recommend learning what it can do for you. That said, they serve different purposes. However, between the two of them they address 97% of my needs on the frontend. This[1] is a good rundown of what the two do/dont do.

[1] - https://www.youtube.com/watch?v=hs3piaN4b5I

Re:Ask HN: Resources to learn basic UI layout design for Rea... by keanzu on Friday April 10, 2020 @05:31AM (#22831353)
Partial support in IE refers to supporting an older version of the specification.

https://caniuse.com/#feat=css-grid

Re:Ask HN: Resources to learn basic UI layout design for Rea... by virgil_disgr4ce on Thursday April 09, 2020 @11:15AM (#22823322)
Yes. If I'm interpreting OP correctly, the single answer to the question is flex. It can seem like a weird API (I STILL to this day have to look up certain things), but once you get used to it it is GREAT.

Also, if you're using styled-components (which I recommend), use styled-flex-component for layout and things get even better. It's such a breeze, it makes even complicated layouts so simple and fast to put together.

Re:Ask HN: Resources to learn basic UI layout design for Rea... by nkozyra on Thursday April 09, 2020 @12:11PM (#22823917)
I migrated to CSS grids as soon as I could but find a lot of people still lean on flexbox. Is that just preference, older browser support ...? Are there things you can't do in grid?
Re:Ask HN: Resources to learn basic UI layout design for Rea... by JamesSwift on Thursday April 09, 2020 @01:54PM (#22825294)
The two occupy a venn diagram of functionality. They do some stuff the same, but they also both do unique things the other doesnt. See this for a good rundown: https://www.youtube.com/watch?v=hs3piaN4b5I
Re:Ask HN: Resources to learn basic UI layout design for Rea... by wintorez on Thursday April 09, 2020 @01:28PM (#22824983)
Re:Ask HN: Resources to learn basic UI layout design for Rea... by mav3rick on Thursday April 09, 2020 @04:37PM (#22826934)
Do I not need a component library if I use Flexbox ?