_flex-grid.scss 1.6 KB

123456789101112131415161718192021222324252627282930313233343536373839
  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. // Flexible gutter
  8. @function flex-gutter($container-columns: $fg-max-columns, $gutter: $fg-gutter) {
  9. $container-width: $container-columns * $fg-column + ($container-columns - 1) * $fg-gutter;
  10. @return percentage($gutter / $container-width);
  11. }
  12. // The $fg-column, $fg-gutter and $fg-max-columns variables must be defined in your base stylesheet to properly use the flex-grid function.
  13. // This function takes the fluid grid equation (target / context = result) and uses columns to help define each.
  14. //
  15. // The calculation presumes that your column structure will be missing the last gutter:
  16. //
  17. // -- column -- gutter -- column -- gutter -- column
  18. //
  19. // $fg-column: 60px; // Column Width
  20. // $fg-gutter: 25px; // Gutter Width
  21. // $fg-max-columns: 12; // Total Columns For Main Container
  22. //
  23. // div {
  24. // width: flex-grid(4); // returns (315px / 995px) = 31.65829%;
  25. // margin-left: flex-gutter(); // returns (25px / 995px) = 2.51256%;
  26. //
  27. // p {
  28. // width: flex-grid(2, 4); // returns (145px / 315px) = 46.031746%;
  29. // float: left;
  30. // margin: flex-gutter(4); // returns (25px / 315px) = 7.936508%;
  31. // }
  32. //
  33. // blockquote {
  34. // float: left;
  35. // width: flex-grid(2, 4); // returns (145px / 315px) = 46.031746%;
  36. // }
  37. // }