Zach’s ugly mug (his face)

Zach Leatherman

Google Using YUI Grids CSS

April 05, 2007

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.

Zach’s ugly mug (his face)

Zach is a builder for the web with Netlify. He’s currently fixated on web fonts and static site generators. His public speaking résumé includes talks in eight different countries at events like Beyond Tellerrand, Smashing Conference, CSSConf, and The White House. He is an emeritus of Filament Group, NEJS CONF, and still helps out with NebraskaJS. Read more about Zach »

Previous
JavaScript Code Coverage Tool for Firebug
Next
Problems with YUI DataTable
9 Replies
    1. Bob Dobbs Disqus

      06 Apr 2007 at 02:52PM
      There also seems to be significant overlap with the YUI CSS and font reset stylesheets. Compare these:http://yui.yahooapis.com/2....http://yui.yahooapis.com/2....... to the first few lines of this:http://www.google.com/ig/f/...
      1. Chris DiBona Disqus

        09 Apr 2007 at 07:03PM
        HeY,i work oN opEN souRCE ComPLIAncE AT gOOGLe ANd wE'RE fIxiNG thE atTribUtion iSSue. THis IS NOt CooL AT aLl but IT WiLl Be FixeD sOon. thanKS.chRiS
        1. Isaac Z. Schlueter Disqus

          10 Apr 2007 at 04:22PM
          Is this really a "redistribution" of the source code?Use of the code is free to all, with or without attribution. If Google decides to distribute code as part of a new package in either binary or source form, and that product uses or extends the YUI lib, then they'll have to include the attribution.AFAIK, that's how the BSD license works. (Of course, me !== IP lawyer.) But of course attribution is friendly, and a definite "good karma" kind of thing in all cases. And it's rather cool that Google is using our open-source tools; the YUI folks should be flattered.I'm a much bigger fan of the WTFPL for public open-source software, myself ;)http://en.wikipedia.org/wik...
          1. 서준원 Disqus

            10 Apr 2007 at 05:17PM
            Hey updong.It was surprised about KR posting in here. hehe
            1. Chris DiBona Disqus

              10 Apr 2007 at 05:50PM
              Technically, it is not distribution to put bsd code on a webpage even though that page is 'downloaded' to a webclient. We don't mind giving credit though.
              1. Zach Leatherman Disqus

                10 Apr 2007 at 06:08PM
                Isaac, it would seem that you are correct.The first sentence of the BSD license is as follows:Redistribution and use of this software in source and binary forms, with or without modification, are permitted provided that the following conditions are met...But then the first condition only applies to redistribution and not to use. What restrictions are placed on use under the BSD license, if any?I hope that my misinterpretation of the license isn't deemed sensationalist, I really just thought it was interesting that YUI code was on the Google homepage. That's why the title of the article is what it is, and not "Google is stealing Yahoo's code" as some have repackaged it.
                1. fornetti Disqus

                  31 Aug 2008 at 05:15AM
                  I do not believe this
                  1. Joseph Okharedia Disqus

                    20 Jan 2010 at 07:07AM
                    I been in love with google's simple but yet elegant UI look. I'm highly surprised that yui is part of their look. Does anyone have any idea if yui javascript has been used for any of their wonderful widgets like drop down menu.
                    1. Zach Leatherman Disqus

                      20 Jan 2010 at 10:26PM
                      Hey Joseph,I'd imagine they're using a combination of their own Closure Library and GWT.
                      Webmentions