CSS Frameworks and Debugging Tools

Dec 22, 2009
Episode 4
This week we look at some tools to get your projects done more quickly. Nick explains the benefits of CSS frameworks, and Jim demonstrates the use of browser debugging tools.

Thanks to those who make Doctype possible!

CSS Frameworks

Writing CSS for any website, even websites with just one page, can be a non-trivial task. Before you embark on any particular path towards styling your website, it's always a good idea to review your options before you begin. PIcking a framework early can save you a lot of headaches down the road.

There are tons of different frameworks and pieces of code out there that can help you style your website, and admittedly, the phrase "CSS framwork" is used pretty loosely in this episode. Some of them come in the form of traditional CSS files (like Blueprint), while others are more programmatic and robust, like Compass, Sass, and Susy.

If bandwidth is a concern, or if you just want a quick grid, the 1KB CSS Grid might be the right choice for you. No matter which you choose, make sure you at least choose one, because having no framework at all can be a real pain.

Browser Debugging Tools

When you are building a web page and something is not quite right, nothing is more valuable that knowing what is going on inside the browser. Fortunately, today’s modern browsers give us the ability to peek inside, and even tweak pages on the fly.

Today we are going to be looking at 3 tools, most of which share functionality. These tools are Firebug for Firefox, the Web inspector for Safari, and the Developer tools for Internet Explorer 8. If you are using chrome, it uses the name “Developer Tools”, but is nearly identical to Safari’s Inspector.

These tools give you the ability to view the full source of the page as it currently exists, and allows you to manipulate the markup and styles in real time. Using the javascript console you can inspect and set variables, and even invoke functions at any time.