dimitrisraptis96 / underline-generator

🤺 Generate neat CSS underlines

Underline Generator

 

Generate neat CSS undelines and embed them in your project. Check the app now.

 

🍻 Usage

Customize your fancy underline and press the copy button to get your CSS class.

Then, just wrap your text with a <span> element and paste the generated CSS.

🔥 TODO

• Redesign app using Sketch
• Add css for the text inside the input element
• Polish copy button (functionality & effects)
• Hover text effect
• Update icons
• Gradient picker
• Add animations
• Add code modal
• Special version that generates abstarct underlines

🏛️ License

Copyright (c) 2019-present Jim Raptis. All rights reserved.

The code, design and idea in this repository are intellectual property of the individual mentioned above (unless otherwise stated) and as such CANNOT be copied, modified, sublicensed or redistributed without permission from the author.

underline-generator's Issues

Let's collaborate!

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!