search

jambonn / vue-concise-carousel

Vue Concise Carousel with True SSR Written for Jambon
https://jambonn.github.io/vue-concise-carousel
MIT License
23 stars 7 forks source link

Make library headless #35

Open MickL opened 1 month ago

MickL commented 1 month ago

I was thinking it would be great if the library would be unstyled "headless" (e.g. see tiptap or primevue). This would give full control to the developer in what way he wants to style the components. Some may use Tailwind while others use CSS or SCSS.

Currently the library comes with pre made css and pre defined class names. Personally I use Tailwind which works great e.g. with Tiptap because it comes without any styles. This library however I cant style with Tailwind, instead I need to overwrite the existing CSS while I otherwise I dont have any CSS in my whole app.

jambonn commented 1 month ago

I understand your idea of designing in your own style without needing to override CSS, but I wonder if not importing the CSS file means there won't be any default CSS, which is what you want, right? Or do you mean using some inline CSS styles?

MickL commented 1 month ago

In this case I think it would also mean not to provide any html output. Instead just provide the functionality.

For example the bullets at the bottom: Some people may not need them, some may want squares or some want preview images. Some users may want to add arrows to the sides. Some people may want to display 4 images in one row, then sliding to the next 4 images.

Having a headless library might be more initial work for the developer but it also gives full freedom on how things look like (not just css but also the html).

For example in tiptap you build the editor fully yourself. You decided what buttons you use and how you implement them: https://tiptap.dev/docs/editor/examples/default

Also Nuxt/UI is shifting over to use PrimeVue with v3 which also comes without styles: https://www.radix-vue.com/overview/getting-started.html

If you check the components of RadixVue you might get an idea of what this library could look like, e.g.:

https://www.radix-vue.com/components/calendar.html

jambonn commented 1 month ago

I understand your idea, but personally, I think creating a headless carousel library would be very challenging. I haven't seen any libraries like this because it involves a lot of DOM manipulation. Additionally, whether the carousel has smooth and beautiful effects depends heavily on CSS. If it were headless, it might complicate integration for developers. In reality, when considering a library, I believe it should work out of the box, and then developers can customize it as needed.