So I’m delving into the next-generation designs for several of our newspaper sites, and I thought it would be incredibly handy to have a great CSS framework for creating advanced grids. I’d seen the Yahoo User Interface library’s grids module and thought it might fit the bill, so I dug a little deeper.
After playing with it a bit, I’ve come to the conclusion that it’s really, really nice — and at the same time totally useless to me. Unless I’m missing something, the widest possible top-level template (which Yahoo calls your “outer template”) is 750px. I’m dead-set on making these sites wider than that.
So…I ask of Dustin, Simon, and anyone else at the big red Y! that might be reading: am I missing something, or is this a limitation of the framework?
001 // Adam Spooner // 06.05.2006 // 2:44 PM
Hey Jeff,
I took a look at the YUI and think I’ve found where to adjust this…if it even needs to be.
If you go to grid.css [found at - yui/build/grids/grid.css] you can adjust the settings for the width. There are a few different layouts, so just adjust the one that you want to change.
I say, if it even needs to be [adjusted] because in the CSS file, the 750px is set as a min-width and not a max-width.
Then again, I could be completely wrong on all of this and not have gotten a bit of what you were really stabbing at. If so, just bash me textually [is that a word…kinda like verbally] and call me an idiot. =)
Cheers!
002 // Wilson Miner // 06.05.2006 // 3:24 PM
Can’t you just override the width (or set a max-width if it really is just a min-width) in your site’s own CSS? Or am I missing something too?
003 // Jeff Croft // 06.05.2006 // 3:36 PM
I definitely could be misunderstanding it. I haven’t really tried to make a page with the thing yet. but, i got to the point in the docs where it told me that I I needed to pick an “outer template” and the biggest one I could choose was 750px. I sort of threw up my hands at that point and decided it wasn’t going to work for me.
I hope I’m wrong, and maybe I’ll discover I am when I actually try to make something with it. But, from reading the docs alone, I didn’t see how you can go wider than 750.
(Of course, you can hack the CSS. I could do that, but if I’m going to do that, I may as well develop my own version.)
004 // Nathan Smith // 06.05.2006 // 4:11 PM
Hmm, that’s interesting. I hadn’t really looked into their CSS stuff. The JavaScript libraries are intriguing to me, but it seems like CSS is simple enough of a language that there shouldn’t need to be preset frameworks. Again though, maybe I’m missing something too.
005 // Dustin Diaz // 06.05.2006 // 5:51 PM
Damn you Crofty ;)
I’m glad you put this up as an open ended question rather than a statement. It is indeed much more useful than you might think. However you might be thinking it’s for something else or you’re just using it in the wrong context. What that means is, well, maybe it is useless… but useless for you and for what you’re trying to use it for.
One cool thing I’ve done with it is made seven different templates with virtually the same html with the exception of one class name (yui-t (1-7)). It’s wonderful because it’s completely source order independent.
If I wanted a style switcher on my site you could take the approach of swapping out a className rather than a whole new css file. Thus, no reason for the whole “Invasion of the Body Switchers”
The documentation says it supports hundreds of layouts, but in technicality, it can support much more. It just happens to be that you really shouldn’t be putting 6, 7, or 8 columns on a website. But hey, if you want, you can totally put 2x4 columns right next to each other :)
On the topic of “class names in YUI considered harmful” - Well, it’s only a handful of four or five classes, big deal. Not to mention the extra div or two that makes the magic happen… ultimately it’s accomplishing something more bullet proof than you could ever do without them (eg: like applying paddings to the inners, and not the outers).
The outer template (which isn’t really 750px) is based on the ‘em’ unit. You can simply set that to whatever you want… even 100%, since indeed, all the grids are based off percentages - so you don’t have to worry about messing anything up.
The outer template is based on ‘em’ because of the nifty scaling factor. Just try resizing your template and watch the magic :)
006 // Dustin Diaz // 06.05.2006 // 7:30 PM
And because I like you…
007 // Jeff Croft // 06.05.2006 // 7:38 PM
hah! That’s awesome, Dustin.
Perhaps I came off as too harsh. i didn’t mean to bash the YUI grids at all. They do look really nice. I was just trying to understand if the 750px wide thing was a limitation or not. It sounds like you’re telling me it’s not, but if that’s the case, I think the documentation is a bit misleading.
I’ll give it another look. In the meantime, I came up with something myself that might be more well-suited to what I’m working on, anyway. But, the Yahoo grids setup does look very nice and simple…no doubt.
008 // Brian Ford // 06.05.2006 // 10:01 PM
© 2006 Jeff Croft’s Cousin I had absolutely no idea that I owned the copyright on that layout.
Kick ass.
009 // Dustin Diaz // 06.05.2006 // 10:27 PM
But Jeff, you already said it was awesome in your post ;) - I was looking to get something more along the lines of “Oh, now that’s useful.”
Either way, I’m glad I could provide some entertainment. I have no doubt that you’ll be able to come up with something on your own.
Brian, the release notes are in your name man. You can’t back out now. :p
010 // Nate Koechley // 06.05.2006 // 11:07 PM
Hey Jeff,
750px centered is an internal-to-Yahoo! visual design requirement, and those requirements drove the development of YUI Grids.
However, Wilson and your other commenters are correct that you can simply override the containing width in your CSS. A nice feature of the internal components of grids is that they are all percentage based, and so will work within any external width.
Another undocumented feature is that you can continue to nest the inner grids to your hearts content - think recursive. The system should hold up as you create 100 columns, for example. That said, you’re correct that both “4-max internal columns” and “750px width” are current contraints in the supported and documented system.
Stay tuned for continued development of our YUI CSS Grids, and keep the feedback coming.
Cheers, Nate
011 // Sherwin Techico // 06.06.2006 // 1:46 PM
Sweet. Thanks for invoking DD to set that example up. Finally, another right step into a CSS framework. Now, only if we can have some type of “pngfix.js” that works for PNG background-images =)
012 // Chris H // 06.08.2006 // 8:20 PM
The grids work quite well with Django as well, since you can have all the grid markup in your base template and define a block around the class of the div#doc element. Then you can define which grid template to use for the different parts of your site.
013 // Andrey // 07.07.2006 // 9:19 PM
I love it. Great stuff from Dustin. But I’m trying to use it for 100% width and it works fine, but min-width doesn’t work in IE. What can I do to fix it?
014 // Shana // 08.22.2007 // 8:08 PM
Hi….
YUI Grids allows for 750px, 950px, 100%, customized (set your own) width, and recently added in the latest release, 974px.
It all depends on whether you use the #doc, #doc1, #doc2, #doc3, #doc-custom, or #doc4.
015 // Nick // 09.26.2007 // 10:43 AM
Good call. I just wanted to say something though about this. When you google YUI grids, your article comes up in the top 10. While your point was valid when grids came out, it has since been fixed (added?) and is no longer the case, and 100% fluid grids are very easy to do.
Maybe an update or addendum to your article?
016 // Mike Schinkel // 10.01.2008 // 1:04 AM
Just to be clear, YUI-CSS can do any width you want, AND it is the most kick-ass CSS library around! It is actually a godsend and makes using CSS far less painful that it would otherwise be (for the record, I hate CSS; not the idea of content-layout separation, just the effectively “write-once” architecture.) I YUI-CSS on this Drupal site (theme coded by hand): http://atvillustrated.com. And as I’m more of a PHP/MySQL kind of guy (who really hates CSS, just in case you didn’t remember :-) I don’t think I could have finished the site without it.