Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Fetching contributors…

Cannot retrieve contributors at this time

36 lines (33 sloc) 1.439 kb
// 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%;
// }
// }
Jump to Line
Something went wrong with that request. Please try again.