Now UI Kit – A Bootstrap 4 UI kit(demos.creative-tim.com)
demos.creative-tim.com
Now UI Kit – A Bootstrap 4 UI kit
http://demos.creative-tim.com/now-ui-kit/index.html#
58 comments
[edit]False alarm, the pro Material kit still uses the same terrible non-professionally written "creative tim" license HN commenters complained about a year ago (sample link in parent comment)[/edit]
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]
[0] http://demos.creative-tim.com/
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]
[0] http://demos.creative-tim.com/
Why would the paid licence be the one to be the unprofessional, custom made (cringe) licence? I would think that's the one that needs a clear, established licence the most. I don't like it.
I don't understand it either, and HN's response is equally puzzling. When I initially reported yay there's a decent license I got showered with upvotes. Now that I've added an edit to say actually no the license is still terrible I'm getting showered with downvotes. It's not my fault the license is terrible and we've already had tons of people chime in previously to complain about the terrible "license" for these great products.
Ah, the classic "downvote the messenger" response. If people don't like the licence, they should upvote you for visibility of the problem, or make a comment themselves.
I once saw someone comment on Reddit how he upvotes people he gets into arguments with so more people can see just how right he is.
Hi guys, here is Alex, one of the creators of this UI Kit. It was built based on the NOW UI made by Invision: https://www.invisionapp.com/now and we released it under MIT License: https://github.com/creativetimofficial/now-ui-kit so you can use it without any issues for commercial projects or personal websites.
If you have any feedback, suggestions or issues please let us know. I would be glad to talk in comments.
Best, Alex
If you have any feedback, suggestions or issues please let us know. I would be glad to talk in comments.
Best, Alex
It has a lot of potential but as many others have pointed out - usability is not very good. On certain screens you won't even see the placeholders in the text boxes. Heck, even on a Macbook Pro Retina it's hard to see, and those have really good screens. Apart from that, some of it looks pretty good, but there's tons of this kind of stuff out there already.
Thank you for the feedback. We will take it into consideration for the next v1.1.0 update.
For the record, I have such a screen: a Samsung SyncMaster B2030, about 6 years old. Several of Now UI's widgets (form placeholders, disabled input labels, tab labels on white background) are nearly unreadable on this screen.
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
[2]: https://www.w3.org/TR/WCAG/#visual-audio-contrast
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
[2]: https://www.w3.org/TR/WCAG/#visual-audio-contrast
Button contrast.
Quickly and easily, can you say which of these elements is selected?
http://imgur.com/a/BnHXf
That's, to be blunt, horrible contrast.
Quickly and easily, can you say which of these elements is selected?
http://imgur.com/a/BnHXf
That's, to be blunt, horrible contrast.
I like the look and thanks for releasing it. I think the light greys are a little too light, especially on text and inputs. I struggled to see them without straining.
Thank you for the feedback, we will see what we can improve. Most of the rules were followed from the original UI Kit but on web it seems we should do some minor changes.
It looks good, though for a general UI framework I'd definitely recommend ensuring the colour contrast meets at least AA accessibility guidelines.
I'll second this. Since in a lot of places (Canada for example), WCAG 2.0 Level AA is legally required for new commercial websites and apps, you'll be limiting your usefulness by not adhering to this.
Looks very nice - but I agree with the other feedback - text contrast needs to be reworked in some cases, for instance the warning notification. Keep in mind that different devices will have different color qualities that put some text into slightly unreadable territory, particularly smaller text.
Found some errors with the tooltips. Caused by quick mouse-over of the tooltip button before the tooltip has completely faded.
http://i.imgur.com/BcOI0XW.png
http://i.imgur.com/BcOI0XW.png
Fancy publishing an npm or bower package?
Love it! Great work
Contrast is clearly suboptimal. Lots of multigrey use in controls and noncontrasting colors in colored items. This would not go past our UX team.
Thank you for pointing that out, we will do the necessary changes for a better contrast in the next v1.1.0 release.
Lots of layout issues on my iphone such as the nagivation close button not centering.
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.
https://v4-alpha.getbootstrap.com/migration/#global-changes
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.
https://v4-alpha.getbootstrap.com/migration/#global-changes
Yeah I'm having trouble understanding why you release this or even use it in production when the underlying framework behind it isn't fully-baked yet? I've been messing around with the alpha bootstrap and there are a number of issues, the beta version should be launching soon: https://github.com/twbs/bootstrap/milestones
Question about how these UI Kits are made:
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).
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).
There are 2 ways of working with Bootstrap. 1: the one that you specified where you change the variables directly in LESS/SASS (BS4). You need to know LESS/SASS for those changes. And 2: the one where you don't know LESS/SASS/CSS and you just want a different design for the default bootstrap. You download a UI Kit that has a new design and it is also containing new elements/example pages. Using the UI Kit/Theme/Template, you don't have to dig deeper into the variables if you don't want or you don't know how to do that. You just start to work with the backend and you are covered on the front end. Now the reason for us, here I'm talking just about our company, don't know why other do it in this way or another way, we want to overwrite the bootstrap and keep bootstrap as a separate file so we can easily migrate from v3.3.0 to v3.3.5 or from v3.3.5 to v4 alpha 4,5,6 etc, without doing major changes in our UI Kit. Makes sense?
+1 on this
My two cents:
- 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.
- 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.
That Toogle Button in the navbar for "White/Orange" makes no sense as an UI element.
The original PSD/Sketch version of the UI Kit was built having the Orange as the primary background image: https://www.invisionapp.com/now Since that is not the most usable case for a website, we made also the white background version. We just wanted to show to the users that it is very easy to go between the states and all the elements are working fine on white/orange background. Makes sense now?
Agree with Sujan, I found it very confusing too. At first glance it seems like the switch's 2 states are "Now UI Kit" and "White", which of course makes no sense. Only when I clicked it did I discover the other state.
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.
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.
Why it is there I understand.
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.
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.
These collections of ui elements or kits as it is named here never made sense to me. If you designed a nice button or slider or dropdown, hell yeah, publish the css and if necessary js. But bundling everything that might be needed does not make sense to me.
input with a gray background means it is disabled. seeing it here as active input is immediate no go for me
Did you know that the CSS is user-modifiable? Do you consume only HTML and CSS in the form of perfect templates that can be used by you or your team immediately?
In a different context, I would totally upvote your comment, but in Now UI's case the contrast is extremely low and gondo's argument is quite valid. See my comment elsewhere [1] for hard numbers on the contrast.
[1]: https://news.ycombinator.com/item?id=14540281
[1]: https://news.ycombinator.com/item?id=14540281
Looks nice but am I supposed to be able to read the text below the introduction? The monitor component is completely blocking it: http://i.imgur.com/GZPY15u.jpg.
THIS. LOOKS. AWESOME!
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.
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.
Thank you for the kind words! We are glad that you like it. On the regular basis, we add more elements like datatables, select2 etc. in the PRO versions of the products that we develop :D
Will Bootstrap 4 ever be released? I have been waiting so long for it.
The alpha is very usable.
Yup, could be, but by the very definition of alpha and beta means things could change.
There are only 10 or so remaining issues in the beta milestone.
[deleted]
Lovely. Could a designer pick out a nice blueish-purple to go with it? Need for a side project.
This is awesome thank you!
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!
[0] https://news.ycombinator.com/item?id=12101122