search

MaxLeiter / Drift

Drift is a self-hostable Gist and paste service. Built with Next.js 13 and React Server Components.
https://drift.lol
MIT License
1.36k stars 60 forks source link

Move design framework #3

Closed MaxLeiter closed 1 year ago

MaxLeiter commented 2 years ago

geist-ui is great for prototyping, but heavily reliant on JS and not very customizable.

sampaioxsamuel commented 2 years ago

Hey, do you got any library in mind? I have some but I was thinking if you got prototype, wireframe or something else, so we can choose what could be better

MaxLeiter commented 2 years ago

I envisioned trying to stay pretty close to what we have now, just with less JS. What do you have in mind? I'm open to ideas

sampaioxsamuel commented 2 years ago

by less JS you mean using pure sass/css? if so theres always styled components. I was thinking about chakra or radix, the last one its good if we build our own design system but I don't if this is something that we should worry now :)

MaxLeiter commented 2 years ago

Yeah, I do mean pure CSS (I'd rather avoid an extra build step if possible) with JS for progressive enhancement. For example, tabs don't render at all with JS disabled right now. We could also try upstreaming to geist-ui, but I think we'll use few enough components it'll still be maintainable to have our own. styled-components sounds good, I just went with CSS modules because that's what I'm used to. I've heard good things about radix from an accessibility point, but Chakra seems fine too.

sampaioxsamuel commented 2 years ago

Yeah I can look up on this and test if I find a good option

MaxLeiter commented 2 years ago

That'd be great! Thanks @sampaioxsamuel 🙏

maxall41 commented 2 years ago

Maybe take a look at https://www.cirrus-ui.com/. It mainly uses SCSS and is pretty customizable but also comes with some nice prebuilt components.

lordvins226 commented 2 years ago

Maybe Chakra or Mantine can be nice choice.

XeroxDev commented 2 years ago

I can also recommend bulma, tailwind and (css only) bootstrap.

MaxLeiter commented 1 year ago

Finished by switching to radix-ui and custom styling