Feature: Upgrade Design / CSS Framework to Something Like Tailwind

[allella]

We discussed updating to the newest Bootstrap vs using a newer framework like Tailwind. Most of the votes and comments in the Slack thread suggested Tailwind.

• Dresko: If I were to start a new project, I'd use Tailwind, even though I haven't used it before. There are lots of Tailwind component libraries, though. I've always like DaisyUI: https://uideck.com/blog/tailwind-ui-kits-components-library
• Alex: Shadcn has been my recent favorite component library real simple and plain looking out of the box
• Bogdan: I used flowbite before - its pretty cool too -> https://flowbite.com/docs/components/mega-menu/

[zach2825]

I've been trying out different css frameworks. DaisyUI is nice looking and has some amazing utils like different themes and can integrate with a theme changer

https://daisyui.com/docs/themes/

[alexdresko]

For the record, I got the recommendation for DaisyUI probably years ago from someone here in HG. So there's at least one more person here on the DaisyUI train.

[allella]

@dsiglin this is still under consideration, but Tailwind received most of the interest and votes if we were to retool the CSS on the HG sites.

Bootstrap has been around since the start and we're on an old version. Flexbox was recently used by @JSn1nj4 on the Give page and I'm not sure if that was because the Bootstrap didn't work well, or if it's generally fine to be mixing Bootstrap and Flex.

I copied some HTML elements from /give and to the HG Nights page and the default margins are pretty crappy and generally it made me wonder if we should be not mixing concepts here, or if we're due to upgrade our CSS framework.

Also, there's generally an interest in having someone with design sense involved in the HG site so the devs don't crap the join up.

We have a few basics in a style guide https://hackgreenville.com/styles and Zach was talking about improving that resource so we have a better place to remind ourselves and new folks on what to do and what not to do.

In short, we could use some input from design folks if you or others in our network are up for such tasks.

[thecrypticace]

o/ I'd be happy to help out wherever! Would love to see this on Tailwind.

[JSn1nj4]

@allella

Bootstrap has been around since the start and we're on an old version. Flexbox was recently used by @JSn1nj4 on the Give page and I'm not sure if that was because the Bootstrap didn't work well, or if it's generally fine to be mixing Bootstrap and Flex.

TBH I hadn't dug into Bootstrap's docs for flex stuff. Now that I'm looking there, it definitely supports flexbox.

I'm just used to dealing with CSS directly when I'm not using Tailwind, so that's what I jumped in with.

[allella]

Looks like Tailwind 4 is in beta, so if we're going with Tailwind it may be worth waiting until that's released.