Part of getting older is realizing that certain talents in life simply do not come naturally. For instance, one talent in which I am particularly deficient is design. Whether drawing a picture, playing with Lego's, or even signing my own name with a flourish, the task is generally a frustrating, fruitless process. Yet Web design is an inescapable part of being a Web developer, often requiring the developer to be involved throughout the process.
In order to minimize the time and effort required to design pages used for mockups and the like, I prefer to rely upon a CSS framework and a variety of other utilities to help create well-organized layouts. Whether you suffer from the same design deficiency I do or you are a talented designer looking for ways to streamline your process, consider checking out the 10 CSS solutions introduced in this article.
1. Blueprint
Although I'll present these solutions in alphabetical order, it's fitting that Blueprint appears first. It's a solution I happen to use on a daily basis. Blueprint is a CSS framework that automates many of the tasks you'll regularly need to carry out for each new project, such as configuring CSS styles to remove cross-browser discrepancies, defining print-specific styles, and devising a sane approach to creating a grid-based layout.
DIV containing a class name span-5 (5 columns at 40 pixels each). Therefore, to define a 960-pixel layout broken into three columns, you could do something like this:
<div class="span-5"></div> <div class="span-16"></div> <div class="span-3"></div>Interestingly, Blueprint's capabilities are extensible through plugins. For instance, you can use the silksprite plugin to integrate the popular Silk icon set, or the included Fancy Type plugin, which enhances font and layout capabilities.
2. Clean CSS
Searching for a CSS selector in a large CSS file can quickly become tiresome when the code's organization isn't highly optimized. One great trick for enhancing navigation is to sort selector properties alphabetically. Manually sorting and maintaining the order of these properties can be tedious, so leave it to an online tool such as Clean CSS.
Clean CSS can also sort your selectors, but be careful because selector ordering can change the intended behavior! Instead, because you'll probably need to organize your selectors manually, I suggest doing so according to the elements they are intended to affect, for instance creating a section for form elements, a section for headers, and so forth.
3. Creating Forms with Wufoo
I've always thought that designing accessible, balanced forms was one of the most challenging parts of the design process. Wufoo automates that process, providing a Web-based HTML form builder that you can use to create really appealing XHTML- and CSS-based forms. Although the service isn't free, the flexible pricing structure and the powerful form design and data collections features are worth a look.
4. CSS Inliner
Many e-mail clients will strip out any external style sheets because they prefer that the CSS be coded inline. Because inline coding isn't the best practice, it makes more sense to manage the CSS externally and then convert it for inline use before sending the HTML e-mail.
Popular mailing list manager MailChimp released a tool that automates this inline conversation process for you, called the Automatic CSS Inliner Tool. All you need to do is paste your HTML into a Web-based interface, and MailChimp's tool will do the rest.
5. CSSTidy
Like with many declarative languages, you can construct valid CSS syntax in a wide variety of ways. For instance, the following two declarations are identical in nature:
#header { margin: 1px 1px 1px 1px; }
#header { margin: 1px; } Such flexibility opens up the door to inefficiencies, notably unnecessary code bloat and therefore additional bandwidth consumption, and under deadline pressure it's easy to neglect best practices. Enter CSSTidy, a great tool that will optimize your CSS code by converting the former declaration into the latter, for instance. It even goes so far as to remove the last semicolon in each declarative block, a common syntactical oversight.
According to its website, CSSTidy claims a typical compression ratio of 30% or more thanks to syntactical cleanup and whitespace removal.
Find a programming school near you