Hello,

In my previous article, ‘What is a Mobile Friendly Website’, I began explaining the differences between mobile-friendly and non-mobile friendly websites. I also provided an introduction to Responsive Web Design.

This week, I would like to present two popular and responsive development frameworks to help you make the most responsible decision as a developer.

Lets get started!

After researching hundreds of articles and developer communities, my colleagues and I have concluded that these frameworks represent the most mature, user-contributed ones.

Bootstrap

www.twitter.github.com/bootstrap

Bootstrap was originally produced by Twitter in order to encourage consistency for interface development. With a large user base, Bootstrap has become a standard for large, commercial projects.

The framework consists of a 12-column fluid or fixed layout. It Supports CSS LESS and includes many UI tools for rapid prototyping.

Tapping into Bootstrap’s Grid

Click here for Grid Example.

Below I have included an example highlighting the basic concept behind the Bootstrap grid. Assuming you already understand HTML / CSS semantics, the grid consists of a container (Row) equalizing 12 columns. Within a Row you have columns (Span’s) with a numerical value indicating how many columns the span will cover.

<div class="row-fluid">
  <div class="span12"><h1>Reasonably Responsive</h1></div>
</div>

<div class="row-fluid">
  <div class="span4">Page</div>
  <div class="span8">Sidebar</div>
</div>

Once you understand the basics, you can begin coding your first Bootstrap project. The code is simple enough for beginners, yet challenging enough for more experienced developers.

Famous by Bootstrap

A high-profile Website based on the Bootstrap Framework

Foundation

www.foundation.zurb.com

Foundation was developed by Zurb, an interaction design company. Foundation uses a 12-24 column fluid layout, a highly robust grid, and cutting edge UI tools with support for CSS SASS.

Pouring the Grid’s Foundation.

Click here for Grid Example.

Similar to the example above, I have included the basic concept behind the Foundation Grid. The grid consists of a container (Row) equaling 12 or 24 columns. Within a Row you have (Columns) with a value indicating the number of columns. Remember everything has to equal 12 or 24, depending on your development version.

<div class="row">
  <div class="twelve columns"><h1>Reasonably Responsive</h1></div>
</div>

<div class="row">
  <div class="four columns">Page</div>
  <div class="eight columns">Sidebar</div>
</div>

Once you understand the basics, you can quickly begin coding your first project with foundation.

Famous by Foundation

A high-profile Website based on the Foundation Framework

Conclusion

Now that you understand the basics of each framework, you will notice they are quite similar. Personally, I enjoy working with Foundation the most. The code is clean, easy to read and well documented. Besides, they have a Yetti as a mascot.

I am hoping the Yeti alone will help you make the most responsible, responsive decision. This concludes today’s discussion on Responsive Frameworks.

Stay tuned for my next article, “Your Website Sucks?!”, appearing this Thursday. And I recommend reading my previous article, What is a Mobile Friendly Website?.

As always, thanks for reading!

© Muller Consulting 2021