Download raw (3.0 KB)

/*///////////////Grid builder//////////////////////////////////////////*/
@col-width: (@body-width - ((@col-number - 1) * @col-gutter)) / @col-number;
@row-height: (@body-height - ((@row-number - 1) * @row-gutter)) / @row-number;

@col-gutter-width: @col-width+@col-gutter;
@row-gutter-height: @row-height+@row-gutter;


/* x classes */
.create-x-classes(@i:0) when(@i < @col-number){
    .x@{i}{
       left:@i * @col-width + @i * @col-gutter;
    }
    .create-x-classes(@i + 1);
}
.create-x-classes();

/* y classes */
.create-y-classes(@i:0) when(@i < @row-number){
    .y@{i}{
       top:@i * @row-height + @i * @row-gutter;
    }
    .create-y-classes(@i + 1);
}
.create-y-classes();

/* width classes */
.create-w-classes(@i:1) when(@i <= @col-number){
    .w@{i}{
       width:@col-width * @i + @col-gutter * (@i - 1);
    }
    .create-w-classes(@i + 1);
}
.create-w-classes();

/* height classes */
.create-h-classes(@i:1) when(@i <= @row-number){
    .h@{i}{
       height:@row-height * @i + @row-gutter * (@i - 1);
    }
    .create-h-classes(@i + 1);
}
.create-h-classes();


.grid{
    background-attachment: local;
    background-size:@col-gutter-width @row-gutter-height, @col-gutter-width @row-gutter-height, @col-gutter-width @row-gutter-height, @col-gutter-width @row-gutter-height;
    background-position: -1pt -1pt, -1pt -1pt, -(@col-gutter+1) -(@row-gutter+1), -(@col-gutter+1) -(@row-gutter+1);
    
    background-image: -webkit-linear-gradient(top, @grid-color 1px, transparent 1px),
                      -webkit-linear-gradient(left, @grid-color 1px, transparent 1px),
                      -webkit-linear-gradient(top, @grid-color 1px, transparent 1px),
                      -webkit-linear-gradient(left, @grid-color 1px, transparent 1px);
    background-image: -moz-linear-gradient(top, @grid-color 1px, transparent 1px),
                      -moz-linear-gradient(left, @grid-color 1px, transparent 1px),
                      -moz-linear-gradient(top, @grid-color 1px, transparent 1px),
                      -moz-linear-gradient(left, @grid-color 1px, transparent 1px);
    background-image: -ms-linear-gradient(top, @grid-color 1px, transparent 1px),
                      -ms-linear-gradient(left, @grid-color 1px, transparent 1px),
                      -ms-linear-gradient(top, @grid-color 1px, transparent 1px),
                      -ms-linear-gradient(left, @grid-color 1px, transparent 1px);
    background-image: -o-linear-gradient(top, @grid-color 1px, transparent 1px),
                      -o-linear-gradient(left, @grid-color 1px, transparent 1px),
                      -o-linear-gradient(top, @grid-color 1px, transparent 1px),
                      -o-linear-gradient(left, @grid-color 1px, transparent 1px);
    background-image: linear-gradient(to bottom, @grid-color 1px, transparent 1px),
                      linear-gradient(to right, @grid-color 1px, transparent 1px),
                      linear-gradient(to bottom, @grid-color 1px, transparent 1px),
                      linear-gradient(to right, @grid-color 1px, transparent 1px);
    
    
    
}