3 ms·
Are you cool with JS frameworks? 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, yo
by solardev 3y ago
Are you cool with JS frameworks?
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/ https://mui.com/ and https://chakra-ui.com/ https://chakra-ui.com/ and https://ant.design/ https://ant.design/
Edit: MUI's template selection is awesome: https://mui.com/store/#populars 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/ https://mui.com/toolpad/
And Vercel (creators of Next.js) is betaing an AI generated UI: https://vercel.com/blog/announcing-v0-generative-ui https://vercel.com/blog/announcing-v0-generative-ui
Or https://www.builder.io/ https://www.builder.io/
----------------------------
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/ https://tailwindcss.com/
Bootstrap is still around too: https://getbootstrap.com/ https://getbootstrap.com/
Lesser known options:
https://semantic-ui.com/ https://semantic-ui.com/
https://get.foundation/ https://get.foundation/
https://opensource.adobe.com/spectrum-css/ https://opensource.adobe.com/spectrum-css/ or https://opensource.adobe.com/spectrum-web-components/ https://opensource.adobe.com/spectrum-web-components/