{: versionI"3.2.19 (Media Mark):EF:shaI"-c4ed8152ee77b4d30c853fc3f7c763157beae40e;F: contents"o:Sass::Tree::RootNode :@children[ o:Sass::Tree::CommentNode : @value[I"/* Flexible grid */:ET: @type: silent;[: @linei: @options{o:Sass::Tree::FunctionNode : @nameI"flex-grid; T: @args[[o:Sass::Script::Variable;I" columns; T:@underscored_nameI" columns; T; @ 0[o;;I"container-columns; T;I"container_columns; T; @ o; ;I"fg-max-columns; T;I"fg_max_columns; T; i; @ : @splat0;[o:Sass::Tree::VariableNode ;I" width; T: @expro:Sass::Script::Operation :@operand1o; ;o; ;I" columns; T;I" columns; T; i; @ :@operand2o; ;I"fg-column; T;I"fg_column; T; i; @ :@operator: times; i; @ ;o; ;o; ;o; ;I" columns; T;I" columns; T; i; @ ;o:Sass::Script::Number ;i:@numerator_units[:@denominator_units[; i:@originalI"1; F; @ ;: minus; i; @ ;o; ;I"fg-gutter; T;I"fg_gutter; T; i; @ ;;; i; @ ;: plus; i; @ : @guarded0;[; i; @ o; ;I"container-width; T;o; ;o; ;o; ;I"container-columns; T;I"container_columns; T; i ; @ ;o; ;I"fg-column; T;I"fg_column; T; i ; @ ;;; i ; @ ;o; ;o; ;o; ;I"container-columns; T;I"container_columns; T; i ; @ ;o; ;i;[;@,; i ;I"1; F; @ ;;; i ; @ ;o; ;I"fg-gutter; T;I"fg_gutter; T; i ; @ ;;; i ; @ ;; ; i ; @ ;!0;[; i ; @ o:Sass::Tree::ReturnNode ;o:Sass::Script::Funcall ;I"percentage; T;[o; ;o; ;I" width; T;I" width; T; i ; @ ;o; ;I"container-width; T;I"container_width; T; i ; @ ;:div; i ; @ :@keywords{;0; i ; @ ;[; i ; @ ; i:@has_childrenT; @ o; ;[I"/* Flexible gutter */; T; ; ;[; i ; @ o; ;I"flex-gutter; T;[[o;;I"container-columns; T;I"container_columns; T; @ o; ;I"fg-max-columns; T;I"fg_max_columns; T; i; @ [o;;I" gutter; T;I" gutter; T; @ o; ;I"fg-gutter; T;I"fg_gutter; T; i; @ ;0;[o; ;I"container-width; T;o; ;o; ;o; ;I"container-columns; T;I"container_columns; T; i; @ ;o; ;I"fg-column; T;I"fg_column; T; i; @ ;;; i; @ ;o; ;o; ;o; ;I"container-columns; T;I"container_columns; T; i; @ ;o; ;i;[;@,; i;I"1; F; @ ;;; i; @ ;o; ;I"fg-gutter; T;I"fg_gutter; T; i; @ ;;; i; @ ;; ; i; @ ;!0;[; i; @ o;" ;o;# ;I"percentage; T;[o; ;o; ;I" gutter; T;I" gutter; T; i; @ ;o; ;I"container-width; T;I"container_width; T; i; @ ;;$; i; @ ;%{;0; i; @ ;[; i; @ ; i;&T; @ o; ;[I"/* 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%; * } * } */; T; ; ;[; i; @ :@templateI"9// 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%; // } // } ; T;&T; @ ; i