Hacker News new | past | comments | ask | show | jobs | submit login
Now UI Kit – A Bootstrap 4 UI kit (creative-tim.com)
218 points by edotrajan on June 9, 2017 | hide | past | favorite | 57 comments



[edit] Crap, false alarm, the paid license is still the same garbled, unclear, non-professional nonsense that all of us complained about a year ago and that makes your pro versions completely unusable by real businesses, it's only the free versions that have a real license attached to them[/edit]

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


[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/


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.


Your edits being on top is a little confusing, but still.. HN is a fickle bunch.


Agreed, normally I'd put the edit at the bottom but I didn't want people to see my enthusiasm and jump out of the comment before getting to the no wait it's not that at all correction.


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


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


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.


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


Fancy publishing an npm or bower package?


Love it! Great work


What is a UI Kit? In regards to Bootstrap, is it fundamentally the same as a theme or a template?


It's really not clear to me from the site or any of these comments.


I would call that a bootstrap theme.


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


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


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.


Thank you for the feedback. It makes sense the points that you have. Since we are constantly improving the product based on the customers feedback we will make these changes in the next v1.1.0 update.


Hitbox on the slider rail is insanely small on pc.


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.


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.


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


yes and yes


It's good to be you!


Site seems a bit buggy on iPhone - can scroll horizontally


We will fix that, it seems the issue is from flexbox on iPhone.


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.


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.


Lovely. Could a designer pick out a nice blueish-purple to go with it? Need for a side project.


This is awesome thank you!


NOW UI KIT. A beautiful Bootstrap 4 UI kit. Yours for free.


Wow, thank you for posting it. This escalated quickly :-))




Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact

Search: