Y!UI CSS Grids
CSS grids are not a new topic. In fact, google it and you can find posts as early as 2004 debating the usability of CSS grids versus tables. As a fairly recent adopter of CSS I have delved deeply into this subject. Through my research I have found the Y!UI CSS Grid Reset file to be most useful. But if I hear someone else say:
It levels the playing field across browsers
when describing Y!UI CSS Grid Reset my head is going to explode.
vs. Tables
A table layout can be useful. However, if a user is browsing with CSS turned off then the user’s view may result in having to scroll laterally. In this case, the table provides simply the layout structure so therefore I would disapprove of the table showing with CSS off. A loose rule that I try to follow is to use tables when presenting a table. Data or charts may require tables. And hell, there may be a few times when a table layout is required. Way back in 2004, Eric states that a table would be more ideal because it offers cleaner markup. With the example he gives, this is true. But today we have even cleaner examples of Grid usage.
vs. Float
After some insight from Jason this section has been revised.
Float is great. Float can get that whole sidebar over to the right side on my container. Float can get my pictures to the right or left. The miniscule rules that go along with Float can be bothersome. If you want something to float above another container you need to place the floated container above the other container in the markup. For example:
<body><div id="sidebar">SIDEBAR CONTENT</div><div id="main_content">MAIN CONTENT</div></body>
Well, let’s think about this. If CSS is turned off, not supported, or the site is being read by a screen reader then the user will see the secondary content first. Not ideal.
-Revision-
This is true of float but not required. To clarify you can use float (and a proper float at that) in the following manner:
<body><div id="main_content">MAIN CONTENT</div><div id="sidebar">SIDEBAR CONTENT</div></body>
But in this case you would need to float both divisions rather than just the one.
In addition, in my comparison, some may believe that I am comparing each of these independant of the other. The Y!UI Grid methodology actually uses float in it’s CSS. I am not suggesting it doesn’t. However, when I design I see 3 options (really 4) for layout:
- Table based Layout
- Custom Float Layout
- Grid based Layout
- Mash Up Layout
The most important is certainly the 4th option. This is because a good designer has all of these tricks in a bag and knows when and how to pull each out at the right time. Was it G.I. Joe who used to say, “Knowing is half the battle”? Wise words.
-End Revision-
Grids
What I thoroughly enjoy about grids (and even more specifically Y!UI grids) is it eliminates these prior two problems. Not to mention cross browser compatibility. I love how I casually mention the latter as if it holds less importance. Yes, the Grid alleviates these two problems. Using the grid structure I get to place the markup semantics in order. So when that user comes along who does not support CSS, for whatever reason, they will read my content in the order I meant it to be read.
Examples
I have created this example. It shows the layout structure within the “doc” id which just means that the container is 750px wide and centered. Other presets include doc2 (950px, centered) and doc3 (100% fluid, 10px margin).
Yahoo provided cheatsheet for their CSS Reset Grid. In addition, they offer a cool CSS Grid Developer Widget
Intricate Fluid Layouts is simply an explanation of the cheatsheet. It shows all the same examples that the cheatsheet provides (which as a matter of argument is really all I’ve done with my example) so I did not find this article particularly helpful. But if you are taking your first glimpse at grids then it might be a good article to read.
I am working on some unique and truly intricate layouts based on the grid methodology.
6 Responses
Jeff says:
Fair is fair. You are right. However, as follows from your post I link to and as I mention in my article there may be times when the table is needed. I think we both agree it’s something to be avoided if possible.
And to be honest, there aren’t too many legit scenarios of when the table would be preferred.
April 11th, 2007 at 11:31 pm
Eric Meyer says:
Nope, not many scenarios at all– I just wish CSS could cover those scenarios as well as all the ones it already does! And yes, I’d say we absolutely agree that you always want to avoid table markup for layout when you can.
April 12th, 2007 at 10:22 am
Jason says:
Check out this great read from Jeff Croft titled: YUI CSS Grids: awesome, but useless. Make sure to check out the comments provided by the users. They give some great insight regarding the setup of the grids css file, the choices made by Yahoo, and some extra coolness you can do with your style definitions.
April 17th, 2007 at 1:00 pm
Jason says:
And check out this example provided by Dustin Diaz. Be sure to click on the links at the top of the page.
April 17th, 2007 at 1:05 pm
My Comment Story is Better than Yours | Jason Leveille's Blog says:
[...] Brown of Jeff Brown Designs. We had recently launched his new site and Jeff had written a post on the use of CSS grids. Now, I know this doesn’t count for me, and Jeff is probably going to call me up and ask why [...]
August 13th, 2008 at 7:28 am
Eric Meyer says:
To be fair, I said that in a case where a strong, table-like grid is needed, then table markup makes more sense than the alternatives, and I still believe this to be true. The Y!UI grids, while excellent, don’t cover those sorts of situations.
April 11th, 2007 at 8:41 pm