Merge pull request pure-css#43 from msweeney/grids-unit-match

Use "substring match" rather than "starts with" selector to match responsive units.

Author: tilomitra

HISTORY.md

@@ -4,7 +4,8 @@ Pure Change History
 NEXT
 ----
 
-
+* Fixed: Responsive grids fails to apply when another class precedes the unit
+  class in markup. [#44]
 
 
 0.1.0 (2013-05-24)

src/grids/css/grids-r.css

@@ -29,12 +29,14 @@
     }
 }
 @media (max-width:480px) {
-    .pure-g-r > [class ^= "pure-u"] {
+    .pure-g-r > .pure-u,
+    .pure-g-r > [class *= "pure-u-"] {
         width: 100%;
     }
 }
 @media (max-width:767px) {
-    .pure-g-r > [class ^= "pure-u"] {
+    .pure-g-r > .pure-u,
+    .pure-g-r > [class *= "pure-u-"] {
         width: 100%;
     }
     .pure-hidden-phone {

src/grids/tests/manual/responsive.html

@@ -40,14 +40,14 @@ <h1 class="pure-u-1 centered">Features.</h1>
 
     <div class="pure-g-r">
         <h1 class="pure-u-1 centered">Example.</h1>
-        <div class="pure-u-1-4">
+        <div class="pure-foo pure-u-1-4">
             <div class="cell">
                   <h3>Fast</h3>
                   <p>YUI's lightweight core and modular architecture make it scalable, fast, and robust. Built by frontend engineers at Yahoo!, YUI powers the most popular websites in the world.</p>
              </div>
         </div><!--/span-->
 
-        <div class="pure-u-1-4">
+        <div class="pure-u-1-4 pure-foo">
             <div class="cell">
                   <h3>Complete</h3>
                   <p>YUI's intuitive and well-documented API takes you from basic DOM handling to building performant and maintainable applications on desktop browsers, mobile devices, and servers.</p>