imx-grid.less

/**
 * @package    css
 * @subpackage grid
 **/

/*  =========================================================
grid
element
element widths
element offsets
helper mixins
mixins to calculate the actual margins/widths (can be used outside)
========================================================== */

/*  =========================================================
init
========================================================== */
.imx-grid(@parts: 12, @namespace: imx-grid-el, @maxWidth: 100%, @screenWidth: 1440px, @gridWidth: 1440px, @margin: 0){
  margin: 0px auto;
  clear: both; display: block;
  width: unit((@gridWidth/@screenWidth) * 100, %);
  max-width: @maxWidth;
  
  [class*=~'@{namespace}-']{
    display: inline-block; vertical-align: top;
    box-sizing: border-box;
    
    /* margin settings for the grid elements */
    margin-right: @margin;
    /* set base margin if there is no offset class present */
    &:not([class*=~'@{namespace}-off-']){
      margin-left: @margin;
    }
  }
  
  @singleElementWidth: .countSingleElementWidth(@gridWidth, @parts)[@result];
  /* actual element creation */
  .imx-grid-elements(@parts);
}

/*  =========================================================
grid elements
========================================================= */
.imx-grid-elements(@parts: 12, @count: 1) when(@count =< @parts) {
  .@{namespace}-@{count}{ .genericElementWidth(@count, @parts, @margin, @gridWidth, @singleElementWidth);}
  .@{namespace}-off-@{count}{ .genericElementOffset(@count, @parts, @margin, @gridWidth, @singleElementWidth);}
  .@{namespace}-off-n@{count}{ .genericElementOffset(@count, @parts, @margin, @gridWidth, @singleElementWidth * -1);}

  .imx-grid-elements(@parts, (@count + 1));
}

/*  =========================================================
element widths
========================================================= */
.genericElementWidth(@count, @parts, @margin, @gridWidth, @singleElementWidth){
  width: .singleGridWidth(@count, @parts, @gridWidth, @margin, @singleElementWidth)[@result];
}

/*  =========================================================
element offsets
========================================================= */
.genericElementOffset(@count, @parts, @margin, @gridWidth, @singleElementWidth){
  margin-left: .singleGridOffset(@count, @parts, @gridWidth, @margin, @singleElementWidth)[@result];
}


/*  =========================================================
helper mixins
========================================================= */
.countSingleElementWidth(@gridWidth, @parts){
  @result: @gridWidth / @parts;
}

.returnSingleGridWidth(@singleElementWidth, @parts, @gridWidth){
  @result: unit((@singleElementWidth*@parts/@gridWidth)*100, %);
}

/*  =========================================================
mixins to calculate the actual margins/widths (can be used outside)
========================================================= */
.singleGridWidth(@count, @parts, @gridWidth, @margin){
  @singleElementWidth: .countSingleElementWidth(@gridWidth, @parts)[@result];
  @elementWidth: .returnSingleGridWidth(@singleElementWidth, @count, @gridWidth)[@result];

  @result: calc(~'@{elementWidth} - @{margin} - @{margin}');
}
.singleGridWidth(@count, @parts, @gridWidth, @margin, @singleElementWidth){
  @elementWidth: .returnSingleGridWidth(@singleElementWidth, @count, @gridWidth)[@result];

  @result: calc(~'@{elementWidth} - @{margin} - @{margin}');
}

.singleGridOffset(@count, @parts, @gridWidth, @margin){
  @singleElementWidth: .countSingleElementWidth(@gridWidth, @parts)[@result];
  @elementWidth: .returnSingleGridWidth(@singleElementWidth, @count, @gridWidth)[@result];

  @result: calc(~'@{elementWidth} + @{margin}');
}
.singleGridOffset(@count, @parts, @gridWidth, @margin, @singleElementWidth){
  @elementWidth: .returnSingleGridWidth(@singleElementWidth, @count, @gridWidth)[@result];

  @result: calc(~'@{elementWidth} + @{margin}');
}