Trying to learn to develop simple UIs, but just keep hitting my head against CSS. It just does not click.
Is there something out there that will just let me put things on the screen, where I won't need to care about padding, margins, overflow etc?
I don't care if it's not very customisable. I just need something to test product ideas quickly.
What is there to click? Start doing it and you'll get in a few weeks time.
In 2023 there has never been an easier time for CSS. Back 10 years ago, all kinds of hacks (floats, negative margins, etc) were needed. Now it's 99% smooth sailing.
Something as common as a combobox* (a textbox + dropdown, ideally with autocomplete) is still a pain to implement, requiring understanding positioning, anchoring, z-indices, scrollbars (and how they're different across operating systems), media queries, word-wrapping, box sizing, etc. And that's just the CSS side.
On the HTML and JS sides there's dynamic loading from the server (and what to do with clientside state in the meantime, loading indicators, etc.), accessibility, focus locking, blah blah.
Meanwhile, like 15 years ago that was a drag-and-drop WinForms control in Visual Studio.
It's "99% smooth sailing" if you work in it day and in day out, maybe, and are aware of all its quirks. But easy to learn it is not...
--------------
* If you want to see some of the complexity, take a look at a published combobox component like MUI's: https://mui.com/material-ui/react-autocomplete/#combo-box
Basic usage just requires a few lines of React, but the options and different behaviors are pretty complex, both in JS and in CSS. You can of course write something like this from scratch, it's just a lot more work than, say, a blog post.
Or you can just use one of the 20000 available such components. A combobox is a pain to implement in native code without a GUI library too.
It is what I do. I end up with a modern looking site that is clean and doesn’t win any design awards. But I can focus on functionality.
Steps:
Go through Tailwind getting started docs.
Buy Tailwind UI.
Copy/paste a layout and wire it with the backend.
Go through Tailwind UI components, pick whatever you want to display, modify as necessary.
Learn along the way.
* Stop thinking in terms of classes/composition/modules. Stop crying about how hard life is, putting text to screen, and making excuses that somebody or some framework isn’t doing it for you. Get your head right.
* First, get cozy with the DOM. It’s a tree model, like a file system. This is the compile target of the browser. If this a bridge too far then thrown up your hands and just give up.
* Second, most, but not all of, CSS properties cascade down the tree. Practice will make this knowledge muscle memory.
* Third, learn the box model. This is tiny and should become second nature. Super tiny, so no excuses here.
That’s it. Really. Again, if this is a bridge too far maybe rapid experimentation in the browser is something you should out source at 6 figures or you could just spend a week learning it.
After that maybe allow yourself to look into something like cross platform flutter. https://docs.flutter.dev/ui/layout
That and the other native stuff (ios, android, the 10 windows layout languages) is not really any easier. UIs are tough to do well.
I'm a frontend dev who grew up with CSS, but some of my coworkers started after that era and still contribute valuable work. A lot of it is in higher levels of abstraction now, such as component libraries (whether built in-house or third-party or, often, a forked/extended version of an open-source one). The CSS is already mostly defined for you by these systems and for the most part they're fine.
Yes, your UIs end up looking a bit generic, like the modern version of "just another Bootstrap page", but I'd argue this is a good thing: that FE devs can now spend time building business logic and user flows instead of (sigh) centering divs across three browsers.
Or you just write HTML and use a classless css framework. I think holiday.css and mvp.css are both quite nice starters. And the beauty of it: you can change them with a single line (since you don't litter your markup with framework specific classes all over)
Or you try to wire up your APIs with some low-code ui builder.
Or, you sit down and read a proper book (or start with MDN), do some exercises and learn CSS. It is to stay in the web platform for quite a while, so it might pay of fast.
https://github.com/troxler/awesome-css-frameworks#class-less
https://github.com/dohliam/dropin-minimal-css
Personally, I like simple.css (https://github.com/kevquirk/simple.css)
Don’t build one, buy one.
UI kits exist for most css frameworks - from bootstrap to tailwindcss to material design etc.
I recommend bootstrap as it is one of the most popular ones and you’ll be able to find most components available for it.
Take a look at the bootstrap examples: https://getbootstrap.com/docs/5.3/examples/
Find one that is roughly what you want or close to it and customize it until it fits.
If so, you can use a higher level of abstraction that takes care of the CSS for you. If you just want to mock something up, you can use a pre-built UI system / component framework and just put together UIs declaratively, without having to worry about the underlying CSS or HTML at all. Examples include https://mui.com/ and https://chakra-ui.com/ and https://ant.design/
Edit: MUI's template selection is awesome: https://mui.com/store/#populars Just choose one that's roughly what you need, and you can one-click deploy it (to Vecel or whatever) and then hook up each page to your real APIs as you need to. This gives you a very good starting place where the basic user flows and styling are all taken care of, and you can just make small tweaks as needed.
Really easy to put together a quick UI that way. (As a frontend dev, this is how I prefer to put together UIs whenever I can.)
----------------------------
MUI also has a low-code dashboard builder: https://mui.com/toolpad/
And Vercel (creators of Next.js) is betaing an AI generated UI: https://vercel.com/blog/announcing-v0-generative-ui
----------------------------
If you don't want to use a JS framework (and I don't blame you), Tailwind is the modern version of simple declarative UIs, but it's lower-level than the previous option. https://tailwindcss.com/
Bootstrap is still around too: https://getbootstrap.com/
Lesser known options:
https://opensource.adobe.com/spectrum-css/ or https://opensource.adobe.com/spectrum-web-components/