Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

Merge remote branch 'origin/kf-flex-grid'

  • Loading branch information...
commit 0db24f523d47d22cc7210e527f0440449baf4805 2 parents 5e039a6 + 56735fe
Phil LaPier authored
View
1  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";
View
35 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; // Total Columns For Main Container
+//
+// 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%;
+// }
+// }
Please sign in to comment.
Something went wrong with that request. Please try again.