Many programmers have been using frameworks to help them rapidly prototype and build applications. They allow the programmer to focus on creating solutions to problems using an iterative method. Being able to conceptualize, prototype, test, and iterate is a powerful way of incrementally building an application — and up until now, web designers have been left out of the loop.
The Yahoo! Toolkit comes with a collection of very helpful CSS files that are useful to apply iterative development techniques to web design. It consists of three core files: grids, fonts, and reset. The latter two standardize unit sizes across all A-grade browsers which is, as many designers know, valuable and often necessary. Grids is where the real magic is: with it, a web designer can easily sketch up layout concepts straight in HTML.
For prototyping, the Yahoo! Toolkit is indispensable. However, in production there might be some drawbacks the astute web designer should be aware of. The problem is with the way the grids.css file requires the designer to use a pre-defined set of id’s and classes in conjunction with a set of markup conventions. This makes the structural layer dependent on the presentational layer, which according to the W3C breaks accessibility.
The problem is often stated imprecisely, or as a solution rather than a problem statement. This has in the past led to confusion when discussing it. One common statement is separate structure from presentation. This sounds good, but accidentally implies that all presentation is unstructured and does not say what separation means; it also lacks any mention of a benefit gained or a danger avoided. A similar statement is separate content from presentation which is similar but implies that presentational resources (images, sounds, scripts) are not content - a view with which server administrators would disagree. Another common statement is that semantics should be separate from presentation. Again, this provides no justification and implies that ‘semantics’ - meaning - is the preserve of one sort of information.
Having looked at some imprecise solution statements, what is the problem statement? The actual problem seems to be that some content has made inappropriate design choices that limit restylability. Communities that depend on a styling that is very different from that chosen are thus unable to use the content.
However, if as a web designer, you are set on using the Yahoo! Toolkit for your production CSS (or if you want to push your prototypes past layouts); I have a tip for you:
Consider the following markup:
<div class="yui-b content">
<p>Some content...</p>
</div>Use a simple attribute selector in your CSS:
div[class~=content] {
padding: 10px 0;
}All in all, I highly recommend using Yahoo! Toolkit in your web design process. Prototyping your designs in the medium you’ll be delivering in is a step-forward for web designers. It also helps bring an iterative development process to web design which is great for cutting down the bugs and refactoring layouts early on. I’ve personally found it helpful and I hope you will to.