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.
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.
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.
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 Yeti 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!
