Let's collaborate!

[zhouzi]

Hey!

I was recently looking into implementing those fancy underlines so they can span to multiple lines. Most of the implementations I had seen were relying on ::after, which doesn't work without white-space: nowrap. So I ended up with something similar to what you are doing (you can see it on gabinaureche.com). Still, your implementation is way better.

I was thinking about open sourcing my findings until I came across your project. And so I thought I'd rather contribute 🙂

I like everything about your implementation and design (especially the lightsaber 😛). I don't want to change anything but rather suggest a few additions. Let me know which one you'd be ok to add and I'll submit a PR:

1. The button to copy the CSS code doesn't have the "pointer" on hover (partly because it's a div). I'd suggest to turn it into a button with cursor: pointer for accessibility.
2. I like the hover styles but I'd like to make it optional. Would you be ok to add a checkbox for that? So it would toggle on/off the hover styles.
3. It'd be great to be able to pick a plain color. Perhaps the gradient picker could be a dropdown to switch between "gradient" and "color"?
4. I was thinking about creating a widget that could be used through a bookmarklet. The idea is to be able to use the generator on any site so users could design an underline that works with their font, font size, and line-height. It's not so hard but definitely requires some work, we can probably think about that later.

In terms of communication, I was thinking about:

1. Publishing the project to npm so developers could use the library like so: generateUnderline({ colors: string[], position: number, weight: number }).
2. Creating a few demos on Codepen and add a link in the repository's README (e.g demos of using this library with hover styles, animating the background, changing the color on hover, etc.).
3. Submitting the project to some newsletters (e.g sidebar.io).

Let me know what you think!