52 Framework: The First Ever HTML5 and CSS3 Framework

by on 1st July 2010 with 48 Comments

screenshot

Today we’re going to look at a new project from the Enavu Network called 52 Framework.

It claims to be the first framework built specifically for HTML5 and CSS3. Below we’ll look at some of the basic features and dig into the code to see what we can find.

Regarding Frameworks

Frameworks are an interesting topic. Some developers absolutely swear by them and even go so far as to say that no web page should ever be started without one, other developers see them as unnecessary complications that add a lot of superfluous weight to what would otherwise be fairly simple code.

I’m personally somewhere in between. I definitely agree that many frameworks, if unaltered, contain a lot of fluff that could be trashed. However, I also find them to be quite useful and timesaving.

The key is customization. Every framework you’ll find online was created by someone with a different workflow than your own and even a different way of thinking about websites and their structure. This is one of the primary reasons frameworks are so loaded: so they can cater to everyone’s needs. Every little file and piece of code included in the download is not meant for every person, it all merely serves as a starting point for your own personal framework.

When you borrow someone else’s car, you don’t just hop in and drive. You adjust the driver’s seat and the mirrors to fit your specifications. In the same way, don’t expect to just grab a pre-fab framework and run with it. Step one should be to go through and filter out anything you’ll never need. Step two should be to add in missing elements that you’ll always need. And step three should be to tweak the things that you want but need to alter slightly for your own use.

As we tear in to the framework below, think about each part and how you would customize it to fit your own specific needs.

The 52 Framework

screenshot

The 52 Framework is a new, and very much under construction, framework built specifically for utilizing HTML5 and CSS3 in a cross-browser, standards-compliant manner.

Too Soon?

HTML5 and CSS3 are still new technologies, isn’t it a little too soon to start creating frameworks for them? Absolutely not. Support for both of these new standards is increasing rapidly and being fueled by a huge number of developers that simply couldn’t wait to implement them.

Whether or not it’s time to start using HTML5 and CSS3 is another debate entirely, the idea here is that it’s the perfect time to begin building systems to facilitate their use in the near future. There will never be a time when web standards cease evolving and therefore create the perfect climate for creating frameworks. Instead of falling behind, tools like these should keep up with new technology and evolve with them. That way as developers decide that it is in fact time to begin implementing HTML5 and CSS3, the tools will already be in place for them to do so.

The Download

screenshot

As you can see, the framework is quite small in file size, even with the included PSDs, which can obviously be removed on a per site basis.

The download consists of three CSS files, two HTML files, one JS file, a JPG and two PSDs. We’ll take a look at the role each of these plays in the explanation below.

The Demo File

Once you download the framework, open up index.html. This is the heart of the entire framework and what I want to spend most of our time discussing.

screenshot

As you can see, the framework helps you out by setting up a number of the most common elements. Your header tags (h1, h2 and h3) are styled along with basic page typography, form elements are ready to go and have a bonus custom button design, there’s a method in place for displaying code, and even a bunch of additional styles in place for different elements like strong, bold, italic, inserted text, big text, etc.

The Code

To get a much better look at what’s in the demo file, peer under the hood to see the code. We’ll analyze this piece by piece below.

DOCTYPE

The first thing you’ll see in the .html file is the new, beautifully simple HTML5 DocType.


This is a must-have statement that tells browsers how to interpret your code. It’s nice and succinct and I greatly prefer it to previous, more complicated versions.

JavaScript

The next notable thing you’ll see is a link to an external JavaScript file.


Don’t worry, you don’t need to understand a single line of JavaScript to use this framework. The included JS simply uses a couple of lines of code to create support for new elements in older browsers. It’s a neat trick that allows you to use a lot of the goodness of HTML5 without worrying about who you’re leaving behind.

Semantics

The next thing you should notice about this document is how the HTML is constructed. It uses the new semantic markup that you should already be learning to follow. Here’s an extremely simplified, stripped down version of the structure.



	

As you can see, a number of new HTML5 elements are being used here. The page is divided into header, nav, aside, section, article, code and footer areas. Using the framework, these elements will provide the basic structure for everything you create. Notice that a lot of the pieces that you would normally create divs for have native support in HTML5.

Using the 52 Framework will force you to create your pages using these new elements and is therefore a great way to jump into HTML5 when the time comes.

Reset and Grid System

There are three CSS files included in the framework: general, grid and reset. The reset file is pretty basic and is essentially a modified version of the popular Eric Meyer CSS reset. This version was created by Richard Clark.

The grid CSS is there because, like any good framework, this one uses grids heavily.

screenshot

There’s definitely nothing groundbreaking here, it’s basically a 16 column 960 grid system exactly like you’re used to using in other frameworks. The available columns vary in width from 40px all the way up to 940px and each contain a left and right margin of 10px.

.col_1 {width:40px;}
.col_2 {width:100px;}
.col_3 {width:160px;}
.col_4 {width:220px;}
.col_5 {width:280px;}
.col_6 {width:340px;}
.col_7 {width:400px;}
.col_8 {width:460px;}
.col_9 {width:520px;}
.col_10 {width:580px;}
.col_11 {width:640px;}
.col_12 {width:700px;}
.col_13 {width:760px;}
.col_14 {width:820px;}
.col_15 {width:880px;}
.col_16 {width:940px;}

General CSS

The primary CSS contains a number of helpful styles to get you started. Everything in the HTML mentioned above has specific styles in place along with a number of other basic items like float clearing classes and block quotes.

One neat feature here is that you can set the selection color of a web page to override the browser default. This means that when you select a line of text, the highlight will be the color that you define.

::selection {
	background: #525252; /* Safari */
	}
::-moz-selection {
	background: #525252; /* Firefox */
	color:#fff;
}

In the fieldset styles you’ll find some styles for creating those ever popular CSS3 rounded corners.

{ -moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
}

Finally, in the embedded CSS contained in the HTML file, you’ll see some more CSS3 being applied to create shadows.

header .logo {
font-size:2.5em; 
height:52px;
padding-top:28px;
font-weight:700;
text-shadow:1px 1px 2px #000;
color:#fff;
filter: Shadow(Color=#666666, Direction=135, Strength=3);}

More to Come

As I said above, the 52 Framework is definitely still in the early stages and will continue to grow and improve. For instance, the newest beta release has added support for canvas and video elements.

I’d like to see the CSS for rounded corners and shadows pulled out of specific elements into general classes or more noticeable sample elements so you don’t have to go hunting for them in the code if you want to use them as a starter for your own styles.

Other than that, I think the framework is off to a strong start and I can really see myself building on it to create something that’s perfect for my own use.

What Would You Change?

Leave a comment below and tell us what you think of the 52 Framework. What do you like about it? What do you hate? The developers are looking for suggestions for features to add so be sure to list any that come to mind!

Comments & Discussion

48 Comments

  • http://shikebali.co.cc Shikeb Ali

    I like 52 Framework and do have some suggestions, I dunno they are good or bad but still wanna share it with you guys.

    first add some variations / alternate code for browsers (all those who are not supporting CSS3 and html5).
    and second we all need some examples, so please add some examples in the frame work or some dummy pages.

  • http://www.seodivers.com SEO Divers

    Its definitely time to use HTML5 & CSS3. Thanks for the hard work, cant wait to try this out

  • http://www.taghouse.com.br Daniel Miguel

    Great! This is just great! The best of it that it’s compatible with old and rusty browsers… I loved it, will use for everything!

  • http://matthewjamestaylor.com Matthew James Taylor

    Nice review. HTML5 is going to be a huge improvement – it can’t happen soon enough!

  • Erik

    I would add the http://ecsstender.org/

  • Pingback: 52 Framework: 第一个永久HTML5和CSS3的框架 | 丕子()

  • Sastro

    wow…that’s a great work. I think it will be a great source for future web development

  • monocidad

    Very nice!

    Awesome framework!

  • Pingback: CSS Brigit | 52 Framework: The First Ever HTML5 and CSS3 Framework()

  • http://www.cooljaz124.com cooljaz124

    Awesome ;)

  • Pingback: Resources - Tweets of the Week (6.28.10 - 7.2.10) | Think Design()

  • Pingback: 52 Framework: The First Ever HTML5 and CSS3 Framework | Design Shack : Popular Links : eConsultant()

  • http://www.yycblogs.com Chad

    Great framework. Can’t wait to see more demos for it.

  • http://www.tikikitchen.com Aric

    This probably one of the cleanest frameworks I have seen for a while. A lot of frameworks contain classes and tags that wind up stripping out thereby negating the reason why I used a framework in the first place.

    It would be great to see some examples and bench tests on how the framework is seen in various browsers. Also, any chance of creating CMS ready templates for apps like Drupal, Joomla, WordPress etc.

  • http://www.52framework.com Angel Grablev

    Hello everyone, thank you so much for the warm welcome and the amazing review! It has truly moved me.

    I first wanted to address some of the comments about more demos, you can go to http://code.google.com/p/52framework/downloads/list and get the latest working beta which i have worked hard to bring even MORE css3 and even MORE html5 elements to live. I have added things like css shadows, canvas, and much more goodies that work nicely on new browsers and degrade nicely in older browsers.

    The development is still active, we are actually working on a version 2.0 which will add the use of a little more JS to include much more support of HTML5 features in older browsers (starting with IE6). Of course all of it will be optional and the framework will only become leaner as a core for you to build amazing websites!

    Again thanks for the warmness, it has made all the hard hours of work worth it!

  • http://knowledgecity.com Jae Xavier

    there is no better time to use html5 and css3, as with any other new technology. through constant use, it just gets better and better.

    great article by the way, i’ll definitely keep this bookmarked for near future use.

  • Trevor

    Enavu is such a blatant rip off of the Envato family of sites. Lame.

  • Nexus

    Trevor, don’t be such an Envato fanboy. They can stand up for themselves. This was a great article about an important step forward for web dev. Great job guys!

  • http://wpcanyon.com Boba

    @Trevor – Enavu is older then Envato, not sure how much but few years i think. So you can’t say Enavu “copied” the name. So, what now, Enavu should say Envato copied it? Act as a grown up and stop saying stupid things like that. You don’t know the past of Enavu so STFU.

  • http://karelkapteyn.com/ Karel Kapteyn

    I really like making clean and simple code and am interested in getting into HTML5. Will definitely take a look at this framework! Nice post this got me enthusiastic about it, cheers!

  • Trevor

    You guys seem suspiciously defensive.

    Boba: You’re telling me to grow up and then dropping phrases like “STFU” as part of your response? Right.

    I have no affiliation with either site.

    envato.com – Created on: 26-Jul-06
    enavu.com – Created on: 01-May-09

  • Suede

    @Trevor – There’s no comparison between the two. They are two different entities that provide different services.

  • Pingback: ” 52 Framework: 有史以来第一个HTML5和CSS3的框架– HTML5,CSS3,WEB前端设计开发资讯站()

  • http:craigwebbart.com cwebba1

    I am interested to try your framework. Can I apply it except for your grid to a blueprint layout? I use a modified 888px blueprint layout. Is blueprint a framework too? What is a framework? Will it work with a CMS like WordPress? Is it possible to cobble all three together? Thanks for putting your system and tutorial out. I really appreciate your contribution.

  • Pingback: HTML5 / CSS3 framework - 52 Framework - develway.pl()

  • http://www.flockpost.com Puneet Sahalot

    this is great… simplifying the task of designers and developers to a great extent.

  • http://www.yourdesignblog.co.uk Szabi

    Exciting stuff. Looking forward to try it out.

  • http://devil-named-adam.deviantart.com Adam Clark

    What happens if you’re browsing with something a bit on the older side (like IE6 or IE7) and you don’t have JS running? Does it fail spectacularly or degrade gracefully?

  • http://www.baselinecss.com/ Stephane

    I’ve release BaselineCSS last year with support for some base HTML5, so I guess there not the first ;-)

  • Pingback: 52 Framework: the first HTML5 and CSS3 framework « EBI Interfaces()

  • Pingback: 52 Framework: 有史以来第一个HTML5和CSS3的框架 | 俊顶视觉设计网 - 视觉创意,前端开发,web标准设计,高端网站,网页设计教程,网站策划,网站推广,网络营销。()

  • http://canggih.web.id canggih

    great…actually i’ve been waiting for this. I wanna develop a kind of that before, but seeing this, so i just wait :)

  • http://www.52framework.com Angel Grablev

    Adam the framework supports IE6 and 7! So have fun.

    Btw, i hadn’t checked this page for a while but we have been working for a while now on version 2.0 which has astounding improvements in the whole movement towards HTML5 and CSS3 while still being highly supportive of older browser! Stay tuned ;) twitter.com/52framework is one way

  • http://www.cmsmadesimple-themes.com Paulo

    It’s a great framework!
    I’v made a template for CMS Made Simple using it.
    For those using CMS Made Simple you can find the theme XML file here: http://52framework.cmsmadesimple-themes.com

  • http://vixka.net Vixka Studio

    It looks so professional. But I just use CSS and layout, can’t use well now with HTML5. :) My clients don’t like HTML5 as I like.

  • http://52framework.com Angel Grablev

    We just launched version 2.0! It’s amazing with a lot of new functionality! Give it a look I think you will all love it!

    Thanks,
    Angel Grablev
    52framework founder

  • pankaj
  • geek_andy

    Thanks Angel, been waiting for the new version to come out. Checking it out now!

  • Pingback: An HTML5 Resources Round-Up - WebsitesMadeRight.com()

  • http://bugphp.com arjun

    nice one great framework with small foot print

  • http://www.facebook.com/html5apps Achint Verma

    HTML5…really has potential..
    It is cross browser compatible.
    It can generate effects of 3D & flash.
    It can also shrink the world by Geo-locator positioning.
    Check this for more interesting stuff..
    http://www.facebook.com/html5apps

  • tim

    hey great thing!

    one question – if I would like to do a 5 coloums grid. My only possibility is to use 5 col3 cols in a row, right. Everything else brakes the width from 960. Or is it possible to change the value of 160 px (col3) somehow. Mhhh this wouldn´t make sense …

    Kind regards,

    tim

  • Pingback: A handful of HTML5 frameworks | Mobile Development Etc.()

  • http://www.setar.com jeesus

    hola maigos de es ta kljkfjas

  • Pingback: 10 popular CSS grid systems for a website | xjblog()

  • Pingback: Resources for Web Designers | clark studio()

  • Pingback: 52 Framework | Ahmed Faisal Russel()

  • Pingback: Resources For Designers | CLARK STUDIO DESIGN()

Subscribe
Membership
About the Author