I hope you have heard a little about CSS3 and HTML5. And I’m sure you’ve used at least one of the cool features they offer. But now it is time to use them at their full (or almost full) power.
You may be asking yourself “It is time to change? Should I forget everything I know and dive into this new world?”. Well dear padawan, you don’t need to do so. We have a lot of tools that make our transition to new and better technologies safer (ultimately we can’t just crash our customer’s website, we have bills to pay :D).
Frameworks are helpful with this. They’ve already been tried, tested and proven. Of course, you can always make them better, but they are a really good starting point.
This time we will talk a little about frameworks and other tools, like generators and templates.
So, let’s rock.
This is the most useful for me. I usually have jobs that need easy setup, but a lot of optimizations tools (minifiers and more) and, at the same time, I’m quite familiar with CSS, so too much preset CSS is a waste of time to me (since I spend a few hours coding CSS, but much more to understand and re-utilize framework’s code).
Cool features:
I am amazed by all the things you can do with this framework. It has a lot of resources that I thought would never work on IE. This is a good option when you want a somewhat styled template and are planning to use almost all power of HTML5.
What do I like:
Actually Greg Babula says that it meant to be just a personal project. But it is much powerful than he thinks.
As it was made from personal experience, it has a lot of tools that we already know how to use (Modernizr, CSS Reset, jQuery, Orbit Image Slider…), thus we don’t waste too much time learning.
I must admit that I should use LESS much more than I do. If you think this way, Perkins may be a good option for you. It comes with a set of LESS stylesheets and mixins for common tasks such as creating navigation, rounded corners, gradients and much more.
Yeah, sometimes our customer wants some animations on their site. Why should you use flash when (almost every time) you can use HTML5?
Sprite.js provides a simple integration for canvas and HTML animations so you can do easily some animations, with maximum performance.
Just take a look at the demo games, and tell me if it isn’t amazing.
Some features (HTML5) that you can use on it:
If you are a WordPress person, you will find it useful. With this plugin, you just have to add a shortcode and you have a HTML5 media player in your site.
The framework currently supports:
Modernizr helps us to implement HTML5 and CSS3 for browsers that don’t natively support it. Actually many of the tools mentioned above use it.
Want to know more about its amazing features? Just read The All-In-One Entirely-Not-Alphabetical No-Bullshit Guide to HTML5 Fallbacks.
It is really simple to use, when modernizr detects your browser’s features, it adds classes to you HTML, so you can easily switch to a valid fallback. Try to run the demo and see its results for a better comprehension.
IE (6-8 mainly) is surely the greatest barrier to CSS3 spread. CSS3 selectors are almost forgotten for some developers, that just know they exist because can use them with jQuery.
You just need one of the 7 supported JavaScript libraries and you are ready to install it (via conditional comments, so just IE will see it). And then you’re done, just write you pretty CSS3 selectors as you aways wanted.
With this framework you have easily a lot of good buttons options. It is specially useful for back-end developers, that aways need some pretty buttons, but don’t have time (or budget) to do so.
They are all CSS3 ready, and can be easily customized.
I certainly have missed some other good resources. Why don’t you comment and share what you know?
You may be asking yourself “It is time to change? Should I forget everything I know and dive into this new world?”. Well dear padawan, you don’t need to do so. We have a lot of tools that make our transition to new and better technologies safer (ultimately we can’t just crash our customer’s website, we have bills to pay :D).
Frameworks are helpful with this. They’ve already been tried, tested and proven. Of course, you can always make them better, but they are a really good starting point.
This time we will talk a little about frameworks and other tools, like generators and templates.
So, let’s rock.
HTML5 Boilerplate – Templating that fits all needs
This is the most useful for me. I usually have jobs that need easy setup, but a lot of optimizations tools (minifiers and more) and, at the same time, I’m quite familiar with CSS, so too much preset CSS is a waste of time to me (since I spend a few hours coding CSS, but much more to understand and re-utilize framework’s code).
Cool features:
- Constantly improving – Last update says that they reduced the overall size of the published boilerplate by 50%
- Build script – .js and .css minify, image optimization, html optimization, server configurations for caching…
- Custom install setup – So you can choose what you want in “your” boilerplate
- Cross-Browser compatible
- HTML5 Ready
- Print stylesheet ready to use
52framework – Supports almost anything
I am amazed by all the things you can do with this framework. It has a lot of resources that I thought would never work on IE. This is a good option when you want a somewhat styled template and are planning to use almost all power of HTML5.
What do I like:
- Almost anything you want with HTML – Local Storage, video player, canvas, forms…
- A lot of CSS3 proprieties – As you can see in CSS demo, it has a good CSS3 support
- Video Tutorials – Yeah, it makes even easier to understand 52′s workflow
G5 Framework – Good tools collection
Actually Greg Babula says that it meant to be just a personal project. But it is much powerful than he thinks.
As it was made from personal experience, it has a lot of tools that we already know how to use (Modernizr, CSS Reset, jQuery, Orbit Image Slider…), thus we don’t waste too much time learning.
Perkins – Lighweight and LESS
I must admit that I should use LESS much more than I do. If you think this way, Perkins may be a good option for you. It comes with a set of LESS stylesheets and mixins for common tasks such as creating navigation, rounded corners, gradients and much more.
Sprites.js – Animation framework (HTML5 support, of course)
Yeah, sometimes our customer wants some animations on their site. Why should you use flash when (almost every time) you can use HTML5?
Sprite.js provides a simple integration for canvas and HTML animations so you can do easily some animations, with maximum performance.
Lime.js – Gaming framework
Just take a look at the demo games, and tell me if it isn’t amazing.
Some features (HTML5) that you can use on it:
- Optional install – For mobile users it is really good, just bookmark your game and you’re done
- KeyFrame animations
- Full support of sprite sheets
- Stroke support – So you can draw a stroke around shapes
- Good documentation – Just take a look at all classes you can use with it, pretty cool :D
HTML5 multimedia framework for WordPress
If you are a WordPress person, you will find it useful. With this plugin, you just have to add a shortcode and you have a HTML5 media player in your site.
The framework currently supports:
- mp4 (h.264,aac)
- ogg (theora,vorbis)
- mp3 (audio only)
- webm (vp8,vorbis).
- wmv (via MediaElement.js)
- flv (via MediaElement.js)
- wma (via MediaElement.js)
Modernizr – HTML5 & CSS3 with fallbacks
Modernizr helps us to implement HTML5 and CSS3 for browsers that don’t natively support it. Actually many of the tools mentioned above use it.
Want to know more about its amazing features? Just read The All-In-One Entirely-Not-Alphabetical No-Bullshit Guide to HTML5 Fallbacks.
It is really simple to use, when modernizr detects your browser’s features, it adds classes to you HTML, so you can easily switch to a valid fallback. Try to run the demo and see its results for a better comprehension.
Select[ivizr] – CSS3 Selectors for IE
IE (6-8 mainly) is surely the greatest barrier to CSS3 spread. CSS3 selectors are almost forgotten for some developers, that just know they exist because can use them with jQuery.
You just need one of the 7 supported JavaScript libraries and you are ready to install it (via conditional comments, so just IE will see it). And then you’re done, just write you pretty CSS3 selectors as you aways wanted.
CSS3 button framework
With this framework you have easily a lot of good buttons options. It is specially useful for back-end developers, that aways need some pretty buttons, but don’t have time (or budget) to do so.
They are all CSS3 ready, and can be easily customized.
Templates – General HTML5 and CSS3 samples
Coming Soon Template
Design Company
Real State
Free HTML5 & CSS3 theme
Create An Elegant Website With HTML 5 And CSS3
Starter Pack
Much more inspiration at HTML5 Gallery
Some useful tools
CSS3 Button Maker
CSS Transforms code generator
CSS3 Gradient generator
CSS3 Drop Shadow Generator
CSS Generator for radius, shadows, rgba, @font-face, columns and more
The best @font-face generator I’ve ever seen
HTML5 Visual Cheat Sheet
Ready to start experimenting with HTML5?
You may notice that I didn’t even mention any mobile frameworks. It is because they are so cool that they deserve a dedicated post.I certainly have missed some other good resources. Why don’t you comment and share what you know?
No comments:
Post a Comment
Note: Only a member of this blog may post a comment.