Dec

8

YUI CSS Grids and Customization

December 8, 2007 |

One of my favorite part of the YUI library is the CSS foundation. The entire YUI CSS foundation, including the Reset, Fonts, and Grids packages, can be applied almost in any case. Grids package may cause confusion to some people, at first glance, many people think it’s just a set of templates with fixed and standard width, height, etc… and in order to use it, one must follow its ‘holistic Ten Commandments’ to style web pages. While this is definitely a misunderstanding.


Grids CSS, as a matter of fact, sets a very good cross-browser standard, and allows itself to be easily customized. So why many people get so confused by what this powerful tool does? Because of the documentation doesn’t provide a detailed explanation. Now let’s have a better look at the concept behind YUI Grids CSS.

Since we are talking about YUI Grids CSS here, we must first know: what measurement does it use? YUI Grids CSS uses relative measurement em and pixel. In CSS, one “em” is defined to be the value of font-size for a given font. If the font-size of an element is 14 pixels, then for that element, 1em is equal to 14 pixels. Both em and pixel are called Relative Length Units because they are both measured in relation to other things. Opposite to Relative Length Units, there are Absolute Length Units in CSS, examples are Inches, Centimeters etc.

So why developers at Yahoo! have decided to use relative measurement? Many people think since absolute units are absolute, they must be good to be used as standard, which is wrong. Absolute units are really useless in web design, the word ‘absolute’ has nothing to do with ’standard’ at all. The reason we need a standard is because many things about web are relative. Different screen sizes and browser sizes are beyond our control and this simple fact makes us impossible to use absolute units. Given all the issues involved, the best measurements to use are probably the relative measurements, most especially em, and also px when appropriate, and it’s exactly what YUI Grids CSS does.

So when to use em and when to use px, and why? On the face of things, pixels are straightforward. Unfortunately, there is a potential drawback to using pixels. If you set font sizes in pixels, then users of Internet Explorer for Windows previous to IE7 cannot resize the text using the Text Size menu in their browser. This can be a problem if your text is too small for a user to comfortably read. If you use more flexible measurements, such as em, the user can resize text. Pixel becomes useful when you try to set limits, for instance min-width or/and max-width. We can see this practice in action, below is an excerpt from YUI Grids CSS: 

#doc,#doc2,#doc3,#doc4,.yui-t1,.yui-t2,.yui-t3,.yui-t4,.yui-t5,.yui-t6,.yui-t7 {
margin:auto;text-align:left;
width:57.69em;
*width:56.301em;
min-width:750px;}

Now we have a clearer view, we know what measurements YUI Grids CSS uses and we know why it is being used. The next question is how does YUI Grids CSS uses these measurements? In the official documentation, it says Grids rely on the width of an “em” provided by Fonts CSS, therefore, they must be used together. To many CSS beginners, this is not easy to understand, but the idea is really simple. As I said earlier, in CSS, one “em” is defined to be the value of font-size for a given font. If the font-size of an element is 14 pixels, then for that element, 1em is equal to 14 pixels. So for the em measurement to work, there must be a given font and its size, here is where YUI Fonts CSS comes in, font and font size are declared in YUI Fonts CSS. In it, all text renders in the Arial font, at 13 pixel size. Below is the excerpt from YUI Fonts CSS: 

body {
font:13px/1.231 arial,helvetica,clean,sans-serif;
*font-size:small;*font:x-small;}

So in YUI Grids CSS, all the em values are calculated based on 13 pixels, 1em is equal to 13 pixels, you can see it in the CSS file. Below is the excerpt from YUI Grids CSS: 

/* 950 centered */
#doc2 {width:73.074em;
*width:71.313em;}

The number 73.074 is calculated based on the rule we discussed earlier: 950/13=73.074. 73.074 is our width in ems for all non-IE browsers. For IE, as it is explained in the official documentation, take the em width we just calculated and multiply it by .9759 to find the width in ems for IE. 73.074*0.9759=71.313. Okay, now we knows almost every thing we need to know about YUI Grids CSS. The next and the last thing we are going to do is to customize it.

Let’s customize Preset Template 5, what if I want a page that has a width of 780px and a 200px right column? The width for none IE browsers is 780/13=60em, and the width for IE is 60*0.9759=58.554em. The right column width for non IE browsers would be 200/13=15.3846em, and the width for IE is 15.3846*0.9759=15.0138em. Now we have the customized CSS for the page: 

.yui-t-custom,doc-custom {
margin:auto;text-align:left;/* leave unchanged */
width:60em;/* non-IE */
*width:58.554em;/* IE */
min-width:780px;/* optional but recommended */
}

.yui-t-custom #yui-main {
float:left;
margin-right:-25em;
/* IE: preserve layout at narrow widths */
}

.yui-t-custom .yui-b {
float:right;/* leave unchanged */
width:15.3846em;/* non-IE */
*width:15.0138em;/* IE */}

.yui-t-custom #yui-main .yui-b {
margin-right:16.3846em;/* non-IE */
*margin-right:16.0138em;/* IE */}

Below is the url to the demo page, enjoy!
http://www.lab.highub.com/yui/css-custom-grid/



Similar Posts

Comments

Name (required)

Email (required)

Website

Speak your mind

Sponsors




Links