supasympa
3/25/2013 - 9:49 PM

LESS to create the classes required for creating a flexi grid.

LESS to create the classes required for creating a flexi grid.

@fixedCols :5;
@fixedRows :2;

.boxXxn(@X:5, @Y:2){

  //iterate from 5 down to 0 X
  .boxXY(@indexX, @indexY) when (@indexX > 0) and (@indexY > 0){
    .box@{indexX}x@{indexY}{
      width:((100 / @fixedCols) * @indexX) * 1%;
      height:((100/ @fixedRows) * @indexY) * 1%;
    }

    .boxXY(@indexX, @indexY - 1);
  }

  //iterate from 5 down to 0 X
  .boxX(@indexX, @indexY) when (@indexX > 0) and (@indexY > 0){

    .boxXY(@indexX, @indexY);

    .boxX(@indexX - 1, @indexY);
  }

  .boxX(@X, @Y);
}

.boxXxn(@fixedCols, @fixedRows);


.box-outline{
  outline:dotted 1px @app-black;
  float: left;
}