22 comments

[ 0.19 ms ] story [ 60.6 ms ] thread
Absolutely. And a number of projects do exactly that.

Bulma -> Buefy Bootstrap -> VueBootstrap, et al.

That said, if you're already using Vue, then a Vue-based framework is more convenient.

Please, please don't make your UI components unaccessible by removing the focus ring("outline: 0"). You're basically excluding all keyboard users from using your widgets, because I simply cannot tell which element is currently focussed.

If you really find the default browser focus ring ugly, feel free to style it or provide another alternative (like a box shadow).

I agree also. Another method, albeit more advanced, is an option to not show on mouse clicks, and do show when using the keyboard or cycling through tab indexes etc.
I don't understand what you mean. It's just using border instead of outline. It would still show as active if focus is from a keyboard. The changes are not tied to click events.
Most of the elements do not change visually at all when tabbed to?
That's a browser implementation and an html issue. They're just displaying the items here, not putting them in a true form.

If you put these components into a <form> tab would work fine. The :focus state would still happen, and that's what's styled.

edit: I see what you're saying. I was only looking at form inputs, but i see no focus state on buttons as you said.

You're right. I just fixed this. :-)
Yes, it should be just a css file.

But how cool is that? A css file. Not as cool and professional as a 'Design System for <frameworkname>'.

Also, in my experience is that once a developer has mastered a framework, they are so proud of it the tie everything to the framework. To pledge their allegiance. And to signal to the pack "Hey, I'm part of the family!".

I'm so tired of seeing this attitude. This isn't about being "cool" this is a visual system for Vue that includes Vue components. Meaning this isn't a collection of styles, these are components that have been styled.

Why do you feel the need to make sweeping generalizations about the author and the author's work? Just shitting on someone/something for the sake of it?

(comment deleted)
I assume "Show HN" items aren't necessarily news, but just someone showing the community something new that may be of interest. There already appears to be too much flagging around here just because someone doesn't particularly like something. Let's not encourage more.
The orange is yellow. Great color pallet though, it's really easy on the eyes for the most part.

I'm not that into frontend dev, I mostly stick with backend and devops so for me, when I need to make a front end without a ton of bells and whistles, this kind of stuff saves my no-css-skills-on-my-resume butt!

Thank you for your feedback. I made it more orange. :)
I think the bigger value is in decoupling the visual style choices from the framework used. This one seems to be going the other direction. Not only is the overall visual style "burned in", but it is permanently set to "dark mode". This seems like a safe choice only for small, short-lived applications.

(By the way, the new stuff from Google in which they have made Material Design much more configurable, is a great shift in the right direction. Of course it would be even better if the whole material-ness of an application were a runtime switch, but there are significant obstacles to that.)

I see that blurry zoom transition effect all over the place. I suspect retina Macs don't do it, so designers keep doing it. Kinda reminds me that up until recently, Shopify used to only list Helvetica in their font-family, so Windows users saw Times New Roman. I see that stuff all the time coming from Mac-centric design firms.

^ I hesitated writing that, since it was all speculation, but then I clicked the link at the bottom saying "Hire me!" to see the designer's website and...

    html {
        font-family: "Avenir";
    }
No fallbacks whatsoever, so I'm seeing Times New Roman.
I would love to use this if it was in React. It looks really nice. It would also be cool if there was a light model that one could toggle between. Calling it dark mode implies their is a light mode no?
Yes, I'm currently building the light mode. ;)
Love it! I had to make my own dark mode for my app, I wish I had this before.
Yes I updated the cursor css property to "inherit". Thanks :)
Thank you for your feedback bshimmin. I removed the resize property and reworked the hover effect. :)