From 5fa094dc783c9bfd05752f4f1fc1b4fae174be35 Mon Sep 17 00:00:00 2001
From: Kyle Fiedler <kfiedler@thoughtbot.com>
Date: Fri, 3 Feb 2012 09:46:09 -0500
Subject: [PATCH 1/3] Added flex-grid funtion

---
 .../stylesheets/functions/_flex-grid.scss     | 35 +++++++++++++++++++
 1 file changed, 35 insertions(+)
 create mode 100644 app/assets/stylesheets/functions/_flex-grid.scss

diff --git a/app/assets/stylesheets/functions/_flex-grid.scss b/app/assets/stylesheets/functions/_flex-grid.scss
new file mode 100644
index 000000000..91c959ad1
--- /dev/null
+++ b/app/assets/stylesheets/functions/_flex-grid.scss
@@ -0,0 +1,35 @@
+// Flexible grid
+@function flex-grid($columns, $container-columns: $fg-max-columns) {
+  $width: $columns * $fg-column + ($columns - 1) * $fg-gutter;
+  $container-width: $container-columns * $fg-column + ($container-columns - 1) * $fg-gutter;
+  @return percentage($width / $container-width);
+}
+
+// Flexible gutter
+@function flex-gutter($container-columns: $fg-max-columns, $gutter: $fg-gutter) {
+  $container-width: $container-columns * $fg-column + ($container-columns - 1) * $fg-gutter;
+  @return percentage($gutter / $container-width);
+}
+
+// The $fg-column, $fg-gutter and $fg-max-columns variables must be defined in your base stylesheet to properly use the grid-width function.
+// This function takes the fluid grid equation (target ÷ context = result) and uses columns to help define each
+//
+//  $fg-column: 60px;         // Column Width
+//  $fg-gutter: 25px;          // Gutter Width
+//  $fg-max-columns: 12;          // Gutter Width
+//
+//  div {
+//    width: flex-grid(4);    // returns (315px ÷ 1020px) = 30.882353%;
+//    margin-left: flex-gutter(); // returns (25px ÷ 1020px) = 2.45098%;
+//
+//    p {
+//      width: flex-grid(2, 4); // returns (145px ÷ 315px) = 46.031746%;
+//      float: left;
+//      margin: flex-gutter(4); // returns (25px ÷ 315px) = 7.936508%;
+//    }
+//
+//    blockquote {
+//      float: left;
+//      width: flex-grid(2, 4); // returns (25px ÷ 315px) = 46.031746%;
+//    }
+//  }

From 75367bd36af6092d3ff4cb31a30ca2d5ad4d8df0 Mon Sep 17 00:00:00 2001
From: Kyle Fiedler <kfiedler@thoughtbot.com>
Date: Fri, 3 Feb 2012 09:47:50 -0500
Subject: [PATCH 2/3] Added flex-grid to bourbon scss file

---
 app/assets/stylesheets/_bourbon.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/app/assets/stylesheets/_bourbon.scss b/app/assets/stylesheets/_bourbon.scss
index 447167c5a..f71874a39 100644
--- a/app/assets/stylesheets/_bourbon.scss
+++ b/app/assets/stylesheets/_bourbon.scss
@@ -1,6 +1,7 @@
 // Custom Functions
 @import "functions/deprecated-webkit-gradient";
 @import "functions/grid-width";
+@import "functions/flex-grid";
 @import "functions/modular-scale";
 @import "functions/tint-shade";
 

From 56735fe6f0368a13ca4b9402140f5f80c99af1da Mon Sep 17 00:00:00 2001
From: Kyle Fiedler <kfiedler@thoughtbot.com>
Date: Fri, 3 Feb 2012 10:23:57 -0500
Subject: [PATCH 3/3] Added fix to documentation

---
 app/assets/stylesheets/functions/_flex-grid.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/assets/stylesheets/functions/_flex-grid.scss b/app/assets/stylesheets/functions/_flex-grid.scss
index 91c959ad1..2cae4524f 100644
--- a/app/assets/stylesheets/functions/_flex-grid.scss
+++ b/app/assets/stylesheets/functions/_flex-grid.scss
@@ -16,7 +16,7 @@
 //
 //  $fg-column: 60px;         // Column Width
 //  $fg-gutter: 25px;          // Gutter Width
-//  $fg-max-columns: 12;          // Gutter Width
+//  $fg-max-columns: 12;          // Total Columns For Main Container
 //
 //  div {
 //    width: flex-grid(4);    // returns (315px ÷ 1020px) = 30.882353%;