Top 10 CSS Tools for the Design-challenged Web Developer [con't]
6. Minify
When deploying a site, developers commonly compress -- or minify -- their CSS files, removing all of the comments, spaces, and tabs in order to reduce the file to its smallest possible size. Minify automates this task by not only compressing, but also combining and even caching your CSS and JavaScript files.
Minify is written in PHP 5, meaning you'll need to install it on your Web server. From there you'll be able to load the Web-based interface and identify the CSS or JavaScript files you'd like to minify and combine. When complete, you'll be provided with a URL that you'll use to replace the disparate calls to the various CSS or JavaScript files.
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
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
Developed by Internet juggernaut Yahoo, the Yahoo User Interface (YUI) Library offers an enormous collection of CSS and JavaScript tools that greatly reduce the time and pain required to build sophisticated Web-based user interfaces. The Grids CSS component forms an important part of this offering, providing a great solution for quickly designing a page layout, and offering native solutions to wildly frustrating problems such as the infamous "sticky footer" issue.
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.
Conclusion
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
Find a programming school near you