Front End Frameworks {For Dummies}

Written by Hunter Jansen on August 12, 2014

Recently I found myself researching some of the more popular front-end frameworks that are out there and building a semi in-depth comparison. Since there have been a ton of a ton of good video games coming out in the last few weeks(one of my major weaknesses), my spare time has been pretty engrossed in gaining levels and slaying various leagues of evil; so I decided to share it here in lieu of something JS.

##Introduction This writeup will serve as a study and comparison of various CSS/Front-end frameworks in an attempt to glean some sort of clarity as to which may be the best for our purposes. ###Summary

Framework
Responsiveness
(Poor,Fair,Good)
Compatibility
(Some/Most/All)
Usability
(Poor/Fair/Good)
Cost
(Free or $$$)
Overall Rating
(* - *****)
Bootstrap Good All Good Free * * * * 1/2
Kendo Poor All Good $$$ * *
Ink Fair Most Good Free * * *
Gumby Good Most Fair Free * * * *
Foundation Good All Good Free * * * * *
UI Kit Good Most Fair Free * * *
Tuk Tuk Fair Most Good Free * * *

###Contents

  1. Introduction
  2. Summary
  3. Detailed Reviews
  4. Bootstrap</li>
  5. Kendo
  6. INK
  7. Gumby
  8. Foundation 5
  9. UI Kit
  10. Tuk Tuk
  11. Final Thoughts
  12. General Recommendations</li>

###Detailed Reviews

For the sake of argument, we’ll be looking at five of the top most used and popular frameworks available, comparing them and providing insight on aspects such as their features, responsiveness, compatibility, usability, costs (monitory, technical and time to learn/implement), community, history and any others that seem relevant. Hopefully by the end, at least one clear leader prevails.

The frameworks investigated will be in no particular order:

  • Bootstrap
  • Kendo
  • Ink
  • Gumby
  • Foundation 5
  • UI Kit and
  • Tuk Tuk

Let it be known in advance that the author of this document has previous experience with Bootstrap, KendoUI and Foundation 5, though he will try to keep his bias to himself.

####Bootstrap</h3>

http://getbootstrap.com/

Developed by Twitter, this framework is currently on v3.1.1 and originally released in August 2011. Arguably the big kid on the playground; It’s well known for being quick and easy to get apps off the ground initially and is probably the biggest culprit for enabling the saturation of the web with it’s well recognized theme.

#####Features

  • One of the first frameworks to feature a dynamic grid layout

  • CSS
    • Global CSS settings, fundamental HTML elements styled and enhanced with extensible classes, and an advanced grid system.
  • Components
    • Over a dozen reusable components built to provide iconography, dropdowns, input groups,navigation, alerts, and much more.
      </p>
  • JavaScript
    • Bring Bootstrap’s components to life with over a dozen custom jQuery plugins. Easily include them all, or one by one.

#####Responsiveness

Bootstrap includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases. It includes predefined classes for easy layout options, as well as powerful mixins for generating more semantic layouts. Based on predefined classes, you can adjust your viewport to the screen size.

Ideally Responsive

#####Compatibility

Bootstrap has listed all of their compatibility issues here: http://getbootstrap.com/getting-started/#support, citing various issues with IE 9 and prior, as well as issues with android firefox/opera.

##### Usability

Typically usable, with a few naming conventions that are confusing if not immediately clear. The general consensus that my reading is that while the default styles and themes look good, they’re a bit difficult to customize.

#####Costs

Bootstrap is free, weighs in at about 100kb and has extensive docs on how to use it; many of the features are intuitive enough that the time to get off the ground is pretty minimal - particularly once familiarity sets in. Many people actually use Bootstrap as a way to mock up and ‘wireframe’ their designs.

#####Community Bootstrap has community forums here: http://www.twitterbootstrap.net/. They’re relatively active with a post or two a day; however it doesn’t appear as though there’s an official forum for Bootstrap.

#####Thoughts There’s a reason that bootstrap is one of the most used front end-frameworks out there. It’s responsive and has a robust set of features while not adding too much bloat to an app. The changes between version 2 to version 3 made it a bit more visually appealing by relying less on gradients, while maintaining its rounded borders on all aspects of its design. While the standard usage of bootstrap tends to be immediately recognizable and stylistically stale, with enough work and customization styles outside the norm can yield more unique results: builtwithbootstrap.com

####Kendo

http://www.telerik.com/kendo-ui

Developed by Telarik; who has been in the ui framework game since about 2002 in varying capacities. KendoUI is currently more of a toolkit than a css framework, and is even suggested to be used in conjunction with a more traditional framework. As a for profit company, telarik can offer support.

#####Features

  • Rich Views and Models With MVVM
    • Kendo UI provides a high-performance Model-View-ViewModel (MVVM) framework.
  • Ready for Touch
    • Kendo UI Web is ready for touch out-of-the-box.
  • Pixel-Perfect App Themes
    • Kendo UI includes 11 out-of-the-box themes, including: Default, Flat UI, Metro, Black, Blue Opal and Silver.

#####Responsiveness

KendoUI is built to work across any browser and device and as such, and while it works - the basic version of kendoUI’s widgets don’t seem to respond to screen size

#####Compatibility

Kendo claims that it works on all major browsers, including: Internet Explorer 7+, Firefox ESR, Chrome, Safari 5+ and Opera 11+.

##### Usability

Part of Kendo’s draw is the simplicity of implementing it’s features. Typically as long as you have the correct dom layout, you can call the kendo widget JSfunction and blam, the widget should work

#####Costs</h4>

For KendoUI Web, which is the Javascript version that doesn’t hook into ASP, doesn’t have mobile specific libraries or the visualizations libraries is $399; other components cost extra. The required documents are relatively lightweight and due to the simplistic nature of only needing the correct dom structure - the learning curve isn’t very high at all. However, customizing the CSS of elements outside of building a theme with the theme builder is complex and and frequently requires adjusting many classes to make minor changes - these changes typically also have unforeseen consequences in other elements due to the sharing of css properies among other widgets.

#####Community

Kendo has a relatively active and structured community forums- frequently involving a question with one response from an admin

#####Thoughts

KendoUI is a powerful set of tools that at a cost can provide some strong functionality to a site - that said, it’s a toolset, and not a CSS framework. The basic widget set, though while powerful isn’t truly responsive insomuch that it doesn’t adjust to the screen as just works on it. You CAN include mobile libraries to help circumvent this, but at an additional cost. Kendo also offers a very powerful set of visualization tools that may be worth considering down the line to strenghten our insuite reporting.

That said, it’s not exactly the sort of tool that fits in with the rest on this list.

####INK<

http://ink.sapo.pt/

Ink is a set of tools for quick development of web interfaces.

It offers a fluid and responsive grid, common interface elements, interactive components, a design-first approach with ease of use and simplicity at its core. Start integrating Ink in your projects and remove the hassle of building the basics, staying free to focus on what’s important.

#####Features

  • Instead of a grid layout featuring set column sizes, Ink uses percentage based widths
  • Most features are attempts to replicate features found in boot strap and even adds a bunch of ui features similar to what’s included in jqueryUI

#####Responsiveness

Being that Ink has a fluid ui design, it’s partially responsive in nature. However, in experimenting with demos provided - it appears to simply resize some things and often allows an overflow-x scroll, which is less than perfect.

#####Compatibility Ink works with all major browsers from ie9 >

##### Usability

Ink requires a few different steps to get it’s components set up - including dom set up, including the modules specifically in your scripting and then using the component scripts

#####Costs

Ink is free and not the most lightweight on the list, clocking in around 300kb after everything’s been included.

#####Community

There’s not really any community support, and the simple searching also doesn’t show much assistance to be found

#####Thoughts

Ink is a nifty idea, and it’s components are a good inclusion and one day may be powerful - but it’s not polished enough; There’s too many quirks; not enough support and the native styling is pretty much trying to emulate bootstrap. At this point in its life, I would recommend against using it in any production level apps

####Gumby http://gumbyframework.com/</div>

Gumby is a front-end framework made by Digital Surgeons and is currently on version 2

Gumby 2 is an amazing responsive CSS Framework. Websites built today must be mobile friendly in order to survive. Why have two different sites for mobile and desktop when you can have your main site be one size fits all? Gumby Framework is also incredibly customizable; it’s as easy as download, tweak, deploy!

#####Features

The Grid UI Kit Toggles & Switches Fancy Tiles Shuffle Responsive Images

#####Responsiveness

Gumby 2 is built to be a fluid and fully responsive framework; so all of its elements can gracefully adapt to their environment

#####Compatibility</h4>

  • Chrome
  • Firefox
  • Opera
  • Internet Explorer 8 – 10

##### Usability

Like most frameworks, gumby relies heavily on grid classes for most of its functionality. However, for a lot of its functionality it uses ‘gumby’ attributes in its tags (much like newly introduced data attributes). Grasping the finer points of these gumby attributes isn’t immediately clear, but can provide a larger amount of additional functionality.

#####Costs

Gumby is free and open source. The general conventions used make it relatively easy to pick up and go, especially after use. The full suite ends up at about 200ish kb

#####Community

Gumby really likes to emphasize its community support, with an active G+ community, GitHub repo and other social media sources

#####Thoughts

Gumby’s a very solid framework with an active community and support. The aesthetic is great and the responsiveness is on par with the other big leaguers. It has an emphasis on providing its designers and developers with tools and variables to easily make sweeping changes to designs that other options don’t really provide. Their community involvement is very encouraging. While Gumby doesn’t have as many components as its beefier competitors, the ones it does have are solid and the inclusion of its own icon set is nice to have. Definitely worth considering.

####Foundation 5 http://foundation.zurb.com/

Foundation is a fluid, responsive framework built by Zurb with beginnings in 2008; the first release was in 2011 and version 5 was recently just released

Foundation lets you quickly prototype and create sites and apps that work on any device (smartphones up through desktops and TV displays) with a library of tested components.

#####Features

http://foundation.zurb.com/learn/features.html

Foundation was the very first responsive framework, so it’s very mobile friendly and all components properly respond to fluid changes. It focuses on speed, reliability, functionality and aesthetics. Zurb provides resources for:

as tools to better support designers and any icon set needed.

#####Responsiveness

Ideally Responsive

#####Compatibility

http://foundation.zurb.com/docs/compatibility.html

All features work on ie 9 >. There is no official support for IE 7/8

##### Usability

Foundation manages most of its tasks through classes and requires very few js calls in order to get going. Most class names are familiar, so after a short time gaining familiarity adding/adjusting features is a relatively quick procedure.

#####Costs

Free and open source - The only thing you could find yourself potentially paying for is training classes put on by Zurb themselves. The full Foundation suite runs a bit over 100kb and since the learning curve is shallow, technical debt time shouldn’t be an issue.

#####Community

Foundation actively supports its community through forums that are hosted directly on the foundation 5 site. Foundation even encourages participating in the forums with ‘badges and achievements’. Outside of the official forums in which foundation developers actually frequently participate in, foundation offers direct emailing support and is active on other forms of social media.

#####Thoughts

Foundation provides a lot of tools that can help achieve fluid and responsive layouts quickly. They default styling is minimal and not as intrusive as other large frameworks, allowing for easier customization. Foundation also heavily supports its community and not only provides additional tools, but also support on how to use 3rd party tools. Personally, I find the aesthetic of foundation 5 to be very attractive and the ability to not have to write javascript to use the various components provides a level of simplicity that is shared with bootstrap. With full bower support and sass mixins for libsass precompiling to easily customize the loadout used via compass, it’s definitely one of the more easily customizable frameworks around. Add all that with integration with some of the industries top tools to optimize performance and compatibility and it’s a strong entry in the world of UI frameworks.

####UI Kit

http://getuikit.com/

UI Kit is a lightweight and modular front-end framework for developing fast and powerful web interfaces.

#####Features

UIkit gives you a comprehensive collection of HTML, CSS, and JS components which is simple to use, easy to customize and extendable. UIKit is written in LESS.

#####Responsiveness

UIKit is built to be fluid and responsive with a standard 12 column grid; all breakpoints work as expected

#####Compatibility No information readily available

##### Usability

UIKit’s classes are longer than most other options on this list and don’t follow the standard paradigm that most others use. While this isn’t necessarily ‘bad’, it does make it less intuitive when coming from any of the popular frameworks. Also, uiKit relies a fair amount on data-uk attributes on elements, and the js driven elements require manual scripting whereas more elegant solutions handle this for you.

#####Costs UIKit is free and open sourced on github. Depending on what loadout you roll with the components can be anywhere from 150kbish, however after adding their custom components, it could easily get to 250-300ish

#####Community UI kit maintains a dialogue with its community mostly through its github repo; I couldn’t find any forums dedicated to it and google searches on popular topics came up empty

#####Thoughts

UIKit seems like it really wants to function and look just like twitter bootstrap, but with in house added components and a differing grid layout system. With that in mind, considering its reliability on data attributes, file size cost, lackluster community, generally non-verbose descriptions and unoriginal aesthetic - I can’t imagine why in its current state, anyone would choose UIKit over its clear inspiration that is Bootstrap.

####Tuk Tuk http://tuktuk.tapquo.com/

Not trying to compete with Bootstrap or Foundation because they play in another league. Just worry about creating responsive and fully extensible sites easily.

Tuk Tuk is pretty much what you’d get if you were to study the flatUI site and decide to make a lightweight, responsive, grid based front-end framework

#####Features

  • CSS3 Powered
    • The premise is to use as much as possible the features of the latest CSS specification. Don’t try to use Tuktuk in your hated IE6.
  • Lightweight & fast
    • You don’t want to carry heavy stylesheets that only make for a slow loading site. Tuktuk is lightweight at just 9kb gzipped.
  • Object Oriented CSS
    • The purpose is to encourage code reuse plus faster and more efficient stylesheets that are easier to add to and maintain.
  • Community Project
    • Each new line of code is welcomed, I hope that developers and restless minds help me improve this humble project day by day.

#####Responsiveness

Tuk Tuk is a responsive framework with set breakpoints in its grid system. Aside from that, you can also set content to be visible/hide on various environments

#####Compatibility No information readily available

##### Usability</

There is no documentation on the classes used in tuk tuk, nor are there code snippets alongside the visual demos. While the class names used aren’t exactly archaic, having to dig into the framework’s css for every element you want to style makes it much more of a chore to use it than it would be with proper documentation

#####Costs

Tuk Tuk is free and open on github for contributions. The gzipped filesize is a whopping 9kb, so practically no extra bloat; however since there’s little to no documentation and the class naming conventions follow more of a semantic structure than any other framework (relying on things like header>nav as opposed to related classes - the spin up time and amount of time it takes to get familiar with the framework varies on how much your team follows the current semantics. (this also will hurt the framework when new tags and dom structures get released).

#####Community

Since Tuk Tuk is a relatively small project with only 10 contributors and only 44 issues brought up in its github issue tracker, it would seem that there is only a small niche of a community that may or may not be able to offer Tuk Tuk Specific support when needed.

#####Thoughts Tuk Tuk is very clean and lightweight and its mission statement very clearly states that it’s in a different league than most of the other frameworks on this list. With only a handful of features I could suggest Tuk Tuk for spinning up a minimal flatUI site, or perhaps even using it as almost a boilerplate css for a responsive, fluid sites that are looking for something to get them up and going quickly and can be added to pretty simply.

###Final Thoughts This document covered a brief overview of various sorts of front end frameworks, and provided facts and insights about each without providing any specific code comparisons. Some frameworks are established formulae with personalized tweaks, some are ambitious reimaginings of existing paradigms, some were light weight and some didn’t really bring anything new to the table.

The current champion of the web, Bootstrap has a stigma currently attached to it due to the easiness with which one can spin up a site and toss some content into a template without customizing any content. However, above examples proved that it’s not ENTIRELY bootstraps fault. With time, tweaking, and patience it’s possible to create a site that doesn’t have the immediately recognizable ‘bootstrap’ feel. While bootstrap 1 and 2 focused heavily on gradients and getting a solid grid down; they’ve been slow to iterate and were one of the late comers to the ‘mobile first’ design paradigm.

Foundation shares many of the same fortes as Bootstrap and it can easily be said that the two are very similar in their approach to most things. While foundation also focuses on ease and speed of styling and designing; they were the first ones to build a grid framework, offer their developers more tools than pretty much any framework out there, iterate quicker than any of the others (which, depending on your viewpoint can be good OR bad), adopt and adapt for newer technologies quicker and keep a much more open dialogue with its users and contributors.

Gumby has the potential to be an amazing framework and I’ll be keeping my eye on it a lot as it continues to grow. However, it’s current semi-reliance on data attributes is a turn off, as it would be nice to have the dom as clean as possible while still maintaining functionality. The other two large frameworks manage this just fine, and if it’s a direction that gumby chooses to go, it would greatly simplify its use. Also, the default typography looks jaggy on a few fronts. The current community is great, as it seems to have a lot of energy and desire from outside sources to succeed. Personally if I had to choose between Gumby and Foundation for aesthetics, foundation would probably come out on top: but only just barely. I find Gumby to be more immediately beautiful than Bootstrap however.

Tuk Tuk is a very minimal framework and probably belongs more in a boilerplate than any of the other options.

UIKit really doesn’t bring anything to the table and stylistically tries to emulate bootstrap so much that at this point I can’t find any reason why anyone who’s looking at UIKit wouldn’t instead go with Bootstrap.

Ink behaves a lot like you’d expect a company’s first version of a framework - it shows future promise, but at it’s current stage it seems a little clunky and not quite complete. Assuming that future versions of Ink do come out I can imagine that with the power of its components it could be a major player.

Kendo probably doesn’t so much belong on this list so much as the others as it’s much more of a toolkit than it is a full fledged fluid, responsive UI front-end. It has its value, absolutely, but its goal isn’t the same as the others.

###General Recommendation

Foundation 5 and Bootstrap 3 are the clear forerunners out of the bunch, with Gumby 2 not too far behind.

Both Bootstrap and Foundation are super solid choices with tons of features, a vetted history and a large support base. In looking to thoughts outside of my first hand research the general consensus I’ve found is:

The styles that come in Bootstrap out of the box are quite extensive, and the assumption is that you won’t be changing them extensively.

Foundation has fewer styles out of the box. While you can customize it with a separate style sheet, Foundation is more efficiently customized through its extensive Sass files. With less CSS to override, you can build a fully customized look more easily.

-Hunter Jansen