6 ms·
Ask HN: Resources to learn basic UI layout design for React apps?
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.
- matdehaast 7y agoFor learning layouts using flexbox I highly recommend Wes Bos https://flexbox.io/ https://flexbox.io/
- micael_dias 7y agoMaterial 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/
- paulgb 7y agoI'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
- averagebear 7y agoGet 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.
- jdefelice 7y agoSecond 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 7y agoI'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 7y agoSteve 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 7y agoI 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 7y agoI 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.
- nisa 7y agoFor 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
- blondin 7y agoi 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.
- machiaweliczny 7y agohttps://css-tricks.com/snippets/css/a-guide-to-flexbox/ https://css-tricks.com/snippets/css/a-guide-to-flexbox/
- chaoz_ 7y agoI'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 7y agoIts 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.
- chaoz_ 7y agoI 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 7y agoJust you CSS Grid. You don't need a layout library anymore. CSS Grid is sufficient for all needs!
- spocklivelong 7y agoI 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 7y agoAnt looks really great - any have any experience using it and can give some pros and cons on it?
- jacobedawson 7y agoHaving 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 7y agoI 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 7y agoI'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 7y agoAs 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)
- virgil_disgr4ce 7y agoYes. 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 7y agoI 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?
- JamesSwift 7y agoThe 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 https://www.youtube.com/watch?v=hs3piaN4b5I
- ithrow 7y agoWasn't CSS Grids the best thing that has ever happened to CSS? Why is Flexbox keep getting recommended on its own without Grid?
- nicoburns 7y agoIE11 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.
- oatmealsnap 7y agoYou’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.
- anegri 7y agoIf 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/)
- dbetteridge 7y agohttps://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
- erwinh 7y agoIndeed 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 :)
- wilsmex 7y agoI 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
- arey_abhishek 7y agoIf 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 7y agoIf 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 7y agoMy 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_Model/Introduction_to_the_CSS_box_model https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Mod... [1] https://tailwindcss.com/ https://tailwindcss.com/
- rubyn00bie 7y agoOh 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 7y agoI 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.