With CSS3 and HTML5 around the corner, well sort of, and tons of articles found on the web with introductions and tutorials maybe it’s time to introduce some of the tools that can make your life and work just a bit easier. I’m talking about CSS3 and HTML5 frameworks. As frameworks like Blueprint, 960gs, BlueTrip, Elasticss and YAML made your life easier when developing web site and applications using HTML4 and CSS2.1 frameworks described here can be used today to develop modern and future-ready rich web sites and applications.
52framework
The first result on Google if you type in HTML5 and CSS3 framework is 52framework. Some of the 52framework features are rounded corners, text-shadow, box-shadow, HTML5 markup (index.html and html5.js), grid system (grid.jpg and grid.psd!), css reset and so on. Community is active and growing with each new day so it looks quite promising. Dare to call is 960gs of HTML5 and CSS3 :)
SproutCore
SproutCore is an HTML5 application framework for building responsive, desktop-caliber apps in any modern web browser, without plugins. SproutCore works by doing the only thing that can truly eliminate the latency problem:it moves your business logic to the client. SproutCore applications are full-fledged programs, written in JavaScript. That JavaScript executes in your user’s browser, freeing up your servers (and server engineers) to focus on what’s most important in a cloud application: delivering users’ data as quickly and reliably as possible. But SproutCore isn’t your mama’s JavaScript library. It isn’t meant to augment existing web pages. It isn’t meant to add animation to documents. SproutCore is a tool for building applications. It has more in common with Cocoa or .NET than jQuery or MooTools. Because of that, SproutCore will change the way you think about building web apps. You can contribute via SproutCore Google Group, SproutCore Wiki and you can follow the progress on their blog.
Less Framework 3
Less Framework is a cross-device css grid system based on using inline media queries. The idea is to first create a default layout normally, and then additional layouts using inline media queries. Any browsers incompatible with media queries will simply ignore all the additional layouts, and will only use the default one. The additional layouts will inherit any styles given to the default layout, so coding them is a breeze. All four of the layouts included in Less Framework share a common column-width and gutter-width, which makes it easy to design them consistently. Also included are two sets of typography presets, composed around a baseline grid of 24 px. The numbers of columns in each layout – 3, 5, 8 and 13 – are parts of the Fibonacci sequence. This means the layouts are easy to divide by the golden ratio (1.62), making it simple to create harmonious designs.
baseline
Built with typographic standards in mind, Baseline makes it easy to develop a website with a pleasing grid and good typography. Baseline starts with several files to reset the browser’s default behavior, build a basic typographic layout — including style for HTML forms and new HTML 5 elements — and build a simple grid system. Baseline was born to be a quick way to prototype a website and grew up to become a full typographic framework for the web using “real” baseline grid as its foundation.
AlloyUI
AlloyUI is a user interface web application framework. It’s purpose is to help make building and designing web applications an enjoyable experience. This framework contains HTML5 resuable markup patterns, CSS3 framework for layout, forms and state interaction and YUI3 JavaScript.
CSS3 Action Framework
In one sentence: CSS3 Action Library aims to gather all the best CSS3 effects in one place. It’s based on user action pseudo-classes :hover, :active and the target pseudo-class :target . The effects are mainly The Transformation Functions. It’s hosted on Google Code and can be downloaded there and everybody can contribute via wiki. It’s interesting to see Google CSS3 redesign using this framework.
Sencha Touch
Sencha Touch, the first HTML5 mobile JavaScript framework that allows you to develop mobile web apps that look and feel native on iPhone and Android touchscreen devices, has just hit the big 1.0. And best of all, it’s completely free to use. Since its initial launch, Sencha Touch has quickly become the gold standard for developing rich mobile web applications with HTML5.
Jo HTML5 Mobile App Framework
Jo is pretty UI widget JavaScript framework for HTML5 with a side of DOM, event, data and so on. It’s open source under a OpenBSD Licence. Jo is Cross Platform for any mobile device you can imagine (webOS, iOS, Android, Sybian,…) and it’s light with 8kb JavaScript!
ChocolateChip Mobile
Unlike other frameworks, ChocolateChip is built for modern mobile Web browsers, in particular, those based on Webkit. As such it doesn’t waste code trying to fix cross-browser issues. It doesn’t have any to worry about. Instead ChocolateChip takes advantage of all the cutting-edge modern features available in Webkit that make it easy to write efficient, human readable and maintainable code. Other frameworks try to make JavaScript code easier by creating new methods and terms that hide the complexity of browser quirks and differences. ChocolateChip doesn’t have to do that. Neither does ChocolateChip attempt to hide what’s really going on. Instead it offers a few convenience methods that allow you to quickly and clearly accomplish a limited set of tasks necessary for being productive. The rest is just good old JavaScript, except that it isn’t that old. This is not JavaScript from the Dot Com era. ChocolateChip is based on all the new features in DOM level 3. As a matter of fact, ChocolateChip is all about using DOM level 3 code. If you’re still writing JavaScript like it was for IE 5 or Netscape Navigator 4, we are going to rock your world. For that matter, if you’re used to writing code for Web 2.0, we’ve got totally new stuff for you to cut your teeth on. The Web is continually evolving, and as creators of interactive applications that operate over the Web, we need to constantly update our coding style to the new features made available to us.
To get you started on HTML5 and CSS3…
here are a few links:
– HTML5 Overview on W3: http://dev.w3.org/html5/spec/Overview.html
– HTML5 Cheat sheet on Smashing Magazine: http://www.smashingmagazine.com/2009/07/06/html-5-cheat-sheet-pdf/
– HTML5 on w3schools: http://www.w3schools.com/html5/default.asp
– Coding a HTML5 Layout From Scratch on Smashing Magazine: http://www.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/
– CSS3 Introduction on W3: http://www.w3.org/TR/css3-roadmap/
– CSS3 Cheat sheet on Smashing Magazine: http://www.smashingmagazine.com/2009/07/13/css-3-cheat-sheet-pdf/
– CSS on w3schools: http://www.w3schools.com/css/default.asp
– Getting Started With CSS3 on webmonkey: http://www.webmonkey.com/2010/02/get_started_with_css_3/
– HTML 5 and CSS 3: The Techniques You’ll Soon Be Using on nettuts+: http://net.tutsplus.com/tutorials/html-css-techniques/html-5-and-css-3-the-techniques-youll-soon-be-using/
I’d like to…
hear from you. Are you developing your web sites and application using CSS3 and/or HTML5? Are you using any of these frameworks? Are they any good? Have I missed a framework?