What is YUI?
The Yahoo User Interface library is comprised mostly of Javascript utilities and controls to help front-end developers create a rich user interface. It also comes with a great CSS framework to make developing websites a lot faster. This CSS framework is what we’ll be focusing on today. It’s lightweight (less than 6KB when minified), easy to use, and most importantly, it works with all major A-grade browsers.
Why use it?
Any good UX designer will tell you that one of the keys to making your website easy to use is consistency. Your goal should be to not make users use more than the necessary brain power it takes to understand the point you’re trying to get across. People are used to seeing sites designed in certain ways and the YUI CSS Framework covers these basic design patterns without having to make you think too hard as well. Everybody wins.
This doesn’t mean that Yahoo is trying to make everyone design the way they say, however. They leave plenty of room for customization for the “wild at heart” amongst us that want to dish out the newest interesting custom design pattern. More on this in a bit.
Getting Started.
The first step is to get the YUI CSS Framework. I gave you the direct link for it here, but I would also recommend taking a look at the YUI Developer Site. If you head to that page, on the left menu there’s a navigation header labeled “YUI Components”. Most of those are the YUI JS utilities but if you scroll down, you’ll see that the last four sub links are for CSS. There’s a lot of great information there for you to check out including a 42 minute video that explains probably more than you’ll want to know about how the CSS Framework works (well maybe not more).
You may have noticed when you clicked the link that the name of the file is “reset-fonts-grids.css”. This is actually a combination of the three main components that make this all work all combined into one minified CSS file for your convenience. If you find yourself asking whether or not you can download them separately, the answer is yes…however they are a bit dependent upon each other, so use caution. If you’re using another reset file such as the famous Eric Meyer’s Reset CSS, you can (most likely) safely use that instead of Yahoo’s version, but why try and fix what isn’t broken? Now when it comes to the other two components, fonts and grids, grids relies on the fonts css to declare the proper width for an “em”, which grids uses for just about everything.
Reset
If you’re not already using a reset css file, I definitely recommend you seriously look into using one – even if you don’t want to use YUI. Each browser has it own set of defaults when it comes to margins, line-heights, padding, etc. that can make life tough when trying to code out your layout. What reset does is simple, yet extremely useful. It takes away all of the browser defaults and sets them to all use the same stuff. The days of using “*{margin: 0; padding: 0;}” are over. It’s time to get with the program.
Fonts
As described above, the fonts portion defines the width of the “em” for which everything is based on. It also, however, takes away all of the browser font defaults and sets every relevant html tag to use a font size of 13px, a line-height of 16px, and all but the pre and code tags to use the Arial font (pre and code use the monospace font family). What does this mean for you? It means you’re going to need to define the font sizes and/or families you’re going to want on your website yourself. Don’t look at that as a bad thing though, you’re most likely doing this already (or you should be). This, like reset, takes away the differences in the default styling of the browsers for a consistent look and feel. Yahoo provides a recommended way to define your font sizes using the percentages defined on their fonts page.
Grids
Now this is where things start to get fun. YUI makes it very easy to layout everything on your site without having to use those cumbersome tables. Let’s take a look.
Setting up the page.
YUI breaks up a page in a very familiar way to most designers. You’ve got your wrapper div, which also determines the width of your site. And within that you’ve got your header, body and footer. Pretty easy right? Here’s how it looks.
<!DOCTYPE html> <html> <head> <title>My first YUI Layout</title> <link rel="stylesheet" type="text/css" href="css/reset-fonts-grids.css" /> </head> <body> <div id="doc2"><!--Wrapper div -> doc, doc2, doc3, doc4, or doc-custom--> <!--These three are not required to use if you prefer something else, but they're pre-defined for you--> <div id="hd"></div> <div id="bd"></div> <div id="ft"></div> </div> </body> </html>
We’ll start by focusing on the wrapper div. YUI offers you four different standard widths:
doc – 750px
doc2 – 950px
doc3 – Fluid
doc4 – 974px
And for all you “rebels” out there, you can create a custom width in your own stylesheet using the doc-custom wrapper. It’s a good thing to keep these widths in mind when designing your site. It will make your life much easier. The rest of the document is pretty self-explanatory.
Templates.
Now that we’ve got the basic layout of the page, we’re going to add content using yahoo’s predefined template classes. The concept behind the templates is extremely easy. You’ve got two main blocks of content that you want to position within your body (bd). You’re going to put all of your content within one of these two blocks. You define a block simply by giving the div a class of “yui-b”. Once you’ve done that, you need to tell YUI which block is the main block for content (i.e. the wider block) by wrapping it in a div with an id of “yui-main”. The reason you need to do this is some browsers don’t support the pseudo class of “:first-child”. And by some, of course, I mean IE.
... <div id="bd"> <div id="yui-main"> <div class="yui-b"> ...some content here... </div> </div> <div class="yui-b"> ...some content here... </div> </div> ...
This tells YUI which block of content is the main focus of the site. Regardless of whether the main content block is to the left or to the right of the sidebar, you can always put it above the less important code (the sidebar). This way you can keep your best content at the top of the source (helps with SEO).
Now that we have defined the blocks of content, we need to tell YUI where to display it. That’s as simple as adding a template class to the wrapper div (the doc). Yahoo has provided six different pre-defined layouts for use:
.yui-t1 – Two columns, narrow on left, 160px
.yui-t2 – Two columns, narrow on left, 180px
.yui-t3 – Two columns, narrow on left, 300px
.yui-t4 – Two columns, narrow on right, 180px
.yui-t5 – Two columns, narrow on right, 240px
.yui-t6 – Two columns, narrow on right, 300px
Yahoo has chosen these layouts as one of the most common things found in sidebars are ads and most ad networks have a consistent set of sizes for the ads they serve. Wouldn’t you know it? Most of the them match up to the template sizes YUI provides.
Let’s continue by adding the template class of “yui-t6″ to our document wrapper as it’s a fairly common layout.
<div id="doc2" class="yui-t6">
Now add some dummy text in there and look for yourself. Voila! You have a layout.
Special Grids.
Now what if you don’t want to use any of the pre-made templates? Say your design calls for 3 columns instead of two. Or maybe you want to add something with the template you created that needs to be broken up into sections? Not a problem. YUI has a grid layout system that pretty much covers any custom block layout you want without the need to use tables.
The Grid system works very similar to the templates shown above. You have your outer div (the grid), and your inner divs (called units) which work very much the same as blocks (remember .yui-b?). Let’s take a look at how to set one up.
<div class="yui-g"> <div class="yui-u first"> ...some content here... </div> <div class="yui-u"> ...some content here... </div> </div>
This will create a grid with two equal width blocks that will fill whatever container they are inside. The only real thing to take note of here is that whichever div you want to appear first (on the left), make sure to give that div a class of “first” along with the unit class.
Similar to templates, there are six different types of grids you can use:
.yui-g – Standard grid, 1/2 – 1/2
.yui-gb – Special grid, 1/3 – 1/3 – 1/3
.yui-gc – Special grid, 2/3 – 1/3
.yui-gd – Special grid, 1/3 – 2/3
.yui-ge – Special grid, 3/4 – 1/4
.yui-gf – Special grid, 1/4 – 3/4
Now the thing that makes this great is that you can also nest grids as much as you’d like. Want a grid that displays in quarters as opposed to halfs? Let’s check out how to do that.
<div class="yui-g"> <div class="yui-g first"> <div class="yui-u first"> ...some content here... </div> <div class="yui-u"> ...some content here... </div> </div> <div class="yui-g"> <div class="yui-u first"> ...some content here... </div> <div class="yui-u"> ...some content here... </div> </div> </div>
The thing to keep in mind here is that when you nest a grid within another grid, that grid also acts as a unit for it’s parent grid. There’s no need to nest it within a div with a unit class attached to it.
Conclusion
This framework really helps with cutting down on development time and making sure that the more important content is displayed before the rest within the source (great for SEO). If you keep this in mind the next time you design a website, you’ll notice a huge gain on time and quite possibly a relief of the stress of making your website look the way you want without hacking away at it.
Once again I’d like to stress taking a look at Yahoo’s site for YUI CSS, as it’s got great references on how to use this including videos, examples and a nice little cheat sheet so you don’t have to remember everything off the top of your head.
Download and Demo
Great post. Thanks for your tips.
I was wondering why YUI3 which was recently released doesn’t have grids.css?
This is interesting. I’m going to check this out!
Thanks!
http://developer.yahoo.com/yui/3/cssgrids/
It looks as if YUI 2’s version of the grids is being deprecated in YUI3. From what I read there seems to be plans for a future release of YUI3 that includes a new version of the grid system. I guess we’ll have to wait and find out!
Brief tutorial, but to the point to make it easy to understand what the framework brings in for web designers and developers.
Although, if reducing development time is not the ultimate goal, I would refrain from using CSS frameworks and rather use JavaScript and PHP frameworks if complexity of the application justifies it. Simply using frameworks for anything just puts additional load that end users have to pay.
@Sasa – Thanks for the comment, however I’m going to have to disagree with your statement about refraining from using CSS frameworks, at least in the manner in which you mentioned. PHP and Javascript frameworks are great, I use them myself, but they accomplish very different things than a CSS framework would. They all compliment each other quite well when used properly. Just as you would use a PHP framework for application development, you would use a CSS framework for displaying things the way you want – including the application you made in PHP.
God dammit. I just wrote a comment a ~800 words long and it was lost when I clicked on a link to the demo site above. It would be helpful if an alert were posted saying that if you click on any of the links on the page your comment would be lost – or something to that effect. I guess you live and you learn, unfortunately. Copy and paste in from now on!
I’m not going to go into as much detail as I did in the first instance; here goes.
When I first saw the title of this, I thought what a waste of time – I don’t like it. After reading this, my mind hasn’t changed, far from it.
I can’t see any real benefits in this. CSS, unlike PHP, Javascript, etc. is relatively easy. Most of my CSS classes and ID’s are less than 8 lines long; this is tiny compared to some PHP and Java Script classes/functions. Some PHP classes can range from 1 to 100 lines alone.
Comparing the time taken to create those classes/ID’s in my CSS file than using this framework isn’t thinkable, I reckon I’d be quicker to create classes/ID’s myself. This is much different when talking about creating PHP classes, etc., where they are many, many more lines longer. I’ve seen myself taking 1 day plus creating PHP classes; but never more than 5 minutes in CSS ID’s/classes – unless I’m encountering problems – but even then, its usually my fault for typing too fast, and not accurate enough!
For example, for me to create the demo website that you created, I reckon it would take me about 20 minutes, if that. On the other hand, using this Framework, I reckon it would take me much longer. Firstly I need to find out what ID’s/classes do what, by reading up on them, then I’d need to modify these to what I want, and finally implement these. Thus, giving me three steps, instead of my usual two: Create the ID/class and implement.
Also, the framework CSS file is terrible. There is no text wrapping whatsoever, very off-putting. Combining that there are no comments in it to be seen, it loses even more of my interest.
Frameworks like jQuery, etc are useful for beginners, who don’t know Java Script because they don’t need to know very much, just to follow instructions on how to implement and install. This framework, unlike jQuery, (in my opinion) will require the user to have CSS knowledge to edit it, thus partially defeating the purpose in it.
Also, what you said in the comment above doesn’t stand up. I always thought the aim of programming Frameworks were to reduce the development time? I’m afraid, this doesn’t achieve this!
Deal me out!
@Marc – well you are definitely entitled to your own opinion, and no one is saying that you need to use this. I do need to point out a few things about what you said, however. It was a long comment, so I’ll just go along chronologically.
First thing: taking 20 minutes to create something like is layed out in the demo is nice, but it took me about 5. Not to mention if want to completely change the layout it would only take me a matter of seconds – literally. And I relate to your comment about making mistakes because you type to fast – I do it a lot myself. Using something like this can help minimize that as well.
As far as implementation goes, this framework isn’t extremely complicated and doesn’t take much reading up on to use. The first time I used this it took me about 20 minutes to figure out how everything worked together and was up and using it in no time. Not exactly like reading a book.
As far as the CSS file being terrible, I don’t understand what your issue is? The css file comes minimized for optimization just as jQuery does. When a file is minimized, all of the unnecessary white space and comments are taken out. And if you would have gone to the links I provided in the tutorial, you may have seen that there is documentation on everything. Furthermore, there normally shouldn’t be a need to edit the file itself but rather over write the classes you would need in your own stylesheet. CSS is cascading so whatever comes last has priority.
As far as the reference to the comment I had made, what are you talking about? The only person (until your comment) that had mentioned something about improved development time in the comments was Sasa. But as I pointed out a few paragraphs above, cutting down on development time is one of the perks of using something like this.
And lastly, if you really think something is a waste of time to read, don’t read it – much less spend a good 20 minutes writing a huge comment about how it was a waste of time as if the spending the time writing the comment somehow gains it back…
Don’t take this too personally…
If if takes you 5 minutes to make such a layout, great – I could probably do it in that time-frame too. However, I learned my lessons before and nowadays I don’t rush – in the long run, it takes you longer!
In paragraph 4, you said “css file comes minimized for optimization”, don’t get me wrong, optimization is good, however it would be good if they would offer an un-optimized version to download. Maybe they do, but I cant see it – I don’t particularly like their site either.
I quote from paragraph 4: “shouldn’t be a need to edit the file itself but rather over write the classes you would need in your own stylesheet”, reading this makes me think even more greatly whats the point in this – taking even more of my time!
In the article you mentioned cutting down on development time twice, in the conclusion. Your above comment saying that you’ve proved that it saves time doesn’t stand up! Generally to say that something fundamentally saves time, you have to prove it. For me at least, it won’t – for reasons I’ve stressed in this comment and my previous one.
On your final point, why shouldn’t I read it? Normally when I open articles up thinking “what a waste of time”, when I’ve finished reading my mind has changed. I’m a bit pre-judgmental on most things. Also, I don’t believe that writing a ‘huge’ comment gains it back, fundamentally it doesn’t – where did you get this idea from?
Again on the point of you thinking I shouldn’t write a ‘huge’ comment, well then whats the point in calling it a comments section if you can’t do exactly that – comment? You’d be as well re-naming it: “Comments (only if you agree)”.
Marc,
I consider myself pretty decent at CSS…but if I were to try and create that layout with YUI CSS then I would take longer than 20 minutes, because I don’t know it!
Whenever you learn something new it takes time but if you ask me the CSS file Mike ends up with after the tutorial is really cool, and I can see a lot of benefits to YUI. But each to their own.
I’m trying to learn CodeIgniter, and my development has been much slower, but next time it will be a bit faster, and faster, and faster. I can imagine the same applies to any framework.
And Mike never said you should not comment if you don’t agree.
Jack, indirectly he did: “much less spend a good 20 minutes writing a huge comment about how it was a waste of time”. Did I say it was a waste of time reading the article? No.
Did I say it would be a waste of time for me to use the product? Yes.
The whole of Mike’s last paragraph is totally unfounded.
Mike, Mark, Jack — I appreciate all of your agreements and disagreements. As a relative newbie to the Web World I look to those that have come before me and with differing opinions to give me thought until I know enough to be able to say on my own “this is my take on it”. I think the ole “Agree to disagree” statement applies but for the sake of those who enjoy both sides, within reason of being respectful, continue to “Agree to disagree” please I beg you.
I do love the YUI Grids but my biggest issue that prevents me from wanting to use them again is that the CSS doesn’t validate due to the conditional hacks used for IE.
Do you know of anybody that has seperated the conditional IE statements from the actual YUI reset-fonts-grid.css so the IE fixes can be moved to a conditional statement and the CSS would (hopefully) validate?
Sam is right. And so are you, Marc. Reading back on my last paragraph, it was a lot more snappy than I originally intended – so I do apologize for that, but I never said you shouldn’t make a comment because you don’t agree – I’m very much against that. Like Sam said, we should agree to disagree and put our reasons up so other people can get something out of it.
Back to the relevant part of the conversation.
@Marc – you say I don’t have anything to stand on as far making development time faster and that I need proof. What kind of proof are you looking for? I’m guessing me stating my development time on it isn’t enough. So what would you consider to be proof enough?
Referring to the part about overwriting classes. Try to think about in an object oriented point of view: You have a class you’ve written in PHP. It does most of what you need in a general way, but if you want something more specific, you’ll need to extend that class. The extended class will then be the one you use to perform that specific task that wasn’t appropriate to put into the parent class. The same concept applies here. The framework covers most of what you’ll need when it comes to laying out your site, but if you have something specific you want to do that will require some overwriting of the provided classes or perhaps writing come classes of you’re own, by all means do so! Does that make more sense?
@Lars – No unfortunately I don’t. I believe YUI uses both the _underscore hack and the “asterisk” hack. If you really wanted to have them in a conditional IE include, you’d have to do a search to find all of the _’s and *’s and put them in a file yourself. I wouldn’t necessarily recommend it however, might be more trouble than it’s worth. I understand wanting to get your CSS to validate, but IMHO CSS validation isn’t nearly as important as actually getting it to display correctly (at least not nearly as important as html validation). But like I said I understand wanting to have clean code.
Mike:
After reading my second post again, a few hours after I posted it, I tried to edit it to take that part out but the system didn’t let me.
Regarding Sam’s point on agreeing to disagreeing, my first post was in no way a ‘dig’ at Mike – his article is pretty good. Instead, it was aimed at the actual framework.
I’m a strong believer in “attacking the point, and not the person”, however if my post came across like I was attacking Mike – I never meant it, and I apologise.
@Marc – which part was that? The development time?
@Mike – indeed.
I’ve been using YUI Grids for a while now and think that your tutorial was great, especially for someone starting out.
Thanks Robert!