User Interface Framework Showdown: Bootstrap, Foundation, KendoUI, and jQueryUI

Standards might not be exciting, but man, they’re important. Without them everyone does their own thing, reinvents the wheel, and unnecessarily injects new frameworks into the system. Lately the importance of standards has become painfully obvious. In my current role, our app has been around since the days of ASP.NET 1.0, so it’s over a decade old in various spots. In that time it’s picked up over a half dozen data access frameworks! And the story with the user interface frameworks is even more fragmented:

Wow. And this list doesn’t even include the dozens of jQuery plugins that have been pulled in over the last few years like Fancybox, tablesorter, toastr, etc. So the question is, how do you pick one framework? And wait, is that even a practical goal these days? To do so, you obviously have to understand what each offers so you’re clear what you’re giving up.

Since our application is behind a login and requires a lot of rich interactions, we’re moving toward primarily client-side rendering via Knockout with Durandal. So to simplify this list, one important decision involves selecting a client-side UI framework. I pitted four leading client-side UI frameworks against one another for consideration: jQueryUI, KendoUI, Bootstrap 3, and Foundation 5. And yes, Foundation isn’t in the list above but is worth a look. Perhaps it checks all the boxes and can become the one new standard?

XKCD - https://xkcd.com/927/

Okay, fat chance. These all slice the market a little differently. You likely find it odd that I’m pitting jQueryUI and KendoUI against responsive CSS frameworks, but the fact is, as you can see below these four cover a lot of similar ground. I summarized their features in a table I compiled below. Unique attributes are highlighted in yellow.

  jQueryUI KendoUI Bootstrap Foundation
  1.10.4 2013.4.1324 3.1.1 5
Accordian / Panelbar x x x x
Autocomplete x x x  
Alerts   x x x
Badges     x  
Breadcrumbs     x x
Button x x x x
ButtonDropdown     x x
Calendar   x    
Color Animation x      
Colorpicker   x    
ComboBox   x    
DatePicker x x    
DateTimePicker   x    
Draggable x x    
DropDownList   x    
Editor   x    
Grid (paginated table)   x    
Icons x x x  
Joyride (guided tour)       x
Labels     x  
Lightbox       x
ListView   x    
Menu x x x x
MultiSelect   x    
NumericTextbox x x    
Pagination   x x x
Pills     x  
Position x      
ProgressBar x x x x
Scheduler   x    
Slider x x    
Splitter   x    
Rotator       x
Resizable x      
Selectable x      
Sortable x x    
Tabs x x x x
TimePicker   x    
Tooltip x x x x
TreeView   x    
Upload   x    
Validation   x   x
Window x x x x
       
 
  jQueryUI KendoUI Bootstrap Foundation
Other Features        
Themeable x x x  
Templatable x x
Knockout Compatable KO/jqueryUI KO-Kendo KO-bootstrap  
HTML Input styling   x x x
Grid System     x x
JS Size (minified) 223 276 28 75
CSS Size (in K) 31 81 97 106
Total size (in K) 254 357 125 181
Browser support IE7+ IE7+ IE8+ IE9+
Sass integration     x x
Support   Telerik   Zurb
Visual Studio Default     x  
Requires jQuery x x    
Fluid grid resizing       x
Dev team 8 core Telerik Open. 500+ Zurb. 15

Summary

Each framework has it’s merits. jQueryUI is easy to use and well documented, though it’s progress lately has been slower than the others. Bootstrap is lightweight and very popular. It has a rich plugin ecosystem that fills in many features that aren’t listed above. Kendo offers many powerful and unique features with a high level of polish. And it certainly should since it’s not free! Foundation is the only option with a fluid resizing grid, and it arguably offers the most compelling mobile first story. Which would you pick if you could only choose one? How does your team avoid ending up with a laundry list of UI frameworks?

Subscribe to Email Updates (No spam. Just new posts.)

5 thoughts on “User Interface Framework Showdown: Bootstrap, Foundation, KendoUI, and jQueryUI

    • Thanks for the reply Burke! I’ve updated the table to reflect KendoUI alerts. I’ve also updated the icons row since both jQueryUI and KendoUI offer a limited set of icons. Foundation 5 also offers an icon set, but it’s not part of the core so I’ve left it off the table.

      And by the way, I’m very impressed with KendoUI. We’ve been really happy with the results in our apps!

  1. Nice comparison. Many of these frameworks are easy to mix and match. I prefer the jQuery + Bootstrap combo personally as most of the ‘unique’ features of Foundation 5 and Kendo UI are available via free community plugins that you can just drop on top of Bootstrap. Plus, jQuery and Bootstrap both being free and coming with a new MVC 5 project as default is a huge plus.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>