
Now UI Kit – A Bootstrap 4 UI kit - edotrajan
http://demos.creative-tim.com/now-ui-kit/index.html#
======
yodon
[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](https://news.ycombinator.com/item?id=12101122)

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

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

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

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

------
axelut
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](https://www.invisionapp.com/now) and we
released it under MIT License: [https://github.com/creativetimofficial/now-ui-
kit](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

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

~~~
axelut
Thank you for the feedback. We will take it into consideration for the next
v1.1.0 update.

~~~
vickychijwani
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/](http://contrastrebellion.com/)

[1]: [http://leaverou.github.io/contrast-ratio/#%23dddddd-on-
white](http://leaverou.github.io/contrast-ratio/#%23dddddd-on-white)

[2]: [https://www.w3.org/TR/WCAG/#visual-audio-
contrast](https://www.w3.org/TR/WCAG/#visual-audio-contrast)

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

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

------
sharpercoder
Contrast is clearly suboptimal. Lots of multigrey use in controls and
noncontrasting colors in colored items. This would not go past our UX team.

~~~
axelut
Thank you for pointing that out, we will do the necessary changes for a better
contrast in the next v1.1.0 release.

------
mtsmithhn
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](https://v4-alpha.getbootstrap.com/migration/#global-changes)

~~~
spuiszis
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](https://github.com/twbs/bootstrap/milestones)

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

~~~
axelut
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?

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

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

------
Sujan
That Toogle Button in the navbar for "White/Orange" makes no sense as an UI
element.

~~~
axelut
The original PSD/Sketch version of the UI Kit was built having the Orange as
the primary background image:
[https://www.invisionapp.com/now](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?

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

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

------
gondo
input with a gray background means it is disabled. seeing it here as active
input is immediate no go for me

~~~
tomcam
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?

~~~
gondo
yes and yes

~~~
tomcam
It's good to be you!

------
dutchbrit
Site seems a bit buggy on iPhone - can scroll horizontally

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

------
jswny
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](http://i.imgur.com/GZPY15u.jpg).

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

~~~
axelut
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

------
mundanevoice
Will Bootstrap 4 ever be released? I have been waiting so long for it.

~~~
rufusroflpunch
The alpha is very usable.

~~~
mundanevoice
Yup, could be, but by the very definition of alpha and beta means things could
change.

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

------
Simulacra
This is awesome thank you!

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

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

