When it comes to developing a responsive website, the first order of business is to select the right framework. There are several options to choose from, each one supplying the CSS source code to create a responsive grid. Some frameworks also include cross-browser compatibility solutions, stylized CSS classes, and even Javascript components.
That being said, no two frameworks are exactly alike. So how do you know which one is right for your project?
Currently, three of the most popular frameworks are Skeleton, Bootstrap, and Foundation. Let's take a quick look at each.
Skeleton
As the name suggests, Skeleton is a bare-bones framework. It only offers the basics and lacks CSS and Javascript components available in other frameworks.
However, Skeleton is a solid choice if your project requires a lightweight framework or needs to be developed quickly. In addition, if you are new to responsive web design, Skeleton is a great way to get your feet wet.
One final item to note about Skeleton is that it is based on a 16 column grid, whereas Bootstrap and Foundation utilize a 12 column grid. This is not necessarily a drawback; just something to consider when deciding on the right framework.
Bootstrap
Bootstrap is the opposite of Skeleton. It offers a plethora of CSS components including customized navigation, thumbnails, and pagination - just to name a few. Bootstrap also includes Javascript components for a responsive carousel, modals, tabs, and even alerts.
While Bootstrap 2.0 was responsive, the newly-released Bootstrap 3.0 is mobile first. This means that the framework's grid system now accounts for mobile devices first versus seeing them as the exception to the rule.
In addition, Bootstrap gives you the ability to hide content - or make it visible - depending on the device viewing the site. (Otherwise known as visibility classes). Another great feature is their customize page, where you can select the CSS and Javascript components you want to include in your files before downloading them, thus reducing their size.
In short, Bootstrap is the perfect framework if you need a variety of components. Keep in mind, though, that Bootstrap can be a steep learning curve for beginners. However, the Bootstrap site does offer thorough, detailed documentation to help get you started.
Foundation
Like Bootstrap 3.0, Foundation is mobile first. It also offers CSS and Javascript components not included with Skeleton - including visibility classes. The list is not quite as extensive as it is with Bootstrap. However, Foundation does offer some unique, sleek components such as flex video, interchange, the block grid, and off canvas layouts. It's also a great choice if you need a quick prototype.
Again, like Bootstrap, Foundation may be a steep learning curve for beginners. The website's documentation and online training will definitely help get the ball rolling, however. And if you're in a pinch, or just want to play around, you can take advantage of one of their many templates.
In the end, whether Foundation is right for you may depend on what components your project requires. It should also be noted that Foundation utilizes SCSS. (Bootstrap is based on LESS CSS.)
What's My Preference?
While I have researched all three frameworks to some extent, the only framework I currently have experience with is Bootstrap. As the Webmaster for the Allegheny County Department of Human Services, I am involved in the county's website redesign project. The county utilizes Ektron's CMS and the latest version - version 9.0 - comes with Bootstrap integration.
That being said, I do love Bootstrap. Being that it offers so many components, it has served me well on various side projects. And while it was a steep learning curve for a beginner, it has given me a firm grasp on responsive web design that is ultimately priceless.
