search

nostalgic-css / NES.css

NES-style CSS Framework | ファミコン風CSSフレームワーク
https://nostalgic-css.github.io/NES.css/
MIT License
20.62k stars 1.65k forks source link

Add badges component #211

Closed guastallaigor closed 5 years ago

guastallaigor commented 5 years ago

Is your feature request related to a problem? Please describe. Add a badges component kind of like github has but 8bit-like

Describe the solution you'd like

First draft

screencast-localhost-6006-2018 12 18-21-39-49

Describe alternatives you've considered Not adding this or changing it to other classes like closable (with an close icon) or other things

Additional context Up to this moment the badges must have two sides, a first and black one and the other one changes color. Suggestions are welcome.

guastallaigor commented 5 years ago

Second draft, added hability to change left/right side

screencast-localhost-6006-2018 12 18-22-21-09

BcRikko commented 5 years ago

Sounds great 👍

We might like to use a simple badge like the image below. 🤔 badge

Could you do something like the following? 🤔 Or should I have a different style from this Issue?

<span class="nes-badge">10</span>

<!-- class name and elements are provisional -->
<span class="nes-badge is-splited is-primary">
  <label>npm</label>
  <span>1.0.0</span>
</span>
jjspace commented 5 years ago

I like the idea and they look good. However I'm curious about where someone might use a two toned badge like this outside of the badges in say a Github README. Where else might it be used?

Regardless I think this could also be a good starting point/inspiration for button group or radio group.

guastallaigor commented 5 years ago

@BcRikko I was thinking more like this badges:

image

But maybe I can try add a different approach like you've suggested.

@jjspace I'm not sure where exactly, that depends on the user. To me, I was planning on using this in the docs implementation that we were planning to create #180 , and a different private website I was starting to make.

I got the idea from Bulma. This implementation right now is just like github badges, but like Bulma, I was aiming for different implementations in the future.

jjspace commented 5 years ago

I see. I'm still not sure where I'd use two tone badges like this but just because I don't have a use doesn't mean they're not useful 😄 They still look good and I do like the idea of fully fleshed out tags like Bulma has. I can definitely see a use for single tone tags or tags with a two tone X button and this is definitely a good start on that.

guastallaigor commented 5 years ago

Thank you for your feedback, I will try to improve this in the next few days :paintbrush: