
Ask HN: What do you really need from a UI kit in 2018? - Bolduro
I&#x27;m close to completing the first version of my project, that uses the Microsoft Fluent Design as a base for web UI.<p>I&#x27;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.<p>So, what are the biggest pains when it comes to using such tools in your work?<p>Thank you in advance for any help.
======
ankyth27
I created one myself as a side project
[[https://underexpress.com](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

------
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.

------
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/](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.

~~~
rolha-capoeira
Done!

------
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.

------
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/](https://www.nespero.com/) Please, feel invited to
join. Thank you!

------
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.

------
pathartl
For custom applications for clients we've been using Propeller
([http://propeller.in](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.

------
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.

------
krayis
Event listeners

