Top 10 CSS Tools for the Design-challenged Web Developer [con't]
If you're looking for a command-line minifier, check out the YUI Compressor, which is part of the Yahoo User Interface Library.
7. Creating CSS-based Horizontal and Vertical Lists
Once site that I have returned to countless times over the years is Listmatic, which isn't so much a tool but a reference for creating CSS-based horizontal and vertical lists. The dozens of examples provided there have proved handy time and again when I forget the particular syntax required to create lists in this manner.
8. The 960 Grid System
The 960 Grid System was to my knowledge the first CSS framework to really hit the mainstream, and deservedly so given the incredible amount of time and effort put into building this practical layout solution. If you don't want to take my word for it, 960's long list of high-profile users should sway you, among them Lulu and Twitter's official blog.
So what sort of features does 960 offer? Like Blueprint, it's also based on a 960-pixel width but it offers several variations based on the column count (12, 16 and 30). Additionally, designers can take advantage of the many layover templates available for industry design programs such as Illustrator, Photoshop, and Gimp.
A number of third-party tools can help you create 960 Grid System-based layouts with incredible ease, including the 960 Layout System and the Variable Grid System. Be sure to check these tools out if you'd rather avoid CSS code for as long as possible.
9. The QuirksMode CSS Browser Compatibility Table
Few things in life are more annoying than dealing with cross-browser compatibility issues, particularly when a large part of the population continues to use archaic solutions such as Internet Explorer 6. These incompatibilities stifle creativity and ultimately contribute to an enormous time drain within the Web development community.
Save yourself some time and hassle by first consulting the QuirksMode CSS Browser Compatibility Table and determining whether your dream feature will cover enough browsers to be worthwhile.
10. YUI Grids CSS
Unlike several of the other frameworks introduced in this article, YUI Grids CSS offers several width options, including a fluid-width (100%), several preset widths (750px, 950px, 974px), and the ability to simply define your own desired width.
If even the thought of writing CSS is enough to cause nightmares, the YUI developers have even gone so far as to create a Web-based grid builder, which allows you to create complex layouts without having to even open your IDE.
The solutions introduced in this article are capable of boosting your productivity from the very first day, eliminating many of the challenges, timesinks, and various annoyances that have become so commonplace when doing CSS development.
About the Author
Jason Gilmore is the founder of EasyPHPWebsites.com. He also is the author of several popular books, including "Easy PHP Websites with the Zend Framework," "Easy PayPal with PHP," and "Beginning PHP and MySQL, Third Edition."
Original: June 28, 2010