<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Web 3.0, 6 Bladed Razors, 7 Minute Abs &#187; Google</title>
	<atom:link href="http://www.zachleat.com/web/tag/google/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.zachleat.com/web</link>
	<description></description>
	<lastBuildDate>Mon, 06 Feb 2012 17:09:08 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	
		<item>
		<title>Google Using YUI Grids CSS</title>
		<link>http://www.zachleat.com/web/google-using-yui-grids-css/</link>
		<comments>http://www.zachleat.com/web/google-using-yui-grids-css/#comments</comments>
		<pubDate>Thu, 05 Apr 2007 16:33:22 +0000</pubDate>
		<dc:creator>Zach Leatherman</dc:creator>
				<category><![CDATA[CSS]]></category>
		<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[Reviews]]></category>
		<category><![CDATA[CSS Grids]]></category>
		<category><![CDATA[Google]]></category>
		<category><![CDATA[Licensing]]></category>
		<category><![CDATA[YUI]]></category>

		<guid isPermaLink="false">http://www.zachleat.com/web/2007/04/05/google-using-yui-grids-css/</guid>
		<description><![CDATA[Head over to the Google Homepage. Log In using your Google Account. Make sure you&#8217;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 [...]]]></description>
			<content:encoded><![CDATA[<p>Head over to the <a href="http://www.google.com/ig?hl=en">Google Homepage</a>.  Log In using your Google Account.  Make sure you&#8217;re at your <a href="http://www.google.com/ig?hl=en">Personalized Homepage</a>.  Take a look at the source CSS file <a href="http://www.google.com/ig/f/tB22vfBbv0g/ig.css">ig.css</a> 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:</p>

<div class="wp_syntax"><div class="code"><pre class="css" style="font-family:monospace;"><span style="color: #cc00cc;">#modules</span> <span style="color: #6666ff;">.yui-b</span><span style="color: #00AA00;">&#123;</span><span style="color: #000000; font-weight: bold;">position</span><span style="color: #00AA00;">:</span><span style="color: #993333;">static</span><span style="color: #00AA00;">;</span>display<span style="color: #00AA00;">:</span><span style="color: #993333;">block</span><span style="color: #00AA00;">;</span>margin<span style="color: #00AA00;">:</span><span style="color: #cc66cc;">0</span> <span style="color: #cc66cc;">0</span> <span style="color: #933;">1em</span> <span style="color: #cc66cc;">0</span><span style="color: #00AA00;">;</span>float<span style="color: #00AA00;">:</span><span style="color: #993333;">none</span><span style="color: #00AA00;">;</span>width<span style="color: #00AA00;">:</span><span style="color: #993333;">auto</span><span style="color: #00AA00;">;</span>overflow<span style="color: #00AA00;">:</span><span style="color: #993333;">hidden</span><span style="color: #00AA00;">;</span><span style="color: #00AA00;">&#125;</span>
<span style="color: #6666ff;">.yui-gb</span> <span style="color: #6666ff;">.yui-u</span><span style="color: #00AA00;">&#123;</span><span style="color: #000000; font-weight: bold;">float</span><span style="color: #00AA00;">:</span><span style="color: #000000; font-weight: bold;">left</span><span style="color: #00AA00;">;</span>margin-<span style="color: #000000; font-weight: bold;">left</span><span style="color: #00AA00;">:</span><span style="color: #933;">2%</span><span style="color: #00AA00;">;*</span><span style="color: #000000; font-weight: bold;">margin-left</span><span style="color: #00AA00;">:</span><span style="color: #933;">1.895%</span><span style="color: #00AA00;">;</span>width<span style="color: #00AA00;">:</span><span style="color: #933;">32%</span><span style="color: #00AA00;">;</span><span style="color: #00AA00;">&#125;</span>
<span style="color: #6666ff;">.yui-gb</span> div<span style="color: #6666ff;">.first</span><span style="color: #00AA00;">&#123;</span><span style="color: #000000; font-weight: bold;">margin-left</span><span style="color: #00AA00;">:</span><span style="color: #cc66cc;">0</span><span style="color: #00AA00;">;</span><span style="color: #00AA00;">&#125;</span>
<span style="color: #cc00cc;">#modules</span><span style="color: #00AA00;">,</span><span style="color: #6666ff;">.yui-gb</span><span style="color: #00AA00;">&#123;</span>zoom<span style="color: #00AA00;">:</span><span style="color: #cc66cc;">1</span><span style="color: #00AA00;">;</span><span style="color: #00AA00;">&#125;</span></pre></div></div>

<p>This code includes identical Class names taken from the <a href="http://developer.yahoo.com/yui/grids/">Yahoo User Interface library Grids CSS</a> component.  Here is the source in the <a href="http://yui.yahooapis.com/2.2.0/build/grids/grids-min.css">grids.css</a> file from Yahoo (truncated for simplicity).</p>

<div class="wp_syntax"><div class="code"><pre class="css" style="font-family:monospace;"><span style="color: #cc00cc;">#yui-main</span> <span style="color: #6666ff;">.yui-b</span><span style="color: #00AA00;">&#123;</span><span style="color: #000000; font-weight: bold;">position</span><span style="color: #00AA00;">:</span><span style="color: #993333;">static</span><span style="color: #00AA00;">;</span><span style="color: #00AA00;">&#125;</span>
<span style="color: #6666ff;">.yui-t7</span> <span style="color: #cc00cc;">#yui-main</span> <span style="color: #6666ff;">.yui-b</span> <span style="color: #00AA00;">&#123;</span>
	<span style="color: #000000; font-weight: bold;">display</span><span style="color: #00AA00;">:</span><span style="color: #993333;">block</span><span style="color: #00AA00;">;</span>margin<span style="color: #00AA00;">:</span><span style="color: #cc66cc;">0</span> <span style="color: #cc66cc;">0</span> <span style="color: #933;">1em</span> <span style="color: #cc66cc;">0</span><span style="color: #00AA00;">;</span>
<span style="color: #00AA00;">&#125;</span>
<span style="color: #cc00cc;">#yui-main</span> <span style="color: #6666ff;">.yui-b</span> <span style="color: #00AA00;">&#123;</span><span style="color: #000000; font-weight: bold;">float</span><span style="color: #00AA00;">:</span><span style="color: #993333;">none</span><span style="color: #00AA00;">;</span>width<span style="color: #00AA00;">:</span><span style="color: #993333;">auto</span><span style="color: #00AA00;">;</span><span style="color: #00AA00;">&#125;</span>
<span style="color: #6666ff;">.yui-gb</span> <span style="color: #6666ff;">.yui-u</span><span style="color: #00AA00;">&#123;</span><span style="color: #000000; font-weight: bold;">float</span><span style="color: #00AA00;">:</span><span style="color: #000000; font-weight: bold;">left</span><span style="color: #00AA00;">;</span>margin-<span style="color: #000000; font-weight: bold;">left</span><span style="color: #00AA00;">:</span><span style="color: #933;">2%</span><span style="color: #00AA00;">;*</span><span style="color: #000000; font-weight: bold;">margin-left</span><span style="color: #00AA00;">:</span><span style="color: #933;">1.895%</span><span style="color: #00AA00;">;</span>width<span style="color: #00AA00;">:</span><span style="color: #933;">32%</span><span style="color: #00AA00;">;</span><span style="color: #00AA00;">&#125;</span>
<span style="color: #6666ff;">.yui-gb</span> div<span style="color: #6666ff;">.first</span><span style="color: #00AA00;">&#123;</span><span style="color: #000000; font-weight: bold;">margin-left</span><span style="color: #00AA00;">:</span><span style="color: #cc66cc;">0</span><span style="color: #00AA00;">;</span><span style="color: #00AA00;">&#125;</span>
<span style="color: #cc00cc;">#bd</span><span style="color: #00AA00;">,</span><span style="color: #6666ff;">.yui-gb</span><span style="color: #00AA00;">&#123;</span>zoom<span style="color: #00AA00;">:</span><span style="color: #cc66cc;">1</span><span style="color: #00AA00;">;</span><span style="color: #00AA00;">&#125;</span></pre></div></div>

<p>Obviously, it&#8217;s the same code, with a few minor differences.</p>
<p><img src='http://www.zachleat.com/web/wp-content/uploads/2007/04/yuigrids-google1.jpg' alt='Screenshot proof' /></p>
<p>The interesting thing to note is that the YUI Grids CSS source code is licensed under a <a href="http://developer.yahoo.com/yui/license.html">BSD license</a>, which includes the following provisions:</p>
<blockquote><p>Redistributions of source code must retain the above copyright notice, this list of conditions and the<br />
following disclaimer.</p></blockquote>
<p>The copyright notice they&#8217;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&#8217;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.</p>
<p><strong>Update</strong><br />
Google has added the BSD license statement and attribution to Yahoo in their CSS file (<a href="http://www.google.com/ig/f/tB22vfBbv0g/ig.css">ig.css</a>):</p>

<div class="wp_syntax"><div class="code"><pre class="css" style="font-family:monospace;"><span style="color: #808080; font-style: italic;">/* ===============BEGIN BSD LICENSED PORTION============= */</span>
<span style="color: #808080; font-style: italic;">/*
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
*/</span>
&nbsp;
<span style="color: #cc00cc;">#modules</span> <span style="color: #6666ff;">.yui-b</span> <span style="color: #00AA00;">&#123;</span>
  <span style="color: #000000; font-weight: bold;">position</span><span style="color: #00AA00;">:</span><span style="color: #993333;">static</span><span style="color: #00AA00;">;</span>
  <span style="color: #000000; font-weight: bold;">display</span><span style="color: #00AA00;">:</span><span style="color: #993333;">block</span><span style="color: #00AA00;">;</span>
  <span style="color: #000000; font-weight: bold;">margin</span><span style="color: #00AA00;">:</span><span style="color: #cc66cc;">0</span> <span style="color: #cc66cc;">0</span> <span style="color: #933;">1em</span> <span style="color: #cc66cc;">0</span><span style="color: #00AA00;">;</span>
  <span style="color: #000000; font-weight: bold;">float</span><span style="color: #00AA00;">:</span><span style="color: #993333;">none</span><span style="color: #00AA00;">;</span>
  <span style="color: #000000; font-weight: bold;">width</span><span style="color: #00AA00;">:</span><span style="color: #993333;">auto</span><span style="color: #00AA00;">;</span>
  <span style="color: #000000; font-weight: bold;">overflow</span><span style="color: #00AA00;">:</span><span style="color: #993333;">hidden</span><span style="color: #00AA00;">;</span>
<span style="color: #00AA00;">&#125;</span>
<span style="color: #6666ff;">.yui-gb</span> <span style="color: #6666ff;">.yui-u</span> <span style="color: #00AA00;">&#123;</span>
  <span style="color: #000000; font-weight: bold;">float</span><span style="color: #00AA00;">:</span><span style="color: #000000; font-weight: bold;">left</span><span style="color: #00AA00;">;</span>
  <span style="color: #000000; font-weight: bold;">margin-left</span><span style="color: #00AA00;">:</span><span style="color: #933;">2%</span><span style="color: #00AA00;">;</span>
  <span style="color: #00AA00;">*</span><span style="color: #000000; font-weight: bold;">margin-left</span><span style="color: #00AA00;">:</span><span style="color: #933;">1.895%</span><span style="color: #00AA00;">;</span>
  <span style="color: #000000; font-weight: bold;">width</span><span style="color: #00AA00;">:</span><span style="color: #933;">32%</span><span style="color: #00AA00;">;</span>
<span style="color: #00AA00;">&#125;</span>
<span style="color: #6666ff;">.yui-gb</span> div<span style="color: #6666ff;">.first</span> <span style="color: #00AA00;">&#123;</span>
  <span style="color: #000000; font-weight: bold;">margin-left</span><span style="color: #00AA00;">:</span><span style="color: #cc66cc;">0</span><span style="color: #00AA00;">;</span>
<span style="color: #00AA00;">&#125;</span>
<span style="color: #cc00cc;">#modules</span><span style="color: #00AA00;">,</span><span style="color: #6666ff;">.yui-gb</span> <span style="color: #00AA00;">&#123;</span>
  zoom<span style="color: #00AA00;">:</span><span style="color: #cc66cc;">1</span><span style="color: #00AA00;">;</span>
<span style="color: #00AA00;">&#125;</span>
<span style="color: #808080; font-style: italic;">/* ===============END BSD LICENSED PORTION============= */</span></pre></div></div>

<p>Sorry to everyone visiting the page for the extra millisecond or two it will take to load these comments.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.zachleat.com/web/google-using-yui-grids-css/feed/</wfw:commentRss>
		<slash:comments>15</slash:comments>
		</item>
	</channel>
</rss>

