Skip to content
This repository
Browse code

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

  • Loading branch information...
commit 0db24f523d47d22cc7210e527f0440449baf4805 2 parents 5e039a6 + 56735fe
authored February 17, 2012
1  app/assets/stylesheets/_bourbon.scss
... ...
@@ -1,6 +1,7 @@
1 1
 // Custom Functions
2 2
 @import "functions/deprecated-webkit-gradient";
3 3
 @import "functions/grid-width";
  4
+@import "functions/flex-grid";
4 5
 @import "functions/modular-scale";
5 6
 @import "functions/tint-shade";
6 7
 
35  app/assets/stylesheets/functions/_flex-grid.scss
... ...
@@ -0,0 +1,35 @@
  1
+// Flexible grid
  2
+@function flex-grid($columns, $container-columns: $fg-max-columns) {
  3
+  $width: $columns * $fg-column + ($columns - 1) * $fg-gutter;
  4
+  $container-width: $container-columns * $fg-column + ($container-columns - 1) * $fg-gutter;
  5
+  @return percentage($width / $container-width);
  6
+}
  7
+
  8
+// Flexible gutter
  9
+@function flex-gutter($container-columns: $fg-max-columns, $gutter: $fg-gutter) {
  10
+  $container-width: $container-columns * $fg-column + ($container-columns - 1) * $fg-gutter;
  11
+  @return percentage($gutter / $container-width);
  12
+}
  13
+
  14
+// The $fg-column, $fg-gutter and $fg-max-columns variables must be defined in your base stylesheet to properly use the grid-width function.
  15
+// This function takes the fluid grid equation (target ÷ context = result) and uses columns to help define each
  16
+//
  17
+//  $fg-column: 60px;         // Column Width
  18
+//  $fg-gutter: 25px;          // Gutter Width
  19
+//  $fg-max-columns: 12;          // Total Columns For Main Container
  20
+//
  21
+//  div {
  22
+//    width: flex-grid(4);    // returns (315px ÷ 1020px) = 30.882353%;
  23
+//    margin-left: flex-gutter(); // returns (25px ÷ 1020px) = 2.45098%;
  24
+//
  25
+//    p {
  26
+//      width: flex-grid(2, 4); // returns (145px ÷ 315px) = 46.031746%;
  27
+//      float: left;
  28
+//      margin: flex-gutter(4); // returns (25px ÷ 315px) = 7.936508%;
  29
+//    }
  30
+//
  31
+//    blockquote {
  32
+//      float: left;
  33
+//      width: flex-grid(2, 4); // returns (25px ÷ 315px) = 46.031746%;
  34
+//    }
  35
+//  }

0 notes on commit 0db24f5

Please sign in to comment.
Something went wrong with that request. Please try again.