zachleat’s Ugly Mug

Zach Leatherman

Google Using YUI Grids CSS

05 April 2007Read this in about 2 minutes.

Head over to the Google Homepage. Log In using your Google Account. Make sure you’re at your Personalized Homepage. Take a look at the source CSS file ig.css included on the page. There are a few peculiar lines of code that I recognized from another source, the Yahoo User Interface Grids CSS file. Yahoo has provided a set of standard CSS definitions under the BSD license that allow a developer to easily make fluid or fixed width column layouts. And on the Google Personalized Homepage, there are the following class definitions:

#modules .yui-b{position:static;display:block;margin:0 0 1em 0;float:none;width:auto;overflow:hidden;}
.yui-gb .yui-u{float:left;margin-left:2%;*margin-left:1.895%;width:32%;}
.yui-gb div.first{margin-left:0;}
#modules,.yui-gb{zoom:1;}

This code includes identical Class names taken from the Yahoo User Interface library Grids CSS component. Here is the source in the grids.css file from Yahoo (truncated for simplicity).

#yui-main .yui-b{position:static;}
.yui-t7 #yui-main .yui-b {
  display:block;margin:0 0 1em 0;
}
#yui-main .yui-b {float:none;width:auto;}
.yui-gb .yui-u{float:left;margin-left:2%;*margin-left:1.895%;width:32%;}
.yui-gb div.first{margin-left:0;}
#bd,.yui-gb{zoom:1;}

Obviously, it’s the same code, with a few minor differences.

Screenshot proof

The interesting thing to note is that the YUI Grids CSS source code is licensed under a BSD license, which includes the following provisions:

Redistributions of source code must retain the above copyright notice, this list of conditions and the
following disclaimer.

The copyright notice they’re referring to is not included anywhere on the Google Personalized Homepage (and would seem to be a violation of the license). Now this may seem like a small infraction when we’re just talking about 4 lines of CSS code. But really, if they think the code is good enough that they will use it in such a prominent way and not write it from scratch using their own means, they should follow the licensing agreements stipulated.

Update
Google has added the BSD license statement and attribution to Yahoo in their CSS file (ig.css):

/* ===============BEGIN BSD LICENSED PORTION============= */
/*
Copyright (c) 2007, Yahoo! Inc. All rights reserved.
Code licensed under the BSD License:
http://developer.yahoo.net/yui/license.txt
version: 2.2.0
*/

#modules .yui-b {
  position:static;
  display:block;
  margin:0 0 1em 0;
  float:none;
  width:auto;
  overflow:hidden;
}
.yui-gb .yui-u {
  float:left;
  margin-left:2%;
  *margin-left:1.895%;
  width:32%;
}
.yui-gb div.first {
  margin-left:0;
}
#modules,.yui-gb {
  zoom:1;
}
/* ===============END BSD LICENSED PORTION============= */

Sorry to everyone visiting the page for the extra millisecond or two it will take to load these comments.

Say hello on and GitHub.

Let my Feed sit idle in your RSS Reader.

Zach Leatherman is a Professional Front End Engineer. He loves building for the web and has been writing here since 2007.

He enjoys spending time with his beautiful wife Traci and their two Great Danes, Roxie and Ella. They also have a cat, a rabbit, goldfish, and usually one or more tarantulas. Read more »