diff --git a/src/cssgrids/build.json b/src/cssgrids/build.json index 862d3188c13..0e119e90cc7 100644 --- a/src/cssgrids/build.json +++ b/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" + ] } } } diff --git a/src/cssgrids/css/cssgrids-responsive-base.css b/src/cssgrids/css/cssgrids-responsive-base.css new file mode 100644 index 00000000000..2258e1382a8 --- /dev/null +++ b/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; + } +} diff --git a/src/cssgrids/docs/assets/cssgrids-magazine-tests.js b/src/cssgrids/docs/assets/cssgrids-magazine-tests.js new file mode 100644 index 00000000000..4d40638131c --- /dev/null +++ b/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' ] }); diff --git a/src/cssgrids/docs/component.json b/src/cssgrids/docs/component.json index e2481d61fa4..71cc67dd175 100644 --- a/src/cssgrids/docs/component.json +++ b/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" } } } diff --git a/src/cssgrids/docs/cssgrids-magazine-example.mustache b/src/cssgrids/docs/cssgrids-magazine-example.mustache new file mode 100644 index 00000000000..15e96b05880 --- /dev/null +++ b/src/cssgrids/docs/cssgrids-magazine-example.mustache @@ -0,0 +1,2 @@ +{{>cssgrids-magazine-source}} +{{>test-runner}} \ No newline at end of file diff --git a/src/cssgrids/docs/cssgrids-magazine.mustache b/src/cssgrids/docs/cssgrids-magazine.mustache new file mode 100644 index 00000000000..a1f1f7d9608 --- /dev/null +++ b/src/cssgrids/docs/cssgrids-magazine.mustache @@ -0,0 +1,10 @@ +
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.
+If you want responsive behavior, pull down Responsive Grids instead.
-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.
@@ -214,3 +219,123 @@ body { +``` + +``` +
+ + + +
+``` + + +
+ +
To pull down Responsive Grids, include this link element on your page:
+``` + +``` + +
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.
+ +
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.
+ +``` +
+ +``` + +``` +
+``` + +
If you want some HTML elements to remain in a grid even on smaller screens, wrap them in the standard `.yui3-g`
+ + +
+ +
Responsive Grids listens to the following media queries. All `yui3-u-*` elements inside a `yui3-g-r` become 100% width at 767px or below.
+ +
Type of Display | +Media Query Widths | +
---|---|
Default Displays | +980px and up | +
Large Tablets | +768px to 979px | +
Smaller Tablets and Large Phones | +767px and below | +
Phones | +480px and below | +
+ +
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.
+ +
Helper Class Name | +Description | +
---|---|
`yui3-hidden-phone` | +Content marked with this class will be hidden below 768px | +
`yui3-hidden-tablet` | +Content marked with this class will be hidden between 768px and 979px | +
`yui3-hidden-desktop` | +Content marked with this class will be hidden above 980px | +
+ diff --git a/src/cssgrids/docs/partials/cssgrids-magazine-source.mustache b/src/cssgrids/docs/partials/cssgrids-magazine-source.mustache new file mode 100644 index 00000000000..8c6b37d33e4 --- /dev/null +++ b/src/cssgrids/docs/partials/cssgrids-magazine-source.mustache @@ -0,0 +1,184 @@ + + + +
+ + + + + + + +
+