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.


< Newer
Wake up to YouTube on my Internet Alarm Clock
Older >
Logical XOR in JavaScript

Zach Leatherman IndieWeb Avatar for https://zachleat.com/is a builder for the web at IndieWeb Avatar for https://cloudcannon.com/CloudCannon. He is the creator and maintainer of IndieWeb Avatar for https://www.11ty.devEleventy (11ty), an award-winning open source site generator. At one point he became entirely too fixated on web fonts. He has given 79 talks in nine different countries at events like Beyond Tellerrand, Smashing Conference, Jamstack Conf, CSSConf, and The White House. Formerly part of Netlify, Filament Group, NEJS CONF, and NebraskaJS. Learn more about Zach »

9 Comments
  1. Bob Dobbs Disqus

    06 Apr 2007
    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/...
  2. Chris DiBona Disqus

    10 Apr 2007
    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
  3. Isaac Z. Schlueter Disqus

    10 Apr 2007
    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...
  4. 서준원 Disqus

    10 Apr 2007
    Hey updong.It was surprised about KR posting in here. hehe
  5. Chris DiBona Disqus

    10 Apr 2007
    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.
  6. Zach Leatherman Disqus

    10 Apr 2007
    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.
  7. fornetti Disqus

    31 Aug 2008
    I do not believe this
  8. Joseph Okharedia Disqus

    20 Jan 2010
    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.
  9. Zach Leatherman Disqus

    21 Jan 2010
    Hey Joseph,I'd imagine they're using a combination of their own Closure Library and GWT.
Shamelessly plug your related post

These are webmentions via the IndieWeb and webmention.io.

Sharing on social media?

This is what will show up when you share this post on Social Media:

How did you do this? I automated my Open Graph images. (Peer behind the curtain at the test page)