Thứ Ba, 18 tháng 12, 2012

Responsive Frameworks Options Analysis

Overview

We may wish to select a responsive UI framework in order to expedite the creation of our site in a Responsive manner.
Please Note
This selection analysis assumes that we will be utilising PHP and the ZEND framework to build this site. 

Results

After much deliberation we have chosen to use the latest version of Twitter Bootstap for our needs.
There is not much to separate it from Foundation 3 except for the fact that we have had exposure to it in the past and it seems to have more proven usages in the market.
We will most likely wish to utilise the fluid grid within Twitter Bootstap as I believe this will give us the best results.

Responsive Frameworks

These are some of the frameworks available and their pros and cons.

Twitter Bootstrap - http://twitter.github.com/bootstrap 

Pros
(plus) very extensively utilised in the market
(plus) Grids: Fluid and fixed
(plus) 12 column layout
(plus) built with LESS that we have had some experience with
(plus) fairly decent UI components also provided
(plus) Fixed widths (724px, 940px, 1170px; below 767px are single column and vertically stacked)
(plus) Devs have had some experience/exposure to it and it is used in Zend 2.0
 Cons
(minus) locks you in a fair bit to using their stuff...
(minus) not as many media queries provided out of the box
(minus) responsive design available to be used but not the default position
(minus) no video scaling.

Foundation 3 - http://foundation.zurb.com/

Pros
(plus) looks quite flexible and moderately utilised
(plus) Fluid grids
(plus) MIT License
(plus) lots of different media query classes sets and CSS classes for showing and hiding visibility on phones and tablets
(plus) also allows for the use of SASS, a powerful CSS preprocessor (www.sass-lang.com)
(plus) also has a bunch of UI components that aren't over powering
(plus) support for video scaling
(plus) Fluid (max-width 100%)
Cons
(minus) quite new
(minus) Dropped IE7 support
(minus) no popovers included in UI components

Foundation 2 - http://foundation.zurb.com/

Pros
(plus) looks quite flexible and moderately utilised
(plus) Fluid grids 
(plus) MIT License
(plus) Fluid (max-width 1200px)
Cons
(minus) older and no longer really supported by zurb
(minus) no video scaling

Skeleton - http://www.getskeleton.com 

Pros
(plus) looks quite flexible and somewhat utilised
(plus) Fixed Grids
(plus) 16 column layout
(plus) MIT License
(plus) Base Width 960px
Cons
(minus) still new
(minus) Fixed grids
(minus) very basic UI components provided
(minus) Skeleton template only works up to a 960 pixel width

1140px grid - http://cssgrid.net/

Pros
(plus) allows responsive design for 1140px grid
Cons
(minus) not talked about much, not sure how used it is...
(minus) suited specifically for 1280 monitors
 (minus) Creative Commons 3 Licensed http://creativecommons.org/licenses/by/3.0/au/

Less Framework 4 - http://lessframework.com/

Pros
(plus) allows for development of responsive design
(plus) believe it supports LESS CSS which is handy
(plus)  MIT licensed (free to use and modify it in any way you want, as long as you keep the license comment at the top of the CSS)
Cons
(minus) It contains 4 default layout types and 3 sets of typography presets, all based on a single grid which we may not want.

Frameless Grid - http://framelessgrid.com/

Pros
(plus) geared towards fixed width grid.
Cons
(minus) adaptive design instead of responsive design...

Không có nhận xét nào:

Đăng nhận xét

Học lập trình web căn bản với PHP

Bài 1: Các kiến thức căn bản Part 1:  https://jimmyvan88.blogspot.com/2012/05/can-ban-lap-trinh-web-voi-php-bai-1-cac.html Part 2:  https://...