Now UI Kit – A Bootstrap 4 UI kit
demos.creative-tim.com
demos.creative-tim.com
On behalf of myself and all the other commenters who asked for a real license last year when your material UI kit hit HN[0], I'd like to say a big THANK YOU for ditching your old home-written license and going with something real so we can actually use this release. Can't wait to see what you'll build next!
W00t! It looks like you also re-released the material kit under MIT, and have a ton of other stuff available. You might consider adding a link to your list of demos (or a more prominent link or list) on the product demo pages. If we hadn't messaged here on HN previously, I'm unlikely to have gone looking for other stuff and found all your other demos[0]
If you have any feedback, suggestions or issues please let us know. I would be glad to talk in comments.
Best, Alex
I actually checked (using [1]) the contrast ratio of some of these widgets, and they work out to very low numbers:
- Form placeholders - #ddd on #fff - contrast ratio 1.4:1
- Labels of disabled checkboxes - #9a9a9a on #fff - ratio 2.8:1
- Tab labels - #b8b8b8 on #fff - 2.0:1
This is far lower than the W3C's recommended minimum ratio of 4.5:1 [2] for text smaller than 24px. And since the font weight is often lower than normal, the perceived contrast ratio is even lower than the figures above suggest. I think the contrast needs major improvements for decent UX.
PS: http://contrastrebellion.com/
[1]: http://leaverou.github.io/contrast-ratio/#%23dddddd-on-white
Quickly and easily, can you say which of these elements is selected?
That's, to be blunt, horrible contrast.
Bootstrap 4 switched to a global font size from 14px to 16px. This seems to be rendering a 12px font for buttons and such on my iphone. Overall element sizes seem small.
Generally when I'm building a UI on top of bootstrap, I import all the LESS files into my project, and then compile them together with my project LESS files.
This lets me, for example, change the brand-primary color, or the base font size, etc, without having to override every component that might use that variable.
However, this UI Kit, as well as a number of other kits I've seen take in the pre-compiled Bootstrap CSS and override each item individually.
Is this the preferred way to do UI Kits? If so, what's the reasoning behind it? We build a lot of themes and UIKits for internal use, and would love to know if we're doing it wrong (tm).
- The hit boxes on the toggle switches is very small and finicky. I tapped three times before it worked.
- Some of the controls look disabled, like the slider and toggle buttons. Combined with finickiness, it's a real UX frustration.
- The box shadows make the animations very slow. On my nexus 5x, I get maybe 5fps at best. It would be worthwhile to explore ways to improve them, like using SVG instead of box-shadow.
Otherwise, everything looks very clean.
I think you could add some space on the left side of the toggle and maybe show the "Orange" label there, or at least just add the space so it looks separated from the "Now UI kit" brand label.
But using a UI element to switch between two states that only shows one of those, exchanges the option it shows at the same place and is normally used to indicate on/off states is a bad choice.
It would make semi sense if left was "white", right was "orange" and switching the toggle to each side chooses what it says on that side.
Love it.
Especially for people like me, that still uses stick figures for everything.
I am missing only a couple of things. Styling data tables so it is consistent and select2 for the drop downs.