TyCamTech.com

This is kind of a tutorial and a cheat at the same time... in this article, I'm going to essentially give you the tools to do great CSS without having to learn it... but... you'll find yourself learning anyway as you start to use it. I know that might not make sense as you read this but by the time you're done reading, downloading and trying out... you should understand quite clearly exactly what I meant.

Today, I'm going to show you some CSS Frameworks!

CSS Frameworks are essentially CSS files that are already made for you, but allow for enough flexibility that you can make your site using it and still be 100% unique from every other site out there. They're usually 100% web standards compliant and made to work with as many browsers and operating systems as possible. Like all frameworks, they have their pros and cons. For example, they are fast loading, tableless, cross browser compliant and compatible immediately and have done most of the work for you but they are also rather bloated with a lot of stuff you'll never use and they kind of limit you sticking to their structure.

Whether you are looking to skip the entire learning process or to get some great examples that work straight away that you can tinker with... CSS Frameworks are a great way to familiarize yourself with everything from text formatting to complex layouts.

Here are some examples of great CSS Frameworks:

• Elements - Multiple folders to separate various areas of your site as well as including some key features such as lightbox and that pesky png bug.
• Blueprint - A rather complete framework but the real genius in this is the twitter page, facebook page, discussion groups, tutorials in multiple languages, wiki and more.
• ElastiCSS - This one comes built specifically for jQuery. It's pretty powerful while rather lightweight.
• 960 Grid System - Based on the 960 width website, this framework uses specific numbers of columns to build impressive layouts.
• CSScaffold - This is a CSS framework based in PHP. It comes with an htaccess file which allows the css to run through the PHP parser, giving it added dynamics and functionality.

These are some of the ones I recommend that you at least download and look at, if you have time.. even give a few a try and see what you like and don't like. For more, check out this list:
http://www.w3avenue.com/2009/04/29/definitive-list-of-css-frameworks-pick-your-style/

Now then, I can't realy go indepth into exactly how to use each as that would make for a massive tutorial, but I can make a few general suggestions when trying any or all of them.

Try to keep the example layouts open while you have their CSS files open at the same time, so that you can match up the ID's in the DIV's with the corresponding CSS elements. Being able to see where one is and what it says goes a long way to understanding how it is being affected.

Do NOT be afraid to modify the hell out of the CSS files that you get. You downloaded them for free in seconds, you can do it again. Don't be afraid to mess with them to the point of no return because they are very easily replaced. And many wise people will tell you, you can't fix something until you learn how to break it.

Gloss over the parts that make absolutely no sense to you.... don't get frustrated. You're not a pro yet (or you wouldn't be reading this) so it's ok to not get all of it. That's not why I want you to try these. You're job is to skim through some of it and pick up bits and pieces... to understand why some of it works and why some of it was done the way it was done.

If nothing else, as I said, if you don't really even want to learn from them, or CSS itself at all and just want to hit the ground running then this tutorial still may be of use to you. Find a framework that works for you, upload it and off you go.