An ever expanding variety of frameworks is available to designers and front-end developers alike, ready for quick prototyping and implementation. There is a wide range of comprehensive and lightweight frameworks, and pretty much everything in between. With so many options, you might simply pick the most popular, but that may not be what’s best for your particular project.
Each framework has its advantages, and it’s up to you to figure out which will best suit your needs. Luckily, I’ve done some of the research and experimentation for you by taking a close look at four different frameworks. I’ve evaluated them on:
- Simplicity to learn
- Volume of external resources
- Browser support
The frameworks I examined are Bootstrap, Concise, Foundation, and Gumby. Keep in mind, I will not be advising you on which to choose or which is my favourite, merely explaining each framework’s strengths so that you can decide which is the best fit for you. Let’s dive in!
Note: I’m using the term Framework, but some might feel Library or Boilerplate are more appropriate.
Simplicity to Learn
Each of the frameworks I looked at have a relatively friendly, shallow learning curve, but I found Concise to be the best for a beginner. A leaner framework, Concise is light on features, allowing the documentation to be a quick, simple read.
If you’re looking for more than the basic features, there are a number of add-ons you can include in your project.
Middle of the road: Bootstrap and Foundation
Bootstrap and Foundation both have exceptional documentation to guide you through setup, modules and extensions. The wide range of features inevitably makes the documentation a bit more involved and daunting to the beginner, compared to Concise. Foundation does come with a demo file called index.html for newbies to experiment with and serve as a starting point.
More advanced: Gumby
The Gumby download also comes with a demo.html file to show its grid in action as well as ui.html with examples of each ui element. However, it’s more daunting to setup with strong encouragement to use SASS and CSS compiling in the terminal. While these are not essential to using Gumby, they do make up the bulk of the getting started documentation.
Gumby only has one download option, unlike Bootstrap and Foundation which give you the option to download different packages to suit your needs and abilities.
Volume of External Resources
Aside from the documentation, a quick Google search will provide you with any extra help you may need along the way. Foundation, however, has its own training centre and videos for a seamless learning experience. If you’d rather have small tidbits here and there, an immense number of blogs and tutorials have been written with tips for using Foundation, including here on Tuts+.
Close second: Bootstrap
Like Foundation, Bootstrap has been pored over by the design and front-end community since its conception. Tuts+ has a several courses and many tutorials available on the subject. An immensely popular framework, there are loads of blogs, articles, and forums at your disposal.
Middle of the road: Gumby
Gumby has also been covered well on blogs and in tutorials, although, not quite as extensively as Foundation and Bootstrap. The Gumby documentation will also point you in the direction of resources to learn Sass and useful tools for compiling CSS.
New kid on the block: Concise
Having just arrived on the scene of frameworks, Concise is yet to be examined as closely as the other three. Extra resources may not be as necessary though, considering the small size and versatility of this framework.
Tie: Bootstrap, Foundation, and Gumby
Bootstrap and Foundation are all very comprehensive frameworks, with a vast number of features and resources available to you. Each of them can be customised before you even download the files, which means fewer CSS overrides for you.
They are also versatile in the way they can be used, such as in combination with a CMS or for app prototyping. All three have similar UI features, although Bootstrap and Foundation have a few more than Gumby, such as typography, lightboxes, and accordions.
Concise is built to be a small framework, delivering only the essentials. Unlike the other three, Concise only gives you what’s absolutely necessary in its download, but allows you to build upon that as you like. This is great if you want to design UI elements yourself, as fewer CSS overrides will be necessary.
Browser Support and Accessibility
All of the frameworks in our test rank pretty similarly in this area, following most standards. Foundation is the only one which doesn’t support IE8.
Bootstrap warns about certain CSS3 properties that are not supported in IE8.
“Internet Explorer 8 and 9 are also supported, however, please be aware that some CSS3 properties and HTML5 elements are not fully supported by these browsers. – Bootstrap Docs
Bootstrap’s documentation covers in detail the browser and device support, as well as differences in the way certain properties are rendered. The next section of Bootstrap’s documentation covers accessibility. Foundation overviews accessibility best practices as well, but Concise and Gumby do not.
Skeleton is another lightweight framework, similar to Concise, and recently underwent an overhaul. It is most efficient for smaller sites, mainly focusing on navigation and typography. With even fewer styles than Concise it is slim, sleek, lightweight and very easy to get started with. It does not include Sass or minified CSS, unlike the other four frameworks examined.
There is no wrong choice for which framework you should use, only a better choice. My goal here was to help you figure out which is the better choice for you, based on criteria that might impact a project and your workflow. Whether you’re new to frameworks, or are more familiar with how they work, it is important to determine which will fit your project needs.
Here’s a brief summary in tabular form. ★ suggests an outright winner, whilst ☆ shows that the top spot was shared.
|Simplicity to learn||★|
|Volume of external resources||★|
Of the criteria looked at–simplicity to learn, external resources, versatility, and browser support and accessibility–one or two will rank higher in importance to you, and you should choose your framework accordingly. For those of you who have experience with Bootstrap, Concise, Foundation, or Gumby, which areas do you think your framework of choice performs best in? What type of projects do you use it for?
For those of you who lean on other frameworks, how do you feel your choice compares with these?