HN Explorer

Ask HN: Resources to learn basic UI layout design for React apps?

178 points by mav3rick ↗ HN
I'm a systems developer. I have been trying to learn web development using React so that I can create MVPs for some ideas I have. I've enjoyed learning React and I'm sure I can handle the backend code as well. What I struggle with is designing a layout. I've been using a layout library (material-ui) but I struggle with how to layout two elements horizontally or vertically etc. (Container element?). Is there a tutorial that can teach me enough to get by on this front ? I get too bored while learning the nuances of CSS.

51 comments

[ 3.1 ms ] story [ 106 ms ] thread
micael_dias
Material ui uses flexbox for it's grid. You can learn all about flexbox here[1]. In material-ui a <Grid /> can either be a container or an item. Check the documentation for the Grid element which has all the props available which should translate pretty well to the css in the webpage above i.e. flex-direction will be the "direction" prop in the Grid element if I'm not mistaken (on mobile, don't have access to the documentation rn)

[1] https://css-tricks.com/snippets/css/a-guide-to-flexbox/

paulgb
I'm in a similar boat, in that I'm not really a front-end designer but occasionally have the need.

The single most insight-dense resource I've found are Steve Schoger's "design tips". They are not all layout-specific; a lot deal with design, but I figure it's still relevant content.

Here's a list of his tips: https://twitter.com/i/events/994601867987619840

averagebear
Get Refactoring UI (https://refactoringui.com/book/)! I LOVE this book. It teaches you a bunch of rules, and has a component library with examples of things that look good.
jdefelice
Second this, Refactoring UI is a good resource, Adam Wathan also created tailwind css and the authors of that book created Tailwind UI which is a collection of UI components based on Tailwind.
capableweb
I'm a bit lost at the name and the target audience of this book. OP is asking for help with implementation of layouts, book seems to be geared towards learning design, not implementation of design (but there is no 100% free samples available so not fully sure on this)

And why is the book named Refactoring UI? It doesn't seem to be talking about refactoring at all, so where does that come from? Is it a design/UI/UX term I'm not used to?

a_wild_dandan
Steve Schoger started a video series called Refactoring UI a few years ago where he would take a real website layout, and through incremental tweaks, produced stunning results.[1] He always explained his reasoning for each change, justifying the concrete design tips he recommends. That's where the book name originated, and it's much like the video series (with some helpful appendices including mocks, color palettes, etc). It does not tell one how to implement said designs.

[1] youtube.com/channel/UCxqiDtkXtOCNJdckODHk9YA/videos

hencq
I just came across that book the other day. It looks very interesting; after this recommendation, maybe I should just buy it. I see they offer 2 packages. In your experience do you feel the extras in the more expensive package are worth it?
averagebear
I bought the more expensive version and I find it worth it. I do a fair amount of web design/dev consulting (as a side gig) and frequently use the component gallery to get my layouts designed before I write a line of code.
wolco
I've read that book. It has great design concepts and little design tricks.

It fails for providing the answers to 'how' is this done with code, here are coding tricks to get you there. It's more if you have a package page with three packages making the middle a slightly different color makes it stand out.

viridi
That goes for most of design books/resources but what makes this book a good one is that it is focused on how to improve the layout of web sites/applications in a practical way. But as always we mis the part how to implement it in html/css. Most html/css resources are about websites and not about webapplications unfortunately.
ukyrgf
Something about the first example makes me laugh. "Remove borders, add shadows, and increase the spacing between elements". In 10 years we'll see the exact opposite, "Get rid of shadows and egregious padding, and use borders to clearly delineate objects"
blondin
i used to do html/css/js in the past so from time to time i check in on them to learn new things. youtube videos/channels are a very effective way to get up to speed. some channels are especially worthy.

for instance traversy media: https://www.youtube.com/channel/UC29ju8bIPH5as8OGnQzwJyA

for the layout stuff, checkout their videos on flexbox: https://www.youtube.com/watch?v=JJSoEo8JSnc or this one on grid: https://www.youtube.com/watch?v=moBhzSC455o

you can also get whole courses or books if you want...

but i have seen so much of the evolution of html/css/js that i want to say investing in a lengthy book or courseware is not worth it. you better invest that time learning tech that has been proven to last.

machiaweliczny
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
chaoz_
I'm also studying React for my project. I see that flexbox is mentioned in StackOverflow pretty often. Is it appropriate to use flexbox to define the relative positioning of large sections? (Like [Menu | App | Toolbox]).

Or should I only use it when I'm dealing with lists/tables of elements where I need to have sophisticated relative positioning?

JamesSwift
Its not just for positioning, its also for distribution of space. e.g. as a contrived example, you can say you want the left sidebar to be 200px, and the rest of the space to be distributed 80%/20% for the body and right sidebar. This is a good site for demonstrating other situations that flexbox helps with: https://philipwalton.github.io/solved-by-flexbox/

It is recommended a lot because its a really powerful and simple API to serve a broad class of problems.

chaoz_
I found `styled-components` lib and it's simple to pretty pick-up even for Frontend newbie. I wonder if it's good for learning purposes and I won't have any obvious problems in the future.

My learning app is pretty small and limited to the menu with several simple views on each tab.

It gives a nice default look and components are trivial to extend.

shripadk
Just you CSS Grid. You don't need a layout library anymore. CSS Grid is sufficient for all needs!
spocklivelong
I haven't used material UI, but if you want to start off with a layout design on Ant, I would use one of the example layouts and work my way into it. You can find them here: https://ant.design/components/layout/
wastedhours
Ant looks really great - any have any experience using it and can give some pros and cons on it?
jacobedawson
Having used both Ant and Material UI on mid-sized React projects I can say that MUI has much better documentation and flexibility, at a slight cost of having to grok their styling convention. Once you get that it's smooth sailing, with a fairly active community, a lot of intuitive components and generally hassle-free dev experience. Ant was a bit more of a struggle, personally, with less clarity in the docs and a less active (English-speaking at least) community.
jetti
I will preface this by saying that we have a bit more work to do to get it working since we are using ClojureScript and Reagent, but we started slowly using antd and replacing our current components. The components look nice (we have used table and select components so far) but the biggest issue has been getting the css to play nice with our existing css
wintorez
I've been working on a large front-end project using Ant and almost used/customized every component it has to offer. One of the best frameworks out there. Everything works great out of the box, and the framework is very well though and designed.

It has components that the rest of the frameworks, including Material UI simply lacks, including a very comprehensive Table component, and a Form component with validation and everything.

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

nkozyra
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?
ithrow
Wasn't CSS Grids the best thing that has ever happened to CSS? Why is Flexbox keep getting recommended on its own without Grid?
nicoburns
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.

toyg
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”.

luckyscs
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.
[deleted]
(comment deleted)
nicoburns
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.
[deleted]
(comment deleted)
luckyscs
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.

JamesSwift
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

_bxg1
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.
mav3rick
Do I not need a component library if I use Flexbox ?
oatmealsnap
You’ll find this to be really helpful.

https://every-layout.dev/

For practice, try dropping React and simply build the layout you want. When you’re happy, rebuild it with React.

anegri
If you're getting bored, maybe some gamification would do the trick. This game can be done fairly quickly, but covers the fundamentals of flexbox very well (https://flexboxfroggy.com/)
erwinh
Indeed look for the layout and grid components in your ui library. Semantic-ui-react has direct implementations as react components as well with code samples so no need to write any css yourself unless you want to do super custom stuff :)
arey_abhishek
If you want to quickly build and test MVPs without dealing with react or css, you might find my startup interesting. It's at Appsmith.com and you can build a quick app by binding our UI widgets to dB queries or API endpoints.
_bxg1
If you really want to understand, you'll just have to learn CSS. If you only care about doing quick prototypes, you can get by with a higher-level library like material-ui, Bootstrap, etc. They tend to include their own simplified layout vocabulary, but you'll be dependent on that vocabulary's quality, documentation, and behavior, and won't realistically be able to step outside of it.
narak
My advice, like with anything, is to learn the fundamentals first. In this case, that's CSS and its box model [0]. You don't need to learn every nook, cranny, and idiosyncrasy of CSS, but enough to know what's going on in higher level abstractions. I would just start with an empty html file and play with layouts devoid of any JS. Beware of outdated html/css "tutorials" online and stick to updated resources like Mozilla's MDN. Once you get the hang out modern layout models like flexbox and grid, I would recommend using a 'functional' css library like tailwind [1].

[0] https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Mod...

[1] https://tailwindcss.com/

rubyn00bie
Oh man. So been here.

I’d highly recommend Bulma for css... why? Well my biggest reason is it’s CSS only. Meaning you can very easily use it anywhere with anything.

It is simple, works well, and the documentation is quite good.

In general I’d say avoid anything that is both CSS and JavaScript. They are only going to cause headaches as almost everyone’s layout is different and as you know fixing these issues is a lesson in suffering.

Just my two cents...

aprdm
I am also more a devops/backend/systems developer and end up just using Bootstrap for everything. It looks decent enough and by now I already know how to do everything I need when I need.