Notice removed Draw attention by Bas

occurred Jun 25, 2014 at 10:48

Bounty Ended with Alex L's answer chosen by Bas

occurred Jun 25, 2014 at 10:48

Tweeted twitter.com/#!/StackCodeReview/status/479301198357360640

occurred Jun 18, 2014 at 16:34

deleted 84 characters in body

Source Link

edited Jun 18, 2014 at 15:20

Bas

699
4
21

I have a one function to calculate all the possible widths plus the margins for the gutters.

In this same function, the grid extensions such as the pull, pushand offset functions are also calculated.

@import "grid-settings";
@import "../../mixins/cross-browser-elements/box";

@function calculate-one-column() {
  $a: 100%;
  @if ($gutter-width-px > 0px) {
    $a: ($a - ($gutter-width-procent * ($column-count - 1)));
  }
  @return $a / $column-count;
}

@function calculate-each-gutter() {
  @if ($gutter-width-px > 0px) {
    @return $gutter-width-procent;
  }
  @return 0;
}

@function calculate-function($function, $size, $first-child: false, $responsive: false) {
  $each-column: calculate-one-column() * $size;
  $each-gutter: calculate-each-gutter() * ($size - 1);
  @if ($function == 'size') {
    @return $each-column + $each-gutter;

  } @else if ($function == 'offset' and $first-child == false) and ($responsive == false) {
    @return $each-column + $each-gutter + ($gutter-width-procent * 1.5);

  } @else if ($function == 'push' or $function == 'pull') and ($responsive == false) or ($function == 'offset' and $first-child == true) {
    @return $each-column + $each-gutter + $gutter-width-procent;

  } @else if($function == 'offset' or 'push' or 'pull') and ($responsive == true)  {
    @return auto !important;
  }
}

These functionThe calculate-function @function is getting called by this piece of code:

@mixin make-grid-sizes() {
  @for $index from 1 through $column-count {
    &.#{$column-size}#{$index} {
      @include calculate-property('width', $index);
    }
  }
}

All of these functions are getting hold together with these variables:

$column-count: 12;
$row-max-width: 1024px;

$gutter-width-px: 15px !default;
$gutter-width-procent: percentage($gutter-width-px / $row-max-width);

The code works perfectly, but in my opinion it looks very messy.

I have a one function to calculate all the possible widths plus the margins for the gutters.

In this same function, the grid extensions such as the pull, pushand offset functions are also calculated.

@import "grid-settings";
@import "../../mixins/cross-browser-elements/box";

@function calculate-one-column() {
  $a: 100%;
  @if ($gutter-width-px > 0px) {
    $a: ($a - ($gutter-width-procent * ($column-count - 1)));
  }
  @return $a / $column-count;
}

@function calculate-each-gutter() {
  @if ($gutter-width-px > 0px) {
    @return $gutter-width-procent;
  }
  @return 0;
}

@function calculate-function($function, $size, $first-child: false, $responsive: false) {
  $each-column: calculate-one-column() * $size;
  $each-gutter: calculate-each-gutter() * ($size - 1);
  @if ($function == 'size') {
    @return $each-column + $each-gutter;

  } @else if ($function == 'offset' and $first-child == false) and ($responsive == false) {
    @return $each-column + $each-gutter + ($gutter-width-procent * 1.5);

  } @else if ($function == 'push' or $function == 'pull') and ($responsive == false) or ($function == 'offset' and $first-child == true) {
    @return $each-column + $each-gutter + $gutter-width-procent;

  } @else if($function == 'offset' or 'push' or 'pull') and ($responsive == true)  {
    @return auto !important;
  }
}

These function is getting called by this piece of code:

@mixin make-grid-sizes() {
  @for $index from 1 through $column-count {
    &.#{$column-size}#{$index} {
      @include calculate-property('width', $index);
    }
  }
}

All of these functions are getting hold together with these variables:

$column-count: 12;
$row-max-width: 1024px;

$gutter-width-px: 15px !default;
$gutter-width-procent: percentage($gutter-width-px / $row-max-width);

The code works perfectly, but in my opinion it looks very messy.

I have a one function to calculate all the possible widths plus the margins for the gutters.

In this same function, the grid extensions such as the pull, pushand offset functions are also calculated.

@function calculate-one-column() {
  $a: 100%;
  @if ($gutter-width-px > 0px) {
    $a: ($a - ($gutter-width-procent * ($column-count - 1)));
  }
  @return $a / $column-count;
}

@function calculate-each-gutter() {
  @if ($gutter-width-px > 0px) {
    @return $gutter-width-procent;
  }
  @return 0;
}

@function calculate-function($function, $size, $first-child: false, $responsive: false) {
  $each-column: calculate-one-column() * $size;
  $each-gutter: calculate-each-gutter() * ($size - 1);
  @if ($function == 'size') {
    @return $each-column + $each-gutter;

  } @else if ($function == 'offset' and $first-child == false) and ($responsive == false) {
    @return $each-column + $each-gutter + ($gutter-width-procent * 1.5);

  } @else if ($function == 'push' or $function == 'pull') and ($responsive == false) or ($function == 'offset' and $first-child == true) {
    @return $each-column + $each-gutter + $gutter-width-procent;

  } @else if($function == 'offset' or 'push' or 'pull') and ($responsive == true)  {
    @return auto !important;
  }
}

The calculate-function @function is getting called by this piece of code:

@mixin make-grid-sizes() {
  @for $index from 1 through $column-count {
    &.#{$column-size}#{$index} {
      @include calculate-property('width', $index);
    }
  }
}

All of these functions are getting hold together with these variables:

$column-count: 12;
$row-max-width: 1024px;

$gutter-width-px: 15px !default;
$gutter-width-procent: percentage($gutter-width-px / $row-max-width);

The code works perfectly, but in my opinion it looks very messy.

Notice added Draw attention by Bas

occurred Jun 18, 2014 at 13:28

Bounty Started worth 50 reputation by Bas

occurred Jun 18, 2014 at 13:28

deleted 899 characters in body

Source Link

edited Jun 18, 2014 at 9:25

Bas

699
4
21

Grid columnscolumn size calculation

@import "grid-settings";
@import "../../mixins/cross-browser-elements/box";

@function calculate-one-column() {
  $a: 100%;
  @if ($gutter-width-px > 00px) {
    $a: ($a - ($gutter-width-procent * ($column-count - 1)));
  }
  @return $a / $column-count;
}

@function calculate-each-gutter() {
  @if ($gutter-width-px > 00px) {
    @return $gutter-width-procent;
  }
  @return 0;
}

@mixin@function calculate-propertyfunction($property$function, $index: 1$size, $loop$first-child: truefalse, $first-child$responsive: false) {
  $each-column-width: calculate-one-column() * $index;$size;
  $each-gutter-width: calculate-each-gutter() * ($index$size - 1);
  $sum:@if ($function == 'size') {
    @return $each-column-width + $each-gutter-width;gutter;
  //Offset, not the 
 first child
} @else @ifif ($property$function == "margin-left")'offset' and ($loop$first-child == truefalse) and ($first-child$responsive == false) {
    #{$property}:@return $sum$each-column + $each-gutter + ($gutter-width-procent * 1.5);
 
  //Pull and Push / Offset first child
  } @else if ($property$function !=== "width")'push' or ($property$function == "margin-left"'pull') and ($loop$responsive == truefalse) andor ($function == 'offset' and $first-child == true) {
    #{$property}:@return $sum$each-column + $each-gutter + $gutter-width-procent;

  //The} normal@else gridif($function sizes
== 'offset' }or @else'push' or 'pull') and ($responsive == true)  {
    #{$property}:@return $sum;auto !important;
  }
}

@mixin make-grid-sizes() {
  @for $index from 1 through $column-count {
    &.#{$column-size}#{$index} {
      @include calculate-property('width', $index);
    }
  }
}

And for the grid extensions such as the push and pull:

$settings: ("offset": 'margin-left',
        "push": 'left',
        "pull": 'right',
        "center": 'margin-left');

@mixin make-grid-extensions() {
  //Offset, Push en Pull
  @for $index from 1 to $column-count {
    $settings-loop: map-remove($settings, 'center') !global;
    @each $function, $property in $settings-loop {
      &.#{$function}-#{$index} {
        @include calculate-property($property, $index);

        @if ($function == 'offset') {
          &:first-child {
            @include calculate-property($property, $index, true, true);
          }
        }
      }
    }
  }
  //Center
  @each $function, $property in $settings {
    @each $function in $settings-loop {
      $settings-noloop: map-remove($settings, $function);
    }
    &.#{$function} {
      @include calculate-property($property);
    }
  }
}

$column-count: 12; //Aantal kolommen in één rij.
$row-max-width: 1024px;

$gutter-width-px: 15px !default;
$gutter-width-procent: percentage($gutter-width-px / $row-max-width);

Grid columns calculation

@function calculate-one-column() {
  $a: 100%;
  @if ($gutter-width-px > 0) {
    $a: ($a - ($gutter-width-procent * ($column-count - 1)));
  }
  @return $a / $column-count;
}

@function calculate-each-gutter() {
  @if ($gutter-width-px > 0) {
    @return $gutter-width-procent;
  }
  @return 0;
}

@mixin calculate-property($property, $index: 1, $loop: true, $first-child: false) {
  $each-column-width: calculate-one-column() * $index;
  $each-gutter-width: calculate-each-gutter() * ($index - 1);
  $sum: $each-column-width + $each-gutter-width;
  //Offset, not the first child
  @if ($property == "margin-left") and ($loop == true) and ($first-child == false) {
    #{$property}: $sum + ($gutter-width-procent * 1.5);
 
  //Pull and Push / Offset first child
  } @else if ($property != "width") or ($property == "margin-left") and ($loop == true) and ($first-child == true) {
    #{$property}: $sum + $gutter-width-procent;

  //The normal grid sizes
  } @else {
    #{$property}: $sum;
  }
}

@mixin make-grid-sizes() {
  @for $index from 1 through $column-count {
    &.#{$column-size}#{$index} {
      @include calculate-property('width', $index);
    }
  }
}

And for the grid extensions such as the push and pull:

$settings: ("offset": 'margin-left',
        "push": 'left',
        "pull": 'right',
        "center": 'margin-left');

@mixin make-grid-extensions() {
  //Offset, Push en Pull
  @for $index from 1 to $column-count {
    $settings-loop: map-remove($settings, 'center') !global;
    @each $function, $property in $settings-loop {
      &.#{$function}-#{$index} {
        @include calculate-property($property, $index);

        @if ($function == 'offset') {
          &:first-child {
            @include calculate-property($property, $index, true, true);
          }
        }
      }
    }
  }
  //Center
  @each $function, $property in $settings {
    @each $function in $settings-loop {
      $settings-noloop: map-remove($settings, $function);
    }
    &.#{$function} {
      @include calculate-property($property);
    }
  }
}

$column-count: 12; //Aantal kolommen in één rij.
$row-max-width: 1024px;

$gutter-width-px: 15px !default;
$gutter-width-procent: percentage($gutter-width-px / $row-max-width);

Grid column size calculation

@import "grid-settings";
@import "../../mixins/cross-browser-elements/box";

@function calculate-one-column() {
  $a: 100%;
  @if ($gutter-width-px > 0px) {
    $a: ($a - ($gutter-width-procent * ($column-count - 1)));
  }
  @return $a / $column-count;
}

@function calculate-each-gutter() {
  @if ($gutter-width-px > 0px) {
    @return $gutter-width-procent;
  }
  @return 0;
}

@function calculate-function($function, $size, $first-child: false, $responsive: false) {
  $each-column: calculate-one-column() * $size;
  $each-gutter: calculate-each-gutter() * ($size - 1);
  @if ($function == 'size') {
    @return $each-column + $each-gutter;
 
  } @else if ($function == 'offset' and $first-child == false) and ($responsive == false) {
    @return $each-column + $each-gutter + ($gutter-width-procent * 1.5);

  } @else if ($function == 'push' or $function == 'pull') and ($responsive == false) or ($function == 'offset' and $first-child == true) {
    @return $each-column + $each-gutter + $gutter-width-procent;

  } @else if($function == 'offset' or 'push' or 'pull') and ($responsive == true)  {
    @return auto !important;
  }
}

@mixin make-grid-sizes() {
  @for $index from 1 through $column-count {
    &.#{$column-size}#{$index} {
      @include calculate-property('width', $index);
    }
  }
}

$column-count: 12;
$row-max-width: 1024px;

$gutter-width-px: 15px !default;
$gutter-width-procent: percentage($gutter-width-px / $row-max-width);

deleted 14 characters in body

Source Link

edited Jun 16, 2014 at 10:28

Bas

699
4
21

$column-count: 12; //Aantal kolommen in één rij.
$row-max-width: $container-max-width;1024px;

$gutter-width-px: 15px !default;
$gutter-width-procent: percentage($gutter-width-px / $row-max-width);

$column-count: 12; //Aantal kolommen in één rij.
$row-max-width: $container-max-width;

$gutter-width-px: 15px !default;
$gutter-width-procent: percentage($gutter-width-px / $row-max-width);

$column-count: 12; //Aantal kolommen in één rij.
$row-max-width: 1024px;

$gutter-width-px: 15px !default;
$gutter-width-procent: percentage($gutter-width-px / $row-max-width);

deleted 161 characters in body

Source Link

edited Jun 14, 2014 at 18:23

Bas

699
4
21

Loading

Source Link

asked Jun 14, 2014 at 17:21

Bas

699
4
21

Loading

Stack Exchange Network

Return to Question

Grid columnscolumn size calculation

Grid columns calculation

Grid column size calculation