jacobobryant / biff

A Clojure web framework for solo developers.
https://biffweb.com
MIT License
829 stars 40 forks source link

Provide a default component library #206

Open jacobobryant opened 2 months ago

jacobobryant commented 2 months ago

Probably have the starter app use some pre-existing Tailwind component library like Flowbite or daisyUI. Need to see if those work well with server-side rendering or if they're mainly built for use with React/other SPA frameworks.

credmp commented 2 months ago

This is an excellent idea, esp since they are CSS based component libraries. From looking at both it seems daisyUI offers more abstraction then flowbite.

credmp commented 1 month ago

Perhaps it would be good to make something more tangible as a starter app then? Perhaps something such as a "todo" app or something else simple that can show off how components work?

jacobobryant commented 1 month ago

That might be worthwhile. Right now the starter app is a combination of a new-app template and a demo/example app. Maybe it should be split up so the starter app gives you more of a blank template and there's a separate repo with a demo TODO app or something.

nickdex commented 1 month ago

@jacobobryant I'm trying out daisy ui. What would be your approach to install it? I understand that tailwind is added as binary. Should I use CDN?

jacobobryant commented 3 weeks ago

@nickdex, you can follow the standard daisyUI install instructions; they'll work just fine whether you're using the tailwind binary or if you've installed tailwind via npm. i.e. run npm i -D daisyui@latest, which will create package.json and package-lock.json files if you don't have them already; then edit resources/tailwind.config.js and add require('daisyui'), to your plugins array. I gave that a try just now and it's already changed a bunch of styling in the starter app for me (e.g. background is dark blue instead of white).

jacobobryant commented 3 weeks ago

I will say I'm kinda surprised by daisyUI's landing page:

In a Tailwind CSS project, you need to write utility class names for every element. Thousands of class names just to style the most basic elements.

I'm shocked the authors could have spent so much time with Tailwind and still misunderstand it this badly. The whole point of Tailwind is that you do style reuse via react components or the equivalent (plain functions in Biff's case). Unless the authors get that but they're still using that angle as a marketing ploy?

In any case, for both DaisyUI and Flowbite, I'll be interested to see how smooth it is to modify the built-in components' styles. It's easy to package up a bunch of defaults; it's harder to do that while still giving full control to the user. frameworks vs libraries basically... of course even if they're not easily modifiable, there's still a class of projects where that's OK. I'd just want to make sure anything that's packaged with Biff has a good modifiability story.

nickdex commented 3 weeks ago

@jacobobryant I went with CDN to give it a try. Molly try out standard steps for deployment

Daisy supports full override from tailwind classes (need to be added before tailwind script line, in case of CDN) and you would want to remove tailwind base (and likely components) styles . I wanted uniform look so that my effort is spent more on logic than style at current stage, daisy is doing good job for now. I’ll update here if I run into edge case