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.
Pros

very extensively utilised in the market

Grids: Fluid and fixed

12 column layout

built with LESS that we have had some experience with

fairly decent UI components also provided

Fixed widths (724px, 940px, 1170px; below 767px are single column and vertically stacked)

Devs have had some experience/exposure to it and it is used in Zend 2.0
Cons

locks you in a fair bit to using their stuff...

not as many media queries provided out of the box

responsive design available to be used but not the default position

no video scaling.
Pros

looks quite flexible and moderately utilised

Fluid grids
MIT License

lots of different media query classes sets and CSS classes for showing and hiding visibility on phones and tablets

also allows for the use of SASS, a powerful CSS preprocessor (
www.sass-lang.com)

also has a bunch of UI components that aren't over powering

support for video scaling
Fluid (max-width 100%)
Cons

quite new

Dropped IE7 support
no popovers included in UI components
Pros

looks quite flexible and moderately utilised
Fluid grids
MIT License
Fluid (max-width 1200px)
Cons

older and no longer really supported by zurb

no video scaling
Pros

looks quite flexible and somewhat utilised
Fixed Grids
16 column layout
MIT License
Base Width 960px
Cons

still new

Fixed grids

very basic UI components provided
Skeleton template only works up to a 960 pixel width
Pros

allows responsive design for 1140px grid
Cons

not talked about much, not sure how used it is...

suited specifically for
1280 monitors

Creative Commons 3 Licensed
http://creativecommons.org/licenses/by/3.0/au/
Pros

allows for development of responsive design

believe it supports LESS CSS which is handy
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
It contains 4 default layout types and 3 sets of typography presets, all based on a single grid which we may not want.
Pros

geared towards fixed width grid.
Cons

adaptive design instead of responsive design...
Không có nhận xét nào:
Đăng nhận xét