39 lines
1.6 KiB
SCSS
39 lines
1.6 KiB
SCSS
// 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 flex-grid function.
|
|
// This function takes the fluid grid equation (target / context = result) and uses columns to help define each.
|
|
//
|
|
// The calculation presumes that your column structure will be missing the last gutter:
|
|
//
|
|
// -- column -- gutter -- column -- gutter -- column
|
|
//
|
|
// $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 / 995px) = 31.65829%;
|
|
// margin-left: flex-gutter(); // returns (25px / 995px) = 2.51256%;
|
|
//
|
|
// 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 (145px / 315px) = 46.031746%;
|
|
// }
|
|
// } |