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.
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 :)
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.
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.
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.
Jo HTML5 Mobile App Framework
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?