52 Framework: The First Ever HTML5 and CSS3 Framework

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

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

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.

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.

<!DOCTYPE html> 1 < ! DOCTYPE html >

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.

<script src="html5.js"></script> 1 <script src = "html5.js" > </script>

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.

<body> <header> <nav> </nav> </header> <aside> <form> </form> </aside> <section> <article> </article> <article> <article> </article> </article> </section> <footer> </footer> </body> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 < body > < header > < nav > < / nav > < / header > < aside > < form > < / form > < / aside > < section > < article > < / article > < article > < article > < / article > < / article > < / section > < footer > < / footer > < / body >

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.

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;} 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 . 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; } 1 2 3 4 5 6 7 : : 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; } 1 2 3 4 { - 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);} 1 2 3 4 5 6 7 8 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!