
Ask HN: Resources to learn basic UI layout design for React apps? - mav3rick
I&#x27;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&#x27;ve enjoyed learning React and I&#x27;m sure I can handle the backend code as well. What I struggle with is designing a layout. I&#x27;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.
======
averagebear
Get Refactoring UI
([https://refactoringui.com/book/](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.

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

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

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

------
oatmealsnap
You’ll find this to be really helpful.

[https://every-layout.dev/](https://every-layout.dev/)

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

------
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](https://twitter.com/i/events/994601867987619840)

------
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...](https://developer.mozilla.org/en-
US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model)

[1] [https://tailwindcss.com/](https://tailwindcss.com/)

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

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

------
wilsmex
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](https://www.youtube.com/watch?v=SPFDLHNm5KQ)

------
matdehaast
For learning layouts using flexbox I highly recommend Wes Bos
[https://flexbox.io/](https://flexbox.io/)

------
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/](https://flexboxfroggy.com/))

------
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/](https://css-
tricks.com/snippets/css/a-guide-to-flexbox/)

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

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

------
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](https://www.youtube.com/channel/UC29ju8bIPH5as8OGnQzwJyA)

for the layout stuff, checkout their videos on flexbox:
[https://www.youtube.com/watch?v=JJSoEo8JSnc](https://www.youtube.com/watch?v=JJSoEo8JSnc)
or this one on grid:
[https://www.youtube.com/watch?v=moBhzSC455o](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.

------
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/](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.

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

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

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

------
machiaweliczny
[https://css-tricks.com/snippets/css/a-guide-to-flexbox/](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/](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.

------
dbetteridge
[https://css-tricks.com/snippets/css/complete-guide-grid/](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

