Foundation Framework: A responsive front-end framework for your site

With the number of users accessing websites via mobile devices rising daily, businesses are asking their developers to create a mobile version of their site; however, there are several ways to go about building a mobile site. Since the task of developing a site that looks the same in the different browsers can be complicated, frameworks have been developed to make that task much easier.

There is another important thing to consider when developing a site for different browsers: You’re also developing a site for various device sizes. Instead of making countless versions to incorporate those users who visit from an iPhone, Android, Windows, BlackBerry, iPad, iPad Mini, Kindle, etc., many developers are using frameworks to create responsive web designs.

Foundation Framework was developed to help web developers easily create sites that utilize responsive web design. Foundation Framework is one of my favorites for many reasons, including:

It’s Customizable

The default option includes the basics to build a website. Then, you can customize it to include only what is needed, with pre-designed templates, change colors, number of columns, fonts, etc.

The Grid

Foundation's grid is formed by columns, which can be divided into 12 columns centered on the screen. Each column supports nesting - each column can be subdivided into other 12 columns plus rows, etc. This flexibility gives you the ability to build any design.

Foundation has a large number of pre-designed templates to build a page (i.e. Banded, Blog, Grid ). With this framework, all you need is to be clear about how you will be designing your site. If no template fits your idea, you can create easily your own design from scratch.

Responsive Web Design

Foundation by default comes with “Responsive design”. A JavaScript code detects the screen resolution and adapts the design to the width of the device that is showing.

Use Predefined Structures

Foundation comes with some structures that are already ready to be used, for example: tabs, buttons, slideshows, etc. These can easily be added into your site to give site visitors more features for a better web experience.

Excellent Documentation

Another of the strengths of Foundation is documentation. In the project's website, each item has a complete explanation with code available. You can also see demos of each piece of code.

If you’re building your site for mobile users, Foundation Framework is worth a try. It’s  easy, customizable, well documented, and compatible with different browsers.