As John Resig said not too long ago at his talk at Yahoo! about Advancing JavaScript with Libraries we support the advancing of most recent trends in web development like microformats, JS libraries and CSS frameworks as well in short because of the leverage they provide. John made the case that not only do libraries allow for the user to “skip” the hours of experience required to handle complex problems that slow down the development process, but he also highlighted that the libraries are one level of abstraction away from the DOM and as such allow for new patterns and paradigms of development to emerge. In step with jQuery’s motto, “The Write Less, Do More, JavaScript Library” and the vision of the YUI team, we at W3 MARKUP are debating which CSS Frameworks might be of the most use in reducing turnaround time for projects as well as the knowledge required to for our clients to support the finished projects. Again, CSS Frameworks, like JS libraries allow for simplified application of design fundamentals required to move forward with creating style sheets.
For the most part we find that CSS frameworks focus on three key elements, layout, typography and markup semantics and look and feel. Each framework has its own degrees of strengths with regard to any of those elements, however what they all have in common is their orientation around the grid and effective use of it to speed the rollout of a layout and leave implementation of look and feel as the primary task to be done. What we have also found over the past year is that the YUI has done a phenomenal job with their project to provide the foundation for a robustly structured interface that can stand the test of time and simplify not only the lives of developers (who often care not for the intricacies of CSS), but also for the future features and variations that a site might have to survive in its lifetime.
Taking a closer look at the tools in the tool chest:
- CSS Reset neutralizes browser CSS styles. So similar to Eric Meyer’s CSS Reset, this will make sure that on a cross-browser basis, your CSS will behave as consistently as possible.
- CSS Base applies consistent style foundation for common elements. So the point here is that once you have the browsers reset to behave consistently, now the same must be done for all elements available in the DTD.
- CSS Fonts foundation for typography and font-sizing. A vital step in organizing your thinking and your project, your typography can be handled from a single location. This also makes maintenance of sIFR integrations even easier to manage.
- CSS Grids more than 1,000 CSS-driven wireframes in a 4KB file. Keep things simple and consistent by conforming to the same types of layout patterns that designers have had in the back of their minds for ages. This is a great addition to your project to assist with rapidly implementing elements into your layout.
- And finally, we recommend separating an additional file from the rest of the bunch. This one should contain all of the styling that you apply to your elements that would allow you to apply CSS Zen Garden principles to your layout. In other words, your foundation has defined the wireframe of your site making it consistent across browsers, making sure elements behave correctly and managing typography. Now, use this final file to apply the theme.
This is quite a powerful combination. Most of the web 2.0 developers out there will appreciate the leverage that is to be gained from this approach to code production. Obviously, since you’re adding several files to your project, you’re also creating additional HTTP transactions that will slow down your site. So be sure to apply some optimizations to the site before it goes to production. The development benefit should not become a punishment for the users.
For those of you who are just getting started with YUI, I hope this was helpful encouragement to dig deeper and to build your applications and sites more effectively. For those that still need to learn more information before diving in, check out this video:
Getting Started with YUI's Online Documentation @ Yahoo! Video
