Merge pull request #6 from cjcenizal/1/bug/fix-card-group-ie11

[1]: Fix IE11 flex shorthand bug with card and cardGroup.

README.md

@@ -18,3 +18,10 @@ This command will concatenate the source CSS files into a single CSS file, and
 then use PostCSS to add various vendor-prefixed properties. Open up
 `dist/index.html` to see a demo page of the various flexbox patterns in the
 browser.
+
+## Things to keep in mind
+
+_I don't recommend copy-pasting these examples directly into production code._
+I'm only trying to demonstrate different ways of using flexbox through these
+examples, so they may not incorporate some accessibility best practices (such as using semantic HTML5 elements and the `role` attribute). Before using this
+code in production you should make sure it meets your accessibility needs.

dist/styles.css

@@ -487,7 +487,7 @@
     /**
      * We're going to lay out this element's children
      * just like in the "Centered prompt" example.
-     * First we'll rotate the main axis so that the 
+     * First we'll rotate the main axis so that the
      * children are laid out vertically.
      */
     -webkit-flex-direction: column;
@@ -512,7 +512,7 @@
         -ms-flex-pack: center;
             justify-content: center;
 
-    padding: 15px;
+    padding: 15px 0;
   }
 
     .card__descriptionIcon {
@@ -524,6 +524,7 @@
       color: #57727C;
       font-size: 12px;
       text-align: center;
+      max-width: calc(100% - 30px);
     }
 
   .card__price {
@@ -539,6 +540,7 @@
 .card--fixedWidth {
   max-width: 120px;
 }
+
 /*=====================================================
   contents of: index.css
   =====================================================*/
@@ -566,13 +568,13 @@
      * properties. These properties control how the
      * element resizes to fill its container.
      *
-     * We'll also set flex-grow to 1 so that it
-     * will expand to fill its container. (The
-     * default value is 1.)
+     * We'll set flex-grow to 1 so that it will
+     * expand to fill its container. (The default
+     * default value is 0.)
      *
-     * We'll set flex-shrink to 1 so that the element
-     * will shrink as its container gets smaller.
-     * (The default value is 0.)
+     * We'll also set flex-shrink to 1 so that the
+     * element will shrink as its container gets
+     * smaller. (The default value is 1.)
      *
      * Last, we set flex-basis to 0 so that its
      * size is solely determined by the size of
@@ -585,10 +587,16 @@
      * shrink with its container and siblings, but
      * they will all have the same size, even if they
      * have different amounts of content.
+     *
+     * NOTE: IE11 ignores flex short-hand declarations
+     * with unitless flex-basis values. So we have to
+     * use 0% instead of 0 as a workaround. You can
+     * find more info at:
+     * github.com/philipwalton/flexbugs.
      */
-    -webkit-flex: 1 1 0;
-        -ms-flex: 1 1 0;
-            flex: 1 1 0;
+    -webkit-flex: 1 1 0%;
+        -ms-flex: 1 1 0%;
+            flex: 1 1 0%;
 
     border: none;
     border-radius: 0;

package.json

@@ -1,6 +1,6 @@
 {
   "name": "flexbox-patterns",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "Patterns for using flexbox CSS to build awesome UI components",
   "repository": "cjcenizal/flexbox-patterns",
   "author": {

src/styles/card-group.css

@@ -17,13 +17,13 @@
      * properties. These properties control how the
      * element resizes to fill its container.
      *
-     * We'll also set flex-grow to 1 so that it
-     * will expand to fill its container. (The
-     * default value is 1.)
+     * We'll set flex-grow to 1 so that it will
+     * expand to fill its container. (The default
+     * default value is 0.)
      *
-     * We'll set flex-shrink to 1 so that the element
-     * will shrink as its container gets smaller.
-     * (The default value is 0.)
+     * We'll also set flex-shrink to 1 so that the
+     * element will shrink as its container gets
+     * smaller. (The default value is 1.)
      *
      * Last, we set flex-basis to 0 so that its
      * size is solely determined by the size of
@@ -36,8 +36,14 @@
      * shrink with its container and siblings, but
      * they will all have the same size, even if they
      * have different amounts of content.
+     *
+     * NOTE: IE11 ignores flex short-hand declarations
+     * with unitless flex-basis values. So we have to
+     * use 0% instead of 0 as a workaround. You can
+     * find more info at:
+     * github.com/philipwalton/flexbugs.
      */
-    flex: 1 1 0;
+    flex: 1 1 0%;
 
     border: none;
     border-radius: 0;

src/styles/card.css

@@ -26,7 +26,7 @@
     /**
      * We're going to lay out this element's children
      * just like in the "Centered prompt" example.
-     * First we'll rotate the main axis so that the 
+     * First we'll rotate the main axis so that the
      * children are laid out vertically.
      */
     flex-direction: column;
@@ -45,7 +45,7 @@
      */
     justify-content: center;
 
-    padding: 15px;
+    padding: 15px 0;
   }
 
     .card__descriptionIcon {
@@ -57,6 +57,7 @@
       color: #57727C;
       font-size: 12px;
       text-align: center;
+      max-width: calc(100% - 30px);
     }
 
   .card__price {
@@ -71,4 +72,4 @@
 
 .card--fixedWidth {
   max-width: 120px;
-}
+}