20+ Useful CSS3 and HTML5 Frameworks, Tools and Templates

Posted in HTML & CSS, Web Design • Posted on 40 Comments

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.

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?

43 Written ArticlesWebsiteGoogle+

I'm a web designer and entrepreneur from Itajubá (MG), Brasil. I love writing about obscure topics and doing some cool stuff. And also I do some FREE stuff, check it out: http://www.roch.com.br/

40 Comments Best Comments First
  • aditia

    Sunday, May 22nd, 2011 12:14

    2

    wow i did not know before, there are a game framework for html5, must be manipulating the canvas element, thx btw

    +1
    • Rochester Oliveira

      Monday, May 23rd, 2011 04:53

      3

      Hey aditia,

      Isn’t it amazing? we can definitely do coll stuff with HTML5 :D
      []’s

      0
  • Alex Patin

    Thursday, May 26th, 2011 18:45

    15

    What a seriously awesome list! I got started using HTML5 Boilerplate at the end of April, and I love what it can do! Definitely a great way to start out I think.

    Thanks!

    0
    • Rochester Oliveira

      Friday, May 27th, 2011 04:43

      16

      Thank you alex!

      I think boilerplate is the best for many of us too. But for some specific applications the other ones can be much better :D

      []’s
      Rochester

      0
  • Lex Koff

    Wednesday, May 25th, 2011 22:41

    13

    Amazing! Thank You very much!

    0
    • Rochester Oliveira

      Thursday, May 26th, 2011 14:49

      14

      Hey, Lex, you are welcome!

      0
  • Darren

    Friday, May 27th, 2011 06:45

    17

    Fantastic list you got here. Back in my HTML working days in a private institution, I was not able to enjoy these kinds of brilliant tools, as well as references. How time flies and so do free and useful tools to grab. Thanks for featuring them!

    0
    • Rochester Oliveira

      Monday, May 30th, 2011 15:28

      21

      Hey dimaks, why don’t you put all your intentions in a side project?
      Then you could use all this almost experimental stuff and have fun for a while :D

      []’s

      +1
  • Alexey

    Sunday, May 22nd, 2011 14:52

    1

    Cool! Add to bookmarks!

    0
    • Rochester Oliveira

      Monday, May 23rd, 2011 04:54

      4

      Hey Alexey, thank you!
      []’s

      0
  • Antown

    Saturday, May 28th, 2011 11:20

    18

    Could you give a link to some good books on CSS3 and Html5 or at least the book’s title? I would like most in the whole deal.

    0
    • Rochester Oliveira

      Thursday, September 22nd, 2011 05:11

      31

      Oh Antown there is a lot of really good references out there. But usually I read content in portuguese so my best source is maujor.com.br

      []’s

      0
  • Andrey

    Monday, May 23rd, 2011 12:21

    11

    On my blog i using Lime.JS framework. It’s realy simple and very functional!

    0
    • Rochester Oliveira

      Monday, May 23rd, 2011 15:58

      12

      Yeah, Lime.JS is great!
      []’s

      -1
  • Enursa

    Monday, May 23rd, 2011 11:14

    10

    really useful tools list dude. i like it.

    0
    • Rochester Oliveira

      Monday, May 23rd, 2011 15:59

      8

      Hey Enrusa,

      Thank you! Keep coming!
      []’s

      0
  • Cindi

    Sunday, May 22nd, 2011 23:59

    6

    Mind blowing stuff, already added to bookmarks. Thanks. cipro

    0
    • Rochester Oliveira

      Monday, May 23rd, 2011 04:55

      5

      Hey cipro,

      Keep coming, there is a lot of cool stuff to be published!

      Thank you
      []’s

      0
  • Sam

    Monday, May 23rd, 2011 07:51

    7

    A nice round up of articles.
    It’ll be interesting to see what tools we have in a year!

    0
    • Rochester Oliveira

      Monday, May 23rd, 2011 16:00

      9

      Hi!
      Thank you.

      We surely missed some cool tools, there is a lot of people doing the hard work for us ;)
      []’s

      0
  • sanji

    Monday, May 30th, 2011 13:08

    20

    Wow! great stuff here, didn’t know there are many frameworks and css3 generators..thanks!!

    0
    • Rochester Oliveira

      Monday, May 30th, 2011 15:27

      19

      Hey sanji, thank you!

      We have other articles about it, why not browse here for a while? :)

      []’s

      0
  • Esteban

    Friday, June 24th, 2011 05:09

    22

    Awesome tools,and I am in a process to create my designing website,and thanks to your list I will be able to do it much better now.

    0
    • Rochester Oliveira

      Friday, June 24th, 2011 18:04

      23

      Hey Ennove,
      Really hope it helps you!

      Kepp reading, we have much more grat content to go!
      []’s

      0
  • pranav

    Monday, January 16th, 2012 18:04

    35

    Wow, what a article… bookmarking it.

    0
  • Deryn

    Tuesday, November 22nd, 2011 18:59

    33

    Very informative and helpful article :) great list of tools and CSS generators.

    0
    • Rochester Oliveira

      Thursday, February 23rd, 2012 03:39

      40

      Hi Deryn,

      And don’t forget to get back when you’re starting cool projects :)

      []’s

      0
    • Rochester Oliveira

      Monday, January 2nd, 2012 19:22

      34

      Thanks Deryn!

      []’s

      0
  • Tiffany John

    Sunday, January 22nd, 2012 20:58

    36

    Hi Rochester Oliveira, Thanks for uploading and sharing such a nice articles which are really fantastic combination of CSS3 and HTML5.

    0
    • Rochester Oliveira

      Thursday, February 23rd, 2012 03:38

      39

      Hi Tiffany,

      That’s why I’m here :) I’m glad you liked!

      []’s

      0
  • Samuel Asher Rivello

    Wednesday, February 8th, 2012 15:16

    37

    Great post!

    We have MANY choices of HTM5 App Frameworks. This is a fantastic summary of all HTML5 App Frameworks.

    0
    • Rochester Oliveira

      Thursday, February 23rd, 2012 03:37

      38

      Hi Samuel,

      Good one! :)

      Thanks!

      []’s

      0
  • Rochester Oliveira

    Thursday, September 22nd, 2011 05:12

    32

    Hey id, we’ll have much more content about HTML5 here soon, keep coming!

    :)

    []’s

    0
  • Alex

    Friday, June 24th, 2011 18:35

    25

    If you like to use HTML5 and CSS3 with a WordPress Framework, you should check out Xtreme Theme , the one and only WordPress Framework with HTML5 and CSS3, very flexible and powerful.

    0
    • Rochester Oliveira

      Friday, June 24th, 2011 21:38

      24

      We’ve focused in free tools here, alex but your suggestion in great. I’ll check it out!

      []’s

      0
      • Alex

        Wednesday, June 29th, 2011 12:50

        26

        Hey Rocherster, didn’t recognize you focused in free tools, but if you have a post about premium tools, you surely should check it out.

        0
        • Rochester Oliveira

          Wednesday, June 29th, 2011 15:59

          27

          That is a good idea, since premium resources come with much more resources and maybe services together, you know..

          Thank you!
          []’s

          0
  • Trent

    Thursday, August 11th, 2011 09:11

    29

    In regards to css frameworks we always just write our own code from the ground up on confirmed projects. Traditional but at least you know exactly whats going on. Tools like Modernizr are incredidbly handy and the generators are clever although sometimes don’t get updated when browsers have native support. Thanks, great list.

    0
    • Rochester Oliveira

      Thursday, September 22nd, 2011 05:08

      30

      I agree with you since you really know what is going on :)
      I mean, many people say “I don’t use (CSS) frameworks because I want to understand what is going on every time!” but actually they don’t, they are just copy & pasting code from somewhere else and pretend to understand what they’re doing..
      And actually many people what is going on when using frameworks..

      I mean, whether you are or aren’t using a framework you should ALWAYS know what is going on!

      []’s
      Rochester

      0
  • Rochester Oliveira

    Monday, July 18th, 2011 06:23

    28

    Hey Valenntin,

    It seems to be great.. Do you have anything about it translated to english? I don’t know almost anything in french :)

    []’s

    -1
  • Samuel Asher Rivello

    Wednesday, February 8th, 2012 15:16

    37

    Great post!

    We have MANY choices of HTM5 App Frameworks. This is a fantastic summary of all HTML5 App Frameworks.

    0
    • Rochester Oliveira

      Thursday, February 23rd, 2012 03:37

      38

      Hi Samuel,

      Good one! :)

      Thanks!

      []’s

      0
  • Tiffany John

    Sunday, January 22nd, 2012 20:58

    36

    Hi Rochester Oliveira, Thanks for uploading and sharing such a nice articles which are really fantastic combination of CSS3 and HTML5.

    0
    • Rochester Oliveira

      Thursday, February 23rd, 2012 03:38

      39

      Hi Tiffany,

      That’s why I’m here :) I’m glad you liked!

      []’s

      0
  • pranav

    Monday, January 16th, 2012 18:04

    35

    Wow, what a article… bookmarking it.

    0
  • Deryn

    Tuesday, November 22nd, 2011 18:59

    33

    Very informative and helpful article :) great list of tools and CSS generators.

    0
    • Rochester Oliveira

      Monday, January 2nd, 2012 19:22

      34

      Thanks Deryn!

      []’s

      0
    • Rochester Oliveira

      Thursday, February 23rd, 2012 03:39

      40

      Hi Deryn,

      And don’t forget to get back when you’re starting cool projects :)

      []’s

      0
  • Rochester Oliveira

    Thursday, September 22nd, 2011 05:12

    32

    Hey id, we’ll have much more content about HTML5 here soon, keep coming!

    :)

    []’s

    0
  • Trent

    Thursday, August 11th, 2011 09:11

    29

    In regards to css frameworks we always just write our own code from the ground up on confirmed projects. Traditional but at least you know exactly whats going on. Tools like Modernizr are incredidbly handy and the generators are clever although sometimes don’t get updated when browsers have native support. Thanks, great list.

    0
    • Rochester Oliveira

      Thursday, September 22nd, 2011 05:08

      30

      I agree with you since you really know what is going on :)
      I mean, many people say “I don’t use (CSS) frameworks because I want to understand what is going on every time!” but actually they don’t, they are just copy & pasting code from somewhere else and pretend to understand what they’re doing..
      And actually many people what is going on when using frameworks..

      I mean, whether you are or aren’t using a framework you should ALWAYS know what is going on!

      []’s
      Rochester

      0
  • Rochester Oliveira

    Monday, July 18th, 2011 06:23

    28

    Hey Valenntin,

    It seems to be great.. Do you have anything about it translated to english? I don’t know almost anything in french :)

    []’s

    -1
  • Alex

    Friday, June 24th, 2011 18:35

    25

    If you like to use HTML5 and CSS3 with a WordPress Framework, you should check out Xtreme Theme , the one and only WordPress Framework with HTML5 and CSS3, very flexible and powerful.

    0
    • Rochester Oliveira

      Friday, June 24th, 2011 21:38

      24

      We’ve focused in free tools here, alex but your suggestion in great. I’ll check it out!

      []’s

      0
      • Alex

        Wednesday, June 29th, 2011 12:50

        26

        Hey Rocherster, didn’t recognize you focused in free tools, but if you have a post about premium tools, you surely should check it out.

        0
        • Rochester Oliveira

          Wednesday, June 29th, 2011 15:59

          27

          That is a good idea, since premium resources come with much more resources and maybe services together, you know..

          Thank you!
          []’s

          0
  • Esteban

    Friday, June 24th, 2011 05:09

    22

    Awesome tools,and I am in a process to create my designing website,and thanks to your list I will be able to do it much better now.

    0
    • Rochester Oliveira

      Friday, June 24th, 2011 18:04

      23

      Hey Ennove,
      Really hope it helps you!

      Kepp reading, we have much more grat content to go!
      []’s

      0
  • sanji

    Monday, May 30th, 2011 13:08

    20

    Wow! great stuff here, didn’t know there are many frameworks and css3 generators..thanks!!

    0
    • Rochester Oliveira

      Monday, May 30th, 2011 15:27

      19

      Hey sanji, thank you!

      We have other articles about it, why not browse here for a while? :)

      []’s

      0
  • Antown

    Saturday, May 28th, 2011 11:20

    18

    Could you give a link to some good books on CSS3 and Html5 or at least the book’s title? I would like most in the whole deal.

    0
    • Rochester Oliveira

      Thursday, September 22nd, 2011 05:11

      31

      Oh Antown there is a lot of really good references out there. But usually I read content in portuguese so my best source is maujor.com.br

      []’s

      0
  • Darren

    Friday, May 27th, 2011 06:45

    17

    Fantastic list you got here. Back in my HTML working days in a private institution, I was not able to enjoy these kinds of brilliant tools, as well as references. How time flies and so do free and useful tools to grab. Thanks for featuring them!

    0
    • Rochester Oliveira

      Monday, May 30th, 2011 15:28

      21

      Hey dimaks, why don’t you put all your intentions in a side project?
      Then you could use all this almost experimental stuff and have fun for a while :D

      []’s

      +1
  • Alex Patin

    Thursday, May 26th, 2011 18:45

    15

    What a seriously awesome list! I got started using HTML5 Boilerplate at the end of April, and I love what it can do! Definitely a great way to start out I think.

    Thanks!

    0
    • Rochester Oliveira

      Friday, May 27th, 2011 04:43

      16

      Thank you alex!

      I think boilerplate is the best for many of us too. But for some specific applications the other ones can be much better :D

      []’s
      Rochester

      0
  • Lex Koff

    Wednesday, May 25th, 2011 22:41

    13

    Amazing! Thank You very much!

    0
    • Rochester Oliveira

      Thursday, May 26th, 2011 14:49

      14

      Hey, Lex, you are welcome!

      0
  • Andrey

    Monday, May 23rd, 2011 12:21

    11

    On my blog i using Lime.JS framework. It’s realy simple and very functional!

    0
    • Rochester Oliveira

      Monday, May 23rd, 2011 15:58

      12

      Yeah, Lime.JS is great!
      []’s

      -1
  • Enursa

    Monday, May 23rd, 2011 11:14

    10

    really useful tools list dude. i like it.

    0
    • Rochester Oliveira

      Monday, May 23rd, 2011 15:59

      8

      Hey Enrusa,

      Thank you! Keep coming!
      []’s

      0
  • Sam

    Monday, May 23rd, 2011 07:51

    7

    A nice round up of articles.
    It’ll be interesting to see what tools we have in a year!

    0
    • Rochester Oliveira

      Monday, May 23rd, 2011 16:00

      9

      Hi!
      Thank you.

      We surely missed some cool tools, there is a lot of people doing the hard work for us ;)
      []’s

      0
  • Cindi

    Sunday, May 22nd, 2011 23:59

    6

    Mind blowing stuff, already added to bookmarks. Thanks. cipro

    0
    • Rochester Oliveira

      Monday, May 23rd, 2011 04:55

      5

      Hey cipro,

      Keep coming, there is a lot of cool stuff to be published!

      Thank you
      []’s

      0
  • aditia

    Sunday, May 22nd, 2011 12:14

    2

    wow i did not know before, there are a game framework for html5, must be manipulating the canvas element, thx btw

    +1
    • Rochester Oliveira

      Monday, May 23rd, 2011 04:53

      3

      Hey aditia,

      Isn’t it amazing? we can definitely do coll stuff with HTML5 :D
      []’s

      0
  • Alexey

    Sunday, May 22nd, 2011 14:52

    1

    Cool! Add to bookmarks!

    0
    • Rochester Oliveira

      Monday, May 23rd, 2011 04:54

      4

      Hey Alexey, thank you!
      []’s

      0

Comments are closed.

23.20.43.165 - unknown - unknown - US