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
By Dave Merwin on January 28th, 2009 at 12:27 pm
I agree completely in principle. However, YUI ties you down to YUI. What about other options, like 960.gs and jQuery. That has been a winning team for me. YUI is heavy and cumbersome compared to the combo I mention above.
Thoughts?
By Dave Merwin on January 28th, 2009 at 12:29 pm
Also, 960.gs has several layout templates. So, you could have a template from a customer that would makes sense based on the layout.
By Frederick Townes on January 28th, 2009 at 12:46 pm
YUI is the most mature framework that we’ve dealt with. This post originally began as an overview of the leading frameworks, but we decided to go another direction because of our experiences with YUI + jQuery. We find that using YUI results are more consistent and we can reuse work that we’ve done ourselves for the types of clients and projects we handle more easily than trying to find a framework that happens to compliment our style. To each his own, but YUI is lives up to it’s title of a framework in that regard.