posAbsolute CSS Framework, website starter kit

by Cedric Dugas on September 8, 2009

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!





Ads

Become expert developer with testking 646-046 web development course. learn about all latest trends and updates in web development using testking 642-533 video tutorials and expert testking 70-536 study guide.



14 comments

Is it just me, or does the demo not work?

Error: $(“#formID”).validationEngine is not a function
Source File: http://www.position-relative.net/creation/posAbsolute_CSS_Framework/js/common.js
Line: 9

by JayBird on September 10, 2009 at 10:39 am. #

A simple uppercase in a folder name killed me here , sorry, corrected

by Cedric Dugas on September 10, 2009 at 10:47 am. #

Good stuff, thanks for fixing :)

by JayBird on September 10, 2009 at 10:56 am. #

great resource!

thanks

~ Aaron I

by Aaron Irizarry on September 10, 2009 at 11:02 am. #

Nice, might use this in the near future

by Alex on September 10, 2009 at 3:32 pm. #

posAbsolute CSS Framework, website starter kit…

While there is basic guidelines for CSS and JS, there is generally less management by team leaders in front-end. This is what this framework aims for, empowering your front-end developers with a tool to make their JS and CSS code more coherent.

by CSS Brigit | posAbsolute CSS Framework, website starter kit on September 11, 2009 at 5:27 pm. #

[…] posAbsolute CSS Framework, website starter kit « Position Absolute (tags: webdesign css html javascript jquery development layout framework xhtml frameworks) […]

by links for 2009-09-12 » 4exp.net on September 12, 2009 at 12:02 pm. #

Hi. Try with Ubuntu with Firefox 3.0.14 and don´t works? Any Ideia?

by DouG on September 23, 2009 at 8:55 am. #

Why not use Google’s library for jQuery?
http://code.google.com/intl/fr-FR/apis/ajaxlibs/documentation/#jquery

by Benoit Deziel on December 4, 2009 at 12:00 pm. #

Yea, the response time on google can be really slow, sometime slower that downloading it from my server

But this is a good option worth taking a look

by admin on December 4, 2009 at 1:56 pm. #

Hello Cedric,
Good work w/ the framework. How can I get the files attached to the index? All the js files. Where are the links?

by ODX on June 17, 2010 at 7:49 am. #

Dear Sir,

Awesome work, I use it on my project and thanks to you, I am so happy that my clients are happy to see jquery in action.

Regards,
M.Singh

by sadamusic.com on December 19, 2010 at 6:56 am. #

I am using multiple views in backbone.js and validating a form loaded via a template. it seems that no matter what i do i cant get the promt to position correctly, it just always positions just off the screen at the top and 233 pixels to the right. any suggestions, is it possible that it cant find the given inputs location?

by Blake on January 16, 2012 at 3:23 pm. #