Thursday 10 March 2011

html5 and css3 frameworks

HTML5 and CSS3 are the new vogue in the web development world.Both bring a variety of feature sets with them which  includes from animation to rounded corners to amazing effects and fonts to easy offline line capabilities.So I have included here a list of best frameworks for HTML5 and CSS3 which can make your job a whole lot easier.Even though many of the features of the above are not fully supported yet and HTML5's recommendations date(2022) is very far,the development in this field is already taking giant strides and we can see a list of browsers starting to make a move to support them already.With the inclusion of third party applications like Microsoft Silver Light,Adobe flash and pick and drop feature HTML5 is already changing the rule of the games.So lets have a look at the best frameworks available to work on these.


1)52framework

It's one of the best available framework present in the market today.It's latest version is 2.0 supporting HTML5,CSS3 plus JavaScript and a hoards of new features which include grid system,CSS reset. It supports all html5 tags, script embed along with features like text-shadow,box-shadow,rounded corners etc.More details regarding other features of the product can be obtained from 52framework


2).Less framework


  It is based on single grid containing 4 layouts and 3 sets of typography presets for designing adaptive websites.So clearly it's a great tool for building  flexible multi column website layout and its compatible with most of the browsers.It is based on the idea that we first need to set the main layout and then code for child layouts,all layout differ from each other in just terms of outer margins.since every layout is based on the same grid it renders reusability to the elements  used in one layout and allows them to use them in other layout without much change.[Less framework]

3)Sencha Touch

This is for mobile application development primarily for Android OS and iPhone.The applications developed have a native look and feel.This uses HTML5 to deliever audio and video and also provides a dummy storage for storing data offline,its more like a proxy for local storage.The framwork makes a powerful use of Javascript and CSS3 to provide a solid styling layer possible.[Sencha Touch]




4)LimeJS


It is HTML5 game framework for building fast,native experience for modern touchscreen and browsers.It automatically adjust the size of the game on the screen as per the size of the screen,no need to redefine the size of players of game with change in screen size.It is compatible for making HD as well as mobile related games.[LimeJS]

5)Sproutcore

It's another HTML5 application framework for building desktop caliber applications in any modern browser.It  actually transfers the logic of your code to the client for all the processing purpose instead of server as such reducing the load on servers and making them more responsive to handle client query once browser gets loaded.The javascript also get's executed on the client side of browser.So overall its a very good framework.
[sprout core]

6)Baseline



This framework has been built by keeping the topology in the mind.It's useful for making grid and topology of a website.It was developed initially to built a website having pleasant grid and basic typographic sort of styling.It supports font metrics also to create nice fixed layout.[Baseline]




7)Cartagen


This is the framework you go for when you want to play with the maps in your application.It lets you develop customized maps as per your need in different simple styling sheets.Since maps of such sort are used in geographical and temporal data which generally work in real time this provides facility to users to integrate real time data stream.This map based functionality is provided by this framework with the help of GSS(Geographic Style sheets) which in general is a language used to deal with styling sheets in geospatial data case.[cartagen]

8)HTML5 Canvas Element
It is not quite a user friendly and requires you to manually manage the updates.It allows for dynamic manipulation of 2D objects with the help of scripts.For these it uses bit map and does not have a build in scene graph.So it basically works on scripts which are dependent on resolution based bitmap canvas.
[canvas]





9)OpenLaszlo



It is an open source platform that uses rapid prototyping and software developments best feature to develop internet applications.With it's 4.0 version they have also provides the option of compilation for DHTML.It is customized to be suitable for out traditional web developers working on html and javascript and supports text based development.It supports LZX declarative language which is used in designing animation and flexible layouts.[open laszlo]


10)HTML5 Reset


It is a ready to use interesting package that comes with HTML5 and CSS3.It contains a rudimentary document which contains information related to structuring of HTML headers and CSS styling sheets to provide you the most basic state design in any browser.It allows you to set your standard for margins,size and other measurements.[HTML5 Reset]

11)CSS3 Action Framework


It brings all the best features of CSS3 under the single hood,hosted on a google code this framework is one to watch out for providng you with fascinating designs using features of CSS like ;hover,;active etc.Google Redesign is one of the fantastic demo of this application framework.[css3 action framework]

12)Alloy UI


This framework is a user interface web application framework which supports many API's for building web applications.This is primarily used for interface designing only to develop nice forms,supports dynamic attributes and unified styling.It just works on tags like html which are usdd in aui forms and some of their attributes.   [Alloy UI]



13)jo




It is used for mobile application development in HTML5 using javascript,it's very lightweight in nature.
It provides consistent and modular event model between objects.With the help of CSS it can handle animation and presentations to a certain extent.It basically embraces loosely typed object model of javascript and support libraries like PhoneGap.[Jo]

14)Baker ebook framework


Its an open source HTML5 framework for publishing ebook for ipad.
However to unleas its power you need to publish HTML5 pages with a fixed width of 768px.It supports audio,video and animations and is compatible with most of the browsers.[Baker]







15)RGraph


Based on HTML5 canvas library,it is used to produce various types of graph and adjusting your graph interactively with loads of other features to play with graphs.[Rgraph]



So this is a list of some of the best frameworks available today to work on HTML5 and CSS and build incredible applications for the web development.At the end I have displayed a comparative study of various frameworks in a snapshot below.



1 comment: