4 ms·

These look beautiful, but the react requirement makes it harder for me to want to use them. As someone whos just built terrible frontends using plain CSS + JS

These look beautiful, but the react requirement makes it harder for me to want to use them. As someone whos just built terrible frontends using plain CSS + JS + HTML, what's the currently preferred method for building simple sites that look good? I'm looking for the sweet spot between: * Gentle learning curve * Powerful * Looks good I'm currently using Bootstrap because it's what was popular a decade ago the last time I built UIs, but there must have been some advancement since then

tipiirai 3y ago
Nue with a content-first approach might work: https://nuejs.org/ https://nuejs.org/ No templates yet so the "looking good" part requires CSS skills.
advanderveer 3y ago
Maybe something like: Flowbite, or Tailwind UI? Both mostly paid but I think the value is pretty good for what you get.
nox101 3y ago
Is Lit and some of the libraries made with it what you're looking for? Like maybe https://bui.js.org/ https://bui.js.org/
- vidarh 3y ago
  The two seconds "Loading" on an otherwise blank screen I got (on mobile, but still) was not convincing...
- mock-possum 3y ago
  Prefer native web components buuuuut honestly Lit just makes web components quicker + easier. Love me some Lit.
eterps 3y ago
For simple sites: https://v2.picocss.com https://v2.picocss.com
ahmedfromtunis 3y ago
I still just use Bootstrap and vanilla JS for all my projects. I also write CSS manually to adjust and fine tune the design. This allows me to have total control over every aspect of the project, while ensuring top notch performance. Native web components are also a very powerful tool if you take the time to understand how they work properly. I looked into updating my setup many times over the years, but the only advancements I feel are concrete seem to come from new native html APIs and CSS capabilities. For everything else, the introduced convenience does not justify the huge overhead in terms of complexity, performance loss and added fragility.
spaceman_2020 3y ago
Honestly, once you get the hang of tailwind, its hard to go back to regular CSS. Takes barely a day to get comfortable.
threatofrain 3y ago
Astro is real fun and can deliver ultra-performance. https://astro.build/ https://astro.build/
- vijaybritto 3y ago
  He's asking for a component library not a framework like astro
  - tipiirai 3y ago
    To be exact @ch33zer is asking for "a preferred method for building simple sites that look good"
thatcherthorn 3y ago
As a backend developer who previously used bootstrap, it has been a delight to discover tailwind: https://tailwindcss.com/ https://tailwindcss.com/
kugelblitz 3y ago
I also still use Bootstrap. After adjusting it via the .scss files, it looks custom. Tailwind keeps popping up on my radar, but Bootstrap's utility classes are good enough for now. I even exchanged the bit of Vue.js functionality with htmx. And I use a bit of Alpine.js and vanilla JavaScript here and there, but it's very minimal.
quickthrower2 3y ago
Yet another suggestion https://daisyui.com/ https://daisyui.com/
pabe 3y ago
I paid for TailwindUI and Flowbite but I actually like DaisyUI the most. They're all TailwindCSS based. The difference is that DaisyUI is more like Bootstrap in that they create complete CSS components you can apply using a single class. Flowbite could be higher quality for the money, e.g. there is a "Navbar with multi-level dropdown" that doesn't really work that well on mobile. They're also using JS for dropdowns where DaisyUI is relying on pure CSS.
boundlessdreamz 3y ago
Depending on your stack, there are quite a few options. Laravel: - https://filamentphp.com/ https://filamentphp.com/ - https://bladewindui.com/ https://bladewindui.com/ Rails: - https://zestui.com/ https://zestui.com/ (Disclaimer: my project) Alpine+Tailwind: - https://devdojo.com/pines https://devdojo.com/pines - https://sailboatui.com/ https://sailboatui.com/ (minimal alpine) WebComponents: - https://shoelace.style/ https://shoelace.style/ Others: - https://daisyui.com/ https://daisyui.com/ - https://flowbite.com/ https://flowbite.com/ - https://preline.co/index.html https://preline.co/index.html
- hit8run 3y ago
  Shadcn for Rails (MIT License): https://shadcn.rails-components.com https://shadcn.rails-components.com
  - srevinsaju 3y ago
    And Shadcn for Svelte: https://www.shadcn-svelte.com/ https://www.shadcn-svelte.com/
BrandoElFollito 3y ago
I use Quasar and Vue. This is my hammer for all nails, no matter the size of the nail. I only write amateur apps for personal use (or a small number of people), on good networks etc. So even when I need to say "hello" centered on the screen I would fire up a full app environment. I do this because I can reuse my knowledge in all situations. Because I am curious and like to break what I did to the despair of the users, I recently started to use Vue + Vite + TailwindCSS + DaisyUI as a replacement. Again - a single hammer for everything, nail or not nail.
- KronisLV 3y ago
  > I use Quasar and Vue. This is my hammer for all nails, no matter the size of the nail. Vue is great, especially with their Composition API (https://vuejs.org/guide/extras/composition-api-faq.html#why-composition-api https://vuejs.org/guide/extras/composition-api-faq.html#why-...) and something like Pinia for state management, without the hassles of something like Redux: https://pinia.vuejs.org/ https://pinia.vuejs.org/ As for components, I really liked the idea behind PrimeVue/PrimeReact/PrimeNG/PrimeFaces (https://www.primefaces.org/ https://www.primefaces.org/) because I'm not aware of any other attempts of creating components that actually work similarly across different frameworks/libraries and it's really good because your skills carry over pretty well if you ever find yourself exploring a slightly different stack. For what it's worth, the components also work decently (there's a whole list https://primevue.org/autocomplete/ https://primevue.org/autocomplete/) and look okay (with various themes available, https://primevue.org/theming/ https://primevue.org/theming/), plus you can get examples (https://blocks.primevue.org/ https://blocks.primevue.org/). Oh yeah, they also have their CSS utilities (a bit like Tailwind, https://primeflex.org/installation https://primeflex.org/installation) and icons (https://primevue.org/icons https://primevue.org/icons). I actually look forwards to the day where most of these concerns are less of an artisanal craft but rather a set of boring and well known things that just work well for quickly putting together a CRUD or whatever you need. That said, I also explored VueRequest for handling network requests a bit more easily (https://www.attojs.org/guide/gettingStarted.html https://www.attojs.org/guide/gettingStarted.html) and VueUse for stuff like LocalStorage (https://vueuse.org/guide/ https://vueuse.org/guide/) and while it doesn't feel like I'm building a crappy alternative to Vuex and the complexity is reasonably manageable and the usability present, occasionally it all still feels a bit annoying to deal with - reactivity, ways to shuffle around data that I get from the back end, props, various bugs... so it's not all good, but still less complex than some of the things I've seen with React or Angular.
ramon156 3y ago
Daisyui if you like tailwind Shoelace seems very good aswell, it was on HN the other day and made by a senior at Microsoft.
Psychotherapist 3y ago
There have been plenty of suggestions here already, but here's one I prefer personally: https://fomantic-ui.com/ https://fomantic-ui.com/ (fork of Semantic-UI) Like other CSS-Frameworks, this can be used by adding the CDN Links for CSS/JS to the Page, and then using the components/classes. I have tried countless other frameworks, but this one really stood out to me due to the semantic class writing, like class="compact secondary button" (a smaller, secondary theme color (black by default), button) Of course, good looks are subjective, but I like the look a lot.
nnurmanov 3y ago
I am currently supporting legacy bootstrap & jquery web app and planning to move to something modern. I am waiting for Oracle to complete migration to preact to give their framework another try. But we have shortlisted react.
deleted 3y ago
[deleted]
replwoacause 3y ago
I also dislike the React requirement for so many UI frameworks. Preline UI is a Tailwind CSS framework although it doesn’t work with CDN, you still need to build Tailwind. I too am looking for easy ways to build nice UIs without too much overhead.

tipiirai 3y ago

Nue with a content-first approach might work: https://nuejs.org/ https://nuejs.org/ No templates yet so the "looking good" part requires CSS skills.

advanderveer 3y ago

Maybe something like: Flowbite, or Tailwind UI? Both mostly paid but I think the value is pretty good for what you get.

nox101 3y ago

Is Lit and some of the libraries made with it what you're looking for? Like maybe https://bui.js.org/ https://bui.js.org/

vidarh 3y ago
The two seconds "Loading" on an otherwise blank screen I got (on mobile, but still) was not convincing...
mock-possum 3y ago
Prefer native web components buuuuut honestly Lit just makes web components quicker + easier. Love me some Lit.

eterps 3y ago

For simple sites: https://v2.picocss.com https://v2.picocss.com

ahmedfromtunis 3y ago

I still just use Bootstrap and vanilla JS for all my projects. I also write CSS manually to adjust and fine tune the design. This allows me to have total control over every aspect of the project, while ensuring top notch performance. Native web components are also a very powerful tool if you take the time to understand how they work properly. I looked into updating my setup many times over the years, but the only advancements I feel are concrete seem to come from new native html APIs and CSS capabilities. For everything else, the introduced convenience does not justify the huge overhead in terms of complexity, performance loss and added fragility.

spaceman_2020 3y ago

Honestly, once you get the hang of tailwind, its hard to go back to regular CSS. Takes barely a day to get comfortable.

threatofrain 3y ago

Astro is real fun and can deliver ultra-performance. https://astro.build/ https://astro.build/

vijaybritto 3y ago
He's asking for a component library not a framework like astro
- tipiirai 3y ago
  To be exact @ch33zer is asking for "a preferred method for building simple sites that look good"

thatcherthorn 3y ago

As a backend developer who previously used bootstrap, it has been a delight to discover tailwind: https://tailwindcss.com/ https://tailwindcss.com/

kugelblitz 3y ago

I also still use Bootstrap. After adjusting it via the .scss files, it looks custom. Tailwind keeps popping up on my radar, but Bootstrap's utility classes are good enough for now. I even exchanged the bit of Vue.js functionality with htmx. And I use a bit of Alpine.js and vanilla JavaScript here and there, but it's very minimal.

quickthrower2 3y ago

Yet another suggestion https://daisyui.com/ https://daisyui.com/

pabe 3y ago

I paid for TailwindUI and Flowbite but I actually like DaisyUI the most. They're all TailwindCSS based. The difference is that DaisyUI is more like Bootstrap in that they create complete CSS components you can apply using a single class. Flowbite could be higher quality for the money, e.g. there is a "Navbar with multi-level dropdown" that doesn't really work that well on mobile. They're also using JS for dropdowns where DaisyUI is relying on pure CSS.

boundlessdreamz 3y ago

Depending on your stack, there are quite a few options. Laravel: - https://filamentphp.com/ https://filamentphp.com/ - https://bladewindui.com/ https://bladewindui.com/ Rails: - https://zestui.com/ https://zestui.com/ (Disclaimer: my project) Alpine+Tailwind: - https://devdojo.com/pines https://devdojo.com/pines - https://sailboatui.com/ https://sailboatui.com/ (minimal alpine) WebComponents: - https://shoelace.style/ https://shoelace.style/ Others: - https://daisyui.com/ https://daisyui.com/ - https://flowbite.com/ https://flowbite.com/ - https://preline.co/index.html https://preline.co/index.html

hit8run 3y ago
Shadcn for Rails (MIT License): https://shadcn.rails-components.com https://shadcn.rails-components.com
- srevinsaju 3y ago
  And Shadcn for Svelte: https://www.shadcn-svelte.com/ https://www.shadcn-svelte.com/

BrandoElFollito 3y ago

I use Quasar and Vue. This is my hammer for all nails, no matter the size of the nail. I only write amateur apps for personal use (or a small number of people), on good networks etc. So even when I need to say "hello" centered on the screen I would fire up a full app environment. I do this because I can reuse my knowledge in all situations. Because I am curious and like to break what I did to the despair of the users, I recently started to use Vue + Vite + TailwindCSS + DaisyUI as a replacement. Again - a single hammer for everything, nail or not nail.

KronisLV 3y ago
> I use Quasar and Vue. This is my hammer for all nails, no matter the size of the nail. Vue is great, especially with their Composition API (https://vuejs.org/guide/extras/composition-api-faq.html#why-composition-api https://vuejs.org/guide/extras/composition-api-faq.html#why-...) and something like Pinia for state management, without the hassles of something like Redux: https://pinia.vuejs.org/ https://pinia.vuejs.org/ As for components, I really liked the idea behind PrimeVue/PrimeReact/PrimeNG/PrimeFaces (https://www.primefaces.org/ https://www.primefaces.org/) because I'm not aware of any other attempts of creating components that actually work similarly across different frameworks/libraries and it's really good because your skills carry over pretty well if you ever find yourself exploring a slightly different stack. For what it's worth, the components also work decently (there's a whole list https://primevue.org/autocomplete/ https://primevue.org/autocomplete/) and look okay (with various themes available, https://primevue.org/theming/ https://primevue.org/theming/), plus you can get examples (https://blocks.primevue.org/ https://blocks.primevue.org/). Oh yeah, they also have their CSS utilities (a bit like Tailwind, https://primeflex.org/installation https://primeflex.org/installation) and icons (https://primevue.org/icons https://primevue.org/icons). I actually look forwards to the day where most of these concerns are less of an artisanal craft but rather a set of boring and well known things that just work well for quickly putting together a CRUD or whatever you need. That said, I also explored VueRequest for handling network requests a bit more easily (https://www.attojs.org/guide/gettingStarted.html https://www.attojs.org/guide/gettingStarted.html) and VueUse for stuff like LocalStorage (https://vueuse.org/guide/ https://vueuse.org/guide/) and while it doesn't feel like I'm building a crappy alternative to Vuex and the complexity is reasonably manageable and the usability present, occasionally it all still feels a bit annoying to deal with - reactivity, ways to shuffle around data that I get from the back end, props, various bugs... so it's not all good, but still less complex than some of the things I've seen with React or Angular.

ramon156 3y ago

Daisyui if you like tailwind Shoelace seems very good aswell, it was on HN the other day and made by a senior at Microsoft.

Psychotherapist 3y ago

There have been plenty of suggestions here already, but here's one I prefer personally: https://fomantic-ui.com/ https://fomantic-ui.com/ (fork of Semantic-UI) Like other CSS-Frameworks, this can be used by adding the CDN Links for CSS/JS to the Page, and then using the components/classes. I have tried countless other frameworks, but this one really stood out to me due to the semantic class writing, like class="compact secondary button" (a smaller, secondary theme color (black by default), button) Of course, good looks are subjective, but I like the look a lot.

nnurmanov 3y ago

I am currently supporting legacy bootstrap & jquery web app and planning to move to something modern. I am waiting for Oracle to complete migration to preact to give their framework another try. But we have shortlisted react.

deleted 3y ago

[deleted]

replwoacause 3y ago

I also dislike the React requirement for so many UI frameworks. Preline UI is a Tailwind CSS framework although it doesn’t work with CDN, you still need to build Tailwind. I too am looking for easy ways to build nice UIs without too much overhead.