posAbsolute CSS Framework, website starter kit

Web development companies have a bad habit of doing inconsistent websites depending on which developer coded the website. It is one of the reason we have so much back-end framework. However front-end teams are a bit more in the dark. While there is basic guidelines for CSS and JS, there is generally less management by team leaders. It becomes a big gray zone where inconsistencies often become the norm. This is what this framework aims for, empowering your front-end developers with a tool to make their JS and CSS code more coherent.

Why use a CSS framework

Better quality and coherence coding inside a front-end team
Preset CSS classes, know where your going with highly reusable classes
A collection of some of the best jquery scripts
A solid cross browser compatible stylesheet

A new project means getting JS plug-ins together, clean a CSS and restart. This framework is intended to be your project starter, and in most case, you can jump in the project right away with a solid css foundation. This is not really a CSS “framework” but more a website starter kit.

The framework is based on a 960px grid, but is very easy to manipulate to get the grid you want. It is however not intended to be used as a liquid grid.

Download the source code View demo

It includes:

A basic tree folder, with good practice implemented
A valid XHTML template with basic website foundation and a small demo of every plug-ins implemented.
A Basic CSS style, using a reset style, and a import for elements like form design.

It also includes jQuery with most frequently used plug-ins
jquey.cookie.js // Cookie simplified
jquey.easing.js // Make your animations more pro, without the high KB cost of jquery UI
jquery.validationEngine.js // Beautiful form validation
jquery.linkFader.js // Make your CSS sprite fade, implemented on the Nav framework
jquery.tooltip.js // Nice elastic tooltip
jquery.colorbox.js // A nice lightbox.

Why jQuery and those plug-ins?

jQuery is probably the most common JS library right now, it is easy to use, easy to understand and can help you save a lot of time. The plug-in core implemented are mature (which means they have been implemented in a lot of website easily) and have a high level of re-usability, that said you can add or delete the ones you don’t want. Remember that while all these plug-ins are there, there is absolutely no obligation to link them in your web site, you can just let them sit there until you need them.

One problem with JS plug-ins is the bad repartition of images and CSS involved with them. In this framework, every images and CSS stay in there plug-in folder, and every plug-ins you will add needs to follow this rule! It gives you a less bloated CSS and images folder, which will hold only website items.

CSS practices

The framework heavily promotes indentation, remember that C in CSS means cascading. It also promotes the use of CSS sprite in general and especially for your navigation, if you look at the implemented template, the navigation use CSS sprite with the linkfader script, which gives it a nice hovering fade animation (add the class linkFader to your link and your done)!

The framework use the CSS functionality @import to link other stylesheet inside global.css. This gives you a great way to link to different style sheets for special purposes. Currently, it imports a reset, external links and basic form style sheets. I do not recommend importing to much style sheets, keep it simple.

The print CSS is basic, it deletes everything but the #contentSection, and add the print logo. In a general way, printing the entire website looks bad, printing the text content makes it nicer to read.

Hey! font-size are not in em!

While em give a great power over the way font-size are displayed on a website, it has some downsides. First, it is harder to manipulate, em is unfortunately not relative to the body, but to it’s parent. You basically need a reference to know which size to apply when relative em’s collide. It makes it harder to maintain, you could change a parent font-size without knowing that a children on another page will be affected.

All modern browser can resize px font-size, only IE6 can’t and I would argue that only a small fraction of it’s user base know and use this tool

I know that em is a good practice. I certainly don’t want to start a crusade against it, but I just find it unpractical, especially when working with a team, 1 pixel difference for a title can make a designer scream. So if I can avoid it, I will.

HTML practices

While this template validates strict Doctype, you are welcome to move back to transitional doctype any time you want. You can’t control user input content, and this will probably make your template invalid. Keep it clean and indented, the use of HTML comments is not recommended as there is sometimes quirks with IE6 (It sometimes add spaces, which is pretty bad).

Javascript practices

Please put all your javascript code, related to a specific website, in common.js. The framework has some light examples in the demo page, also there is some basic jQuery events in common.js, to make it easier to remember the syntax.

Download the source code View demo

Tested on:
Internet Exploder 6 & 7
Firefox 3+
Safari 4

Version 1.0.1 online
1.0.1: Small fixes, removes JS includes, added new clearfix method

If you like and use this script, please consider buying me a beer, it’s cheap and a simple way to give back!