Merge branch 'grids' of https://github.com/tilomitra/yui3 into grids

src/cssgrids/build.json

@@ -16,6 +16,13 @@
             "cssfiles": [
                 "cssgrids-base.css"
             ]
+        },
+        "cssgrids-responsive": {
+            "cssfiles": [
+                "cssgrids-base.css",
+                "cssgrids-units.css",
+                "cssgrids-responsive-base.css"
+            ]
         }
     }
 }

src/cssgrids/css/cssgrids-responsive-base.css

@@ -0,0 +1,44 @@
+.yui3-g-r {
+    letter-spacing: -0.31em;
+    *letter-spacing: normal;
+    word-spacing: -0.43em;
+}
+.yui3-g-r img {
+    max-width: 100%;
+}
+
+@media (min-width:980px) { 
+    .yui3-visible-phone {
+        display: none;
+    }
+    .yui3-visible-tablet {
+        display: none;
+    }
+    .yui3-hidden-desktop {
+        display: none;
+    }
+}
+@media (max-width:480px) { 
+    .yui3-g-r > [class ^= "yui3-u"] {
+        width: 100%;
+    }
+}
+@media (max-width:767px) { 
+    .yui3-g-r > [class ^= "yui3-u"] {
+        width: 100%;
+    }
+    .yui3-hidden-phone {
+        display: none;
+    }
+    .yui3-visible-desktop {
+        display: none;
+    }
+}
+@media (min-width:768px) and (max-width:979px) { 
+    .yui3-hidden-tablet {
+        display: none;
+    }
+    .yui3-visible-desktop {
+        display: none;
+    }
+}

src/cssgrids/docs/assets/cssgrids-magazine-tests.js

@@ -0,0 +1,16 @@
+YUI.add('cssgrids-magazine-tests', function(Y) {
+
+    var suite = new Y.Test.Suite('cssgrids-magazine example test suite'),
+        Assert = Y.Assert;
+
+    suite.add(new Y.Test.Case({
+        name: 'Responsive tests',
+        'images have max-widths defined': function() {
+            var headlineImg = Y.one('.left-bar .article img');
+            Assert.isNotUndefined(headlineImg.getComputedStyle('maxWidth'), 'maxWidth undefined on images');
+        }
+    }));
+
+    Y.Test.Runner.add(suite);
+
+}, '', { requires: [ 'node', 'node-event-simulate' ] });

src/cssgrids/docs/component.json

@@ -50,6 +50,17 @@
             "modules"    : ["cssgrids"],
             "tags"       : ["cssgrids"],
 
+            "hideTableOfContents": true
+        },
+
+        {
+            "newWindow"  : "true",
+            "name"       : "cssgrids-magazine",
+            "displayName": "Responsive Newspaper Layout",
+            "description": "A responsive layout that looks like a newspaper",
+            "modules"    : ["cssgrids"],
+            "tags"       : ["cssgrids"],
+
             "hideTableOfContents": true
         }
 
@@ -78,6 +89,11 @@
             "name"       : "cssgrids-align",
             "displayName": "CSS Grids Alignment Example",
             "layout"     : "cssgrids-align-example"
+        },
+        "cssgrids-magazine-example": {
+            "name"       : "cssgrids-magazine",
+            "displayName": "CSS Grids Responsive Magazine Example",
+            "layout"     : "cssgrids-magazine-example"
         }
     }
 }

src/cssgrids/docs/cssgrids-magazine-example.mustache

@@ -0,0 +1,2 @@
+{{>cssgrids-magazine-source}}
+{{>test-runner}}

src/cssgrids/docs/cssgrids-magazine.mustache

@@ -0,0 +1,10 @@
+<div class="intro">
+	<p>The HTML for this example uses YUI3 Responsive Grids syntax to look great on different screen sizes (resize this page or view it on a smartphone). On larger screens, there are three columns. However, if viewed on a screen that is smaller than 767px, the columns stack vertically. The right-most column, which shows a stack of content on larger widths, changes to show a grid on smaller widths.</p>
+</div>
+
+<div class="example newwindow">
+    <a href="cssgrids-magazine-example.html" target="_blank" class="button">
+        View Example in New Window
+    </a>
+</div>
+

src/cssgrids/docs/index.mustache

@@ -14,8 +14,13 @@
 ```
 <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/{{yuiVersion}}/build/cssgrids/grids-min.css">
 ```
+                        <p>If you want responsive behavior, pull down <a href="#responsive">Responsive Grids</a> instead.</p>
 
-						<h2 id="using">Using YUI CSS Grids</h2>
+
+
+
+
+                        <h2 id="using">Using YUI CSS Grids</h2>
 
                         <h3>Unit Sizes</h3>
                         <p>All of the sizing for YUI Grids is done using "units".  Units can be subdivided up to 1/24 of the available width.  The following table gives the various unit classes that can be applied.</p>
@@ -214,3 +219,123 @@ body {
     </div>
 </body>
 ```
+
+```
+<head>
+    <style>
+    body {
+        margin: auto; /* center in viewport */
+        width: 960px;
+    }
+
+    #nav {
+        width: 200px;
+    }
+
+    #main {
+        width: 760px;
+    }
+
+    </style>
+</head>
+
+<body>
+    <div class="yui3-g">
+        <div class="yui3-u" id="nav">
+
+        </div>
+        <div class="yui3-u" id="main">
+
+        </div>
+    </div>
+</body>
+```
+
+
+        <h2 id="responsive">Responsive Grids</h2>
+
+        <p>To pull down Responsive Grids, include this link element on your page:</p>
+```
+<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/{{yuiVersion}}/build/cssgrids-responsive/cssgrids-responsive-min.css">
+```
+
+        <p>YUI Responsive Grids builds on top of the existing YUI Grids implementation. It adds a single new class name called `.yui3-g-r`. You can use this instead of using `.yui3-g` as you normally do. All elements with a class name of `.yui3-u-*-*` will automatically become responsive if they are direct descendents of a `.yui3-g-r`. Images will shrink to fit the viewport, and units will collapse to 100% width when the viewport is 767px or below.</p>
+
+        <p>For example, consider the two HTML snippets below. The first gist shows how regular YUI grids are written. These grids are unresponsive. They’ll always be one-thirds irrespective of the width of the screen. The second gist replaces the `yui3-g` with `yui3-g-r`, thereby making the one-third columns collapse to full width on lower screen widths.</p>
+
+```
+<div class='yui3-g'>
+   <div class="yui3-u-1-3">...</div>
+   <div class="yui3-u-1-3">...</div>
+   <div class="yui3-u-1-3">...</div>
+</div>
+
+```
+
+```
+<div class='yui3-g-r'>
+   <div class="yui3-u-1-3">...</div>
+   <div class="yui3-u-1-3">...</div>
+   <div class="yui3-u-1-3">...</div>
+</div>
+```
+
+        <p>If you want some HTML elements to remain in a grid even on smaller screens, wrap them in the standard `.yui3-g`</p>
+
+
+        <h3>Media Queries</h3>
+
+        <p>Responsive Grids listens to the following media queries. All `yui3-u-*` elements inside a `yui3-g-r` become 100% width at 767px or below.</p>
+
+        <table>
+            <thead>
+                <tr>
+                    <th>Type of Display</th>
+                    <th>Media Query Widths</th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr>
+                    <td>Default Displays</td>
+                    <td>980px and up</td>
+                </tr>
+                <tr>
+                    <td>Large Tablets</td>
+                    <td>768px to 979px</td>
+                </tr>
+                <tr>
+                    <td>Smaller Tablets and Large Phones</td>
+                    <td>767px and below</td>
+                </tr>
+                <tr>
+                    <td>Phones</td>
+                    <td>480px and below</td>
+                </tr>
+            </tbody>
+        </table>
+
+        <p>Responsive Grids also comes with the following helper classes to show or hide content at different screen widths. Remember that to optimize performance and page load time, you should ideally determine what to show and hide on the server, instead of on the client.</p>
+
+        <table>
+            <thead>
+                <tr>
+                    <th>Helper Class Name</th>
+                    <th>Description</th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr>
+                    <td>`yui3-hidden-phone`</td>
+                    <td>Content marked with this class will be hidden below 768px</td>
+                </tr>
+                <tr>
+                    <td>`yui3-hidden-tablet`</td>
+                    <td>Content marked with this class will be hidden between 768px and 979px</td>
+                </tr>
+                <tr>
+                    <td>`yui3-hidden-desktop`</td>
+                    <td>Content marked with this class will be hidden above 980px</td>
+                </tr>
+            </tbody>
+        </table>
+