5 ms·

I highly recommend UIKit [1] for anyone looking to pick a front-end framework. It solved tons of design problems that I faced with Bootstrap. Here are a few —

I highly recommend UIKit [1] for anyone looking to pick a front-end framework. It solved tons of design problems that I faced with Bootstrap. Here are a few — 1) Every class name is prefixed with "uk-": a wise decision to avoid conflicts and make it easy recognise the framework classes. 2) Useful generic classes: UIKit has many helper classes to avoid adding another rule—for removing padding, introducing a small margin, rounding the borders, adding a box shadow. 3) Clean theme: The default UIKit theme looks an order of magnitude better than Bootstrap's. 4) Additional helpful components: Loading spinner, Cards, Notifications, Sortable list. Shipping them by default saves a lot of time in searching and integrating them in your application. 5) Default Icons Support: The icons look clean and beautiful and because they are SVG, they don't require a font file. (Although, requiring Javascript can be turning off for some) 6) Much better components: Try creating an input box with an icon in bootstrap; with UIKit it only takes a little markup. Whenever I develop with Bootstrap, I have to spend half the time muting the existing styles and introducing new ones. With UIKit, it never felt like a problem. [1]: https://getuikit.com/docs/ https://getuikit.com/docs/

zcoyle 9y ago
What an irresponsibly named package...
- hak8or 9y ago
  Been staring at it for like 20 seconds and I don't see it. Looks like a normal name to me?
  - ggreer 9y ago
    The name conflicts with https://developer.apple.com/documentation/uikit https://developer.apple.com/documentation/uikit Though IIRC, Apple's UIKit came out a year after the web UIkit.
    - zcoyle 9y ago
      This seems to have been released in 2013 (correct me if I'm wrong), long after Apple's.
arkh 9y ago
First impression of this: a blank page. Ok, another javascript only website. Let's authorize it to see this the fanciful app we have there. And nope just text. Grey low contrast text. Once you change the stylesheet the components look ok. Still lot of let's-replace-icky-tables-with-divs.
mdo 9y ago
1) There are tools to do this for you in any project :). 2) Bootstrap 4 includes dozens of utilities like these and more. Still have some to add, but there are tons. 3) Our theme state is busted in the beta it will be there for final. Open to feedback! 4) v4 has cards. Spinners are slated for v4.1. Toasts are slated for v4.2 I think. Peep the project pulls page :). 5) Everyone else does amazing icons. We pulled our icon font out long ago in v4. Use any SVG library. 6) That’s a solid idea. Care to open an issue for it!? :D Take a look at the new v4 beta docs and let me know what else is missing or cumbersome for you, please. <3
- acdjuiamadfn 9y ago
  If he takes a look at v4 beta than ui-kit creator will ask him to look at the next beta. This is an endless cycle. I think he's comparing against 3 which is valid. And from your replies, it looks to me like he's right on all counts.
deleted 9y ago
[deleted]
oneeyedpigeon 9y ago
2) those classes sound suspiciously presentational in nature. Does that concern you, or have you decided the benefits outweigh the drawbacks?
- gnud 9y ago
  UIKit offers both Sass and Less versions - if you want semantic classes, build your own, by extending the presentational ones. A framework really can't offer semantic classes, since it doesn't know the semantics of your app/page.
extra88 9y ago
Unlike Bootstrap (and Foundation), UIKit has no statement about the accessibility of what it provides. Some of its JavaScript includes ARIA attributes but who knows if they did it correctly; adding ARIA wrong can sometimes make sites less accessible than if it wasn't used at all. UIKit has many CSS classes with hover states but not focus states and it's not easy to add them to classes like .uk-hidden because it's not a direct declaration but relies on a parent class. It lacks an equivalent to Bootstrap's .sr-only (visually hide but expose content to screen readers); you can always add such a class yourself but it makes the UIKit framework incomplete. UIKit makes it harder to make a site accessible than if UIKit was not used. CSS Frameworks are supposed to make the job easier by taking care of problems you're not even aware of; UIKit fails to do that in this respect.
gandutraveler 9y ago
I really liked ui-kit for my website https://www.itnry.com https://www.itnry.com .It just took couple of days of work to get it going. Huge fan of bootstrap too. For backend engineer who hated CSS and front-end, Bootstrap really helped me build good looking ui's at work where instead of plain old Dev JSP
- ChristianGeek 9y ago
  Um, you may want to look at your home page on an iPhone.
  - gandutraveler 9y ago
    Thanks for pointing out. I need to test responsiveness. It's just 2 days of work, so it's still WIP.
kumarvvr 9y ago
Came here to say this. Just started using UIKit and it's awesome. Personally I agree with the complaint about BS that all sites built with it look similar and honestly, bland.
SippinLean 9y ago
.uk-list>li::before, .uk-list>li::after { content: ""; display: table; } Yikes, it's this mixing class/element/combinator-style styling that BS4 did away with. Granted, some of it was still in 3.
dgut 9y ago
1) I don't know if that's a wise decision. To me, BS serves as a "base", my custom classes extend and borrow from BS and everything is knitted together. 2) BS 4 added a ton of helper classes, to the point where I find myself using these rather than writing custom CSS. 3) Ultra light font weight, light gray font color, capitalized text might look great, but I prefer better usability. The point with BS (as of my observations that is) has always been to provide a no-bullshit™ style. It doesn't follow trends, it does what's sane. 4) I half-agree. Not sure how useful it is to have "notifications". I personally never needed that and doubt their usability on mostly document oriented websites. 5) BS used to come with icons, but now there are tons of icon sets to choose from. BS is a CSS framework after all. 6) Besides that, what components does UIKit have that BS can't do? Maybe sticky behavior with a delay would be helpful. BS is 125 KB vs UIKit 256 KB minified though (that's only for CSS), besides all the accessibility issues.

zcoyle 9y ago

What an irresponsibly named package...

hak8or 9y ago
Been staring at it for like 20 seconds and I don't see it. Looks like a normal name to me?
- ggreer 9y ago
  The name conflicts with https://developer.apple.com/documentation/uikit https://developer.apple.com/documentation/uikit Though IIRC, Apple's UIKit came out a year after the web UIkit.
  - zcoyle 9y ago
    This seems to have been released in 2013 (correct me if I'm wrong), long after Apple's.

arkh 9y ago

First impression of this: a blank page. Ok, another javascript only website. Let's authorize it to see this the fanciful app we have there. And nope just text. Grey low contrast text. Once you change the stylesheet the components look ok. Still lot of let's-replace-icky-tables-with-divs.

mdo 9y ago

1) There are tools to do this for you in any project :). 2) Bootstrap 4 includes dozens of utilities like these and more. Still have some to add, but there are tons. 3) Our theme state is busted in the beta it will be there for final. Open to feedback! 4) v4 has cards. Spinners are slated for v4.1. Toasts are slated for v4.2 I think. Peep the project pulls page :). 5) Everyone else does amazing icons. We pulled our icon font out long ago in v4. Use any SVG library. 6) That’s a solid idea. Care to open an issue for it!? :D Take a look at the new v4 beta docs and let me know what else is missing or cumbersome for you, please. <3

acdjuiamadfn 9y ago
If he takes a look at v4 beta than ui-kit creator will ask him to look at the next beta. This is an endless cycle. I think he's comparing against 3 which is valid. And from your replies, it looks to me like he's right on all counts.

deleted 9y ago

[deleted]

oneeyedpigeon 9y ago

2) those classes sound suspiciously presentational in nature. Does that concern you, or have you decided the benefits outweigh the drawbacks?

gnud 9y ago
UIKit offers both Sass and Less versions - if you want semantic classes, build your own, by extending the presentational ones. A framework really can't offer semantic classes, since it doesn't know the semantics of your app/page.

extra88 9y ago

Unlike Bootstrap (and Foundation), UIKit has no statement about the accessibility of what it provides. Some of its JavaScript includes ARIA attributes but who knows if they did it correctly; adding ARIA wrong can sometimes make sites less accessible than if it wasn't used at all. UIKit has many CSS classes with hover states but not focus states and it's not easy to add them to classes like .uk-hidden because it's not a direct declaration but relies on a parent class. It lacks an equivalent to Bootstrap's .sr-only (visually hide but expose content to screen readers); you can always add such a class yourself but it makes the UIKit framework incomplete. UIKit makes it harder to make a site accessible than if UIKit was not used. CSS Frameworks are supposed to make the job easier by taking care of problems you're not even aware of; UIKit fails to do that in this respect.

gandutraveler 9y ago

I really liked ui-kit for my website https://www.itnry.com https://www.itnry.com .It just took couple of days of work to get it going. Huge fan of bootstrap too. For backend engineer who hated CSS and front-end, Bootstrap really helped me build good looking ui's at work where instead of plain old Dev JSP

ChristianGeek 9y ago
Um, you may want to look at your home page on an iPhone.
- gandutraveler 9y ago
  Thanks for pointing out. I need to test responsiveness. It's just 2 days of work, so it's still WIP.

kumarvvr 9y ago

Came here to say this. Just started using UIKit and it's awesome. Personally I agree with the complaint about BS that all sites built with it look similar and honestly, bland.

SippinLean 9y ago

.uk-list>li::before, .uk-list>li::after { content: ""; display: table; } Yikes, it's this mixing class/element/combinator-style styling that BS4 did away with. Granted, some of it was still in 3.

dgut 9y ago

1) I don't know if that's a wise decision. To me, BS serves as a "base", my custom classes extend and borrow from BS and everything is knitted together. 2) BS 4 added a ton of helper classes, to the point where I find myself using these rather than writing custom CSS. 3) Ultra light font weight, light gray font color, capitalized text might look great, but I prefer better usability. The point with BS (as of my observations that is) has always been to provide a no-bullshit™ style. It doesn't follow trends, it does what's sane. 4) I half-agree. Not sure how useful it is to have "notifications". I personally never needed that and doubt their usability on mostly document oriented websites. 5) BS used to come with icons, but now there are tons of icon sets to choose from. BS is a CSS framework after all. 6) Besides that, what components does UIKit have that BS can't do? Maybe sticky behavior with a delay would be helpful. BS is 125 KB vs UIKit 256 KB minified though (that's only for CSS), besides all the accessibility issues.