HN Explorer

Ask HN: What do you really need from a UI kit in 2018?

25 points by Bolduro ↗ HN
I'm close to completing the first version of my project, that uses the Microsoft Fluent Design as a base for web UI.

I'm trying to get as much feedback from developers who use UI kit on daily basis and I thought that HN would be a great place to do so.

So, what are the biggest pains when it comes to using such tools in your work?

Thank you in advance for any help.

22 comments

[ 234 ms ] story [ 2098 ms ] thread
sgb_QQ
One thing I personally value in something like this is the ability to opt in or out of features, so that I could use it a fairly low level set of utilities (think large user-facing piece) but also as a full-blown opinionated UI library with lots of things ready to go (think internal piece).
Bolduro
I think I can check this one off by introducing modularity. The way I see it is that you have a download page where you can check all the features you want your kit to consist of and get just that.
WorldMaker
I think most suggestions file under "Good Documentation". Is example bits of UI easy to copy and paste? How well have you documented your "helpers" and "glue" and less obvious stuff? Have you documented your goals in the project? Your non-goals and things you know don't work right?

Also, I'm curious to see how you are applying the MFD to web. I'd be interested to see that.

Bolduro
"How well have you documented your "helpers" and "glue" and less obvious stuff? Have you documented your goals in the project? Your non-goals and things you know don't work right?"

This two questions really made me think about those two crucial parts. I'll surely let the users know about those with the first release. Thank you.

As for the MFD - I'm following the Microsoft guidelines all the way in hope to keep it a faithful re-creation, but simplified.

ankyth27
I created one myself as a side project [https://underexpress.com] and learned following things:

- How do you manage the updates in your ui-kit if base framework is changed [bootstrap, foundation, jquery, other plugins.]

- Modularity: If i need only a few components i should have the option to include only those and not any unnecessary bloat.

- Availability as package [npm etc.]

- Example apps and landing pages. Some UI kits give email ui, todo list ui etc.

- The kit should be lightweight + clean css [sass/less] + clean html.

- Browser compatibility.

- Easy customization.

If you are looking to develop something collaboratively I would be willing to participate.

I hope this helps you.

Bolduro
Thanks for such a great info!

- Modularity: If i need only a few components i should have the option to include only those and not any unnecessary bloat. - Check

- Availability as package [npm etc.] - Check

- Example apps and landing pages. Some UI kits give email ui, todo list ui etc. - Check, but this will surely be introduced later

- The kit should be lightweight + clean css [sass/less] + clean html. - Check

- Browser compatibility. - Still to be tested, but works fine on most browsers

- Easy customization. - Check

juliangoldsmith
This is kind of nitpicky, but on your site you say Saas where I think you mean Sass.
porker
Oh that's nice - a kit with ready coded components that aren't just images (like far too many on theme marketplaces).

Yes people do want to collaborate on things like this. I'd also like collaboration on a page/email builder, so all of us mugs building SaaS can include something well tested and not reinvent the same software (again).

Good work!

Bolduro
Quick note here.

I've asked the same question on some of the other forums and was surprised how people want to help each other with such project. Seems like it's the same case here.

I do not have anything to show to the public yet, but I've prepared a waiting list for all the people who would like to see the final effect - https://www.nespero.com/ Please, feel invited to join. Thank you!

everdev
Something that's plug and play and works cross-device. If I'm using a UI kit, I don't want to be crafting my own styles, so something that's obviously customizable for my brand, but includes everything I need for my site out of the box.
Bolduro
Thanks for the hint. I'm aiming into something similar to BS4 in terms of use simplicity - you download the kit, plug it into your site and go.
rolha-capoeira
Don't make any assumptions about the end-user (developer). I've tried many web UI kits and ditched many because they got in the way.

Ideally, I'd like to be able to include the modules and see no immediate effect — completely opt-in. I could first opt-in to the basic styling via a class on the body tag. Then I could opt-in to other components via classes and specific structures. Namespacing the CSS classes would be great, too, so there's little chance of colliding with my custom CSS [first-party, first-class] classes [that I shouldn't have to namespace].

The web UI kit I'm using now that comes closest to this ideal for me is https://getuikit.com/.

Bolduro
Thank you, I'll surely keep flexibility in mind. However, don't you think UI kits are meant to do the most of the job for the developer and should not require any additional work on your side? (as long as it does not interfere with your stack ofc)
rolha-capoeira
I suppose that depends on what type of user you're targeting. I'm a front-end engineer, not a designer, so I want to be able to smoothly integrate with tools with minimal conflicts. I don't think it's asking too much of a user to add a class to the body. Consider that even if you're targeting non-programmers (designers), they will still customize the UI on top of your library and therefore know how to add a class to a tag.

On the other hand, I've tried somewhat- or very-opinionated UI kits and if there was something I didn't like or want to use, I had to find a way to opt-out, which was always ugly and not sustainable.

Additionally, this helps semantics and readability, and helps keep things scoped. What if I want to use your UI kit in a subsection of my document but not the whole thing?

To me, that is the holy grail of UI kits.

Bolduro
That's a view worth keeping in mind. Does the kit you have mentioned above work for you in that way?
rolha-capoeira
No, but it's the closest I've seen yet. It applies some pretty tame styles on inclusion, and every class is namespaced.
Bolduro
I'll sure take a closer look at how it feels and works. Thank you. Feel free to join the waiting list - I'd love to hear a feedback from you on the first version.
pathartl
For custom applications for clients we've been using Propeller (http://propeller.in)

It looks good (even if people think material is outdated) and is broken out into components. It does most everything we need and is based on Bootstrap.

Bolduro
I know Propeller and I think the guys did a great job there. My project will also be based on Bootstrap to make it easy to jump in for most devs. I've put the link to the waiting list below and I'd love to hear your opinion the moment it's out.
tboyd47
Biggest thing is not exposing any internals to customization, but just coding a widget, wrapping it in a closure and calling it a day.

It's such a pain to have to fork a UI library or include the source code into my build pipeline just to make a small change.

One of the easiest and most helpful techniques for library authors to do this in JS is to make your public methods optionally accept functions that resolve to whatever data type you are expecting.

  if(typeof arg == "function") { arg = arg(); }
In ancient times, they called this the "open/closed" principle.