Resources to learn basic UI layout design for React apps?

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.

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)

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.

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

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/

For everything font related I've enjoyed this site/book - lot's of explanations and opionated in a good way: https://practicaltypography.com/ there is also a chapter on layout/ui.

I stumbled up it while browsing https://htdp.org/2019-02-24/ and discovering Matthew Butterick

I have a channel that deals with lots of HTML, CSS & UI tips. I'd watch this CSS Grid video, as it's proved very helpful for many: https://www.youtube.com/watch?v=SPFDLHNm5KQ

For learning layouts using flexbox I highly recommend Wes Bos https://flexbox.io/

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

Material ui uses flexbox for it's grid. You can learn all about flexbox here[1]. In material-ui a 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/

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.

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

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.

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/

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.

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

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.

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

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.

https://css-tricks.com/snippets/css/complete-guide-grid/

If you want a more grid based layout.

You can then use flexbox within your grid to place columns/rows

Just you CSS Grid. You don't need a layout library anymore. CSS Grid is sufficient for all needs!