Skip to content

Instantly share code, notes, and snippets.

@supasympa
Created March 25, 2013 21:49
Show Gist options
  • Save supasympa/5241123 to your computer and use it in GitHub Desktop.
Save supasympa/5241123 to your computer and use it in GitHub Desktop.
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;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment