Sha256: a28c83f49358ffea031cc0895717dad45eb3350cbe7bd51680979a5631561d5d

Contents?: true

Size: 1.41 KB

Versions: 12

Compression:

Stored size: 1.41 KB

Contents

// 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.
//
//  $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 (145px / 315px) = 46.031746%;
//    }
//  }

Version data entries

12 entries across 12 versions & 2 rubygems

Version Path
bourbon-compass-3.0.1 stylesheets/bourbon/functions/_flex-grid.scss
bourbon-3.0.1 app/assets/stylesheets/functions/_flex-grid.scss
bourbon-3.0.0 app/assets/stylesheets/functions/_flex-grid.scss
bourbon-compass-2.1.3 stylesheets/bourbon/functions/_flex-grid.scss
bourbon-2.1.3 app/assets/stylesheets/functions/_flex-grid.scss
bourbon-compass-2.1.2 stylesheets/bourbon/functions/_flex-grid.scss
bourbon-2.1.2 app/assets/stylesheets/functions/_flex-grid.scss
bourbon-compass-2.1.1.0 stylesheets/bourbon/functions/_flex-grid.scss
bourbon-2.1.1 app/assets/stylesheets/functions/_flex-grid.scss
bourbon-2.1.0 app/assets/stylesheets/functions/_flex-grid.scss
bourbon-2.0.0.rc1 app/assets/stylesheets/functions/_flex-grid.scss
bourbon-1.4.0 app/assets/stylesheets/functions/_flex-grid.scss