SBala

Although CSS frameworks and grid systems are relatively new, Blueprint tends to receive most of the attention when speaking of building a grid-based layout. Blueprint is great, but sometimes the extra features in it are unnecessary for most people who just want a fundamental and easy to implement grid. The 960 Grid System is just that.

1. It's LightweightLet's face it, adding too much extra bloat just for a CSS framework is the last thing a web developer wants. Adding only 3kb with a fully functional grid is a good compromise of functionality and efficiency.2. The Magic NumberThe 960 Grid System uses the backbone width of 960 pixels, which is the magic number for all modern monitors. 960 is divisible by 2, 3, 4, 5, 6, 8, 10, 12, 15, 16, 20, 24, 30, 32, 40, 48, 60, 64, 80, 96, 120, 160, 192, 240, 320 and 480. The large number of divisors that it has makes it an ideal candidate for website widths. It isn't a good choice for fluid layouts, but does a great job of grid layouts.3. Reset Your ValuesThe 960 Grid System includes a small file that includes a statement that automatically resets all of the default browser styles that commonly plague a good grid layout. This ensures that your grid looks the same - regardless of which engine is rendering it.4. 12/16You can make a grid composed of twelve or sixteen columns. This allows you to tweak the widths of the various elements on a page, but still maintain a unified alignment with the columns.5. Auto Margins960 automatically adds margins to its grid-based elements, so they never overlap. 'Nuff said.6. Typography960 automatically sizes text for you, which makes things look pretty good with sans-serif fonts. If you don't like any of the settings, you can easily edit and change them without harming your grid.7. Sketchy960 provides printable sketch paper that allows you to draw and plan using the column-grid system before you begin coding.8. Openness960 is 100% open source. It is licensed under the GNU GPL and the MIT license. This basically allows you to do anything you want with the code. The MIt license permits any use, reproduction, sale, and modification of the 960 Grid System as long as the code remains under the very same license.9. It's Float-TasticIt is very easy to arrange block-level elements by adding float attributes to them. Since 960 takes care of all the sizes and margins, your block-level elements arrange themselves without any width-related hassles. Also, remember to take advantage of using multiple CSS classes by separating class names with a space.

10. It's Easy

Simply add the class "grid_[number]" to your block-level elements to specify the amount of columns that composes their widths, and and the class "container_12" or "container_16" to specify how many columns are going to be in your main container/block-level element. See the demo and view its source for an idea of how it works.

Here are some interesting CSS techniques that do some really interesting things. Not all of them are completely perfect, but a good lot work in Firefox/IE/Opera. Although generally the use of CSS techniques that involve hack(ish) code is something I disapprove of (since browser rendering behaviors change), these are meant to show the power of CSS rather than a list of things that are ready for use.?

[List of CSS Techniques]

My favorites include:

• CSS House 2 (a cartoon image of a house with gradients - no images - pure css)
• The CSS Sticky Footer
• CSS Menu Descriptions
• CSS Gradients & Gradient Text
• CSS Bar Graphs

I wrote a post not too long ago about Firebug, Dragonfly, and the developer tools the web development community has grown to love and appreciate. Firebug, Dragonfly, Internet Explorer Developer Toolbar, and that thing on Safari all share one thing in common: they are  extension of their corresponding browsers and when testing on a different browser it is often times hard to find the plugin needed, or tedious to get accustomed to a new interface. When things get dry in cross-browser bug fixing and DOM/CSS inspection, the new smaller kid in town is planning on saving the day - Firebug Lite. Unlike it's older brother, Firebug Lite is a chunk of JavaScript intended to be added to a web page that is being developed and provides an interface for debugging without the need of any extensions.

It's rather simple to use Firebug Lite. All you need to do is add in the script at http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js.

There is also an offline method to use Firebug Lite as well as a bookmarklet for use during web development.

There are tons of other little features built into the tool, so go ahead and enjoy another method of debugging.

When doing any form of web development, the end goal is always a smooth interface for a user. When making both the server-side code that generates a page or the frontend interface template, problems are sure to follow. Maybe an accidental typo in the JavaScript bricked the interface, or the small snippet of CSS went horribly wrong; whichever the case, a tool that can show the hierarcheal progression of HTML elements and their associated pieces of CSS and DOM code enable a faster approach to debugging since you will know which chunk of code is creating the problem.

When debugging, there are multiple tools that allow you to take a look under the hood of any web page. My personal favorites are the ones that integrate with browsers. Depending on which browser you use, your choice will vary. If you are using Internet Explorer, I suggest getting Firefox.

For the brave souls developing and debugging for Internet Explorer, Microsoft offers a toolbar with some tools that come as close to the Firefox or Opera debugging experience as you can find on Internet Explorer. The screenshots say everything that needs to be said.

Opera's Dragonfly, which is currently in an alpha stage of development, is a fairly robust tool that provides debugging tools for JavaScript, CSS and DOM inspection, and error detection. Although the Opera browser itself is not released under an Open Source license, the Dragonfly debugging tools are available under the BSD license. It is still a product in Alpha, and there are many features under development.

The second alpha release is the next step towards Opera Dragonfly 1.0. Look forward to new features such as DOM editing, improved JavaScript thread handling, XHR and HTTP monitoring, improved keyboard navigation, and translation into a number of languages in subsequent releases.

*Note: Dragonfly provides tools such as integrated validation in a single extension whilst Firefox requires two extensions for a similar functionality. A single extension provides a further integrated interface and cohesive sets of tools. This is hardly a drawback for choosing Firebug, but merely a slight benefit for Opera users.

Lastly, and most certainly not least, the excellent combination of Firebug and the Web Developer toolbar demonstrate the power of Firefox - its extensions. There really isn't much to say. Firebug provides the similar tool-set of CSS and DOM inspection paired with error detection. The web developer toolbar has many nifty tools such as a ruler for measuring pixels on a page and built in validation for external and local files.