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 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.
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.
A high-profile Website based on the Bootstrap Framework
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.
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.
A high-profile Website based on the Foundation Framework
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.
As always, thanks for reading!