Using LESS to Create a Grid System

Submitted by matt_eaton on Wed, 08/05/2015 - 12:52 PM

Tags

The last couple of custom Drupal themes I created called for a very simple grid system to be included in the project. For example, lets say we needed to work off of a grid of 12 columns. Normally we would need to go through and take the outside width of the parent container and divide each column up by this width and set each column by hand to get the exact width of each column in our grid. This seems like a rather tedious method that probably would require me or some poor soul working with me to rework many times over the course of project. So, I thought there has to be a better to dynamically create this gird system, there had to be a way to create a function that takes the number of columns and divides each column up and sets the appropriate width whenever grid needed to be changed. Well, luckily Bootstrap does something close to this already, so I gleamed a bit from what Bootstrap was doing and created my own grid function to produce the CSS dynamically from LESS. See the grid code below. Simply set the number of desktop columns and gutter size and this will output CSS ready for you to use in your HTML grid system after it is compiled.

/*---------------------------------------------------*/
/*       Grid LESS                                   */
/*                                                   */
/*---------------------------------------------------*/
 
@grid-gutter:    20px;
@desktop-grid-columns:   12;
 
 
// helper class, will never show up in resulting css
// will be called as long the index is above 0
.loopingClass (@index) when (@index &#62; 0) {
 
   .column@{index}{
      // your resulting css
      position: relative;
      float: left;
      width: percentage((@index / @desktop-grid-columns));
      min-height: 1px;
   }
 
   // next iteration
  .loopingClass(@index - 1);
}
 
// end the loop when index is 0
.loopingClass (0) {}
 
// "call" the loopingClass the first time with highest value
.loopingClass (@desktop-grid-columns);
 
// the styles inside the grid
.inside-grid{
   margin-left:  (@grid-gutter / 2);
   margin-right: (@grid-gutter / 2);
}
 
// kill both margins
.kill-margin{
   margin-left: 0;
   margin-right: 0;
}
 
// kill left margins
.kill-margin-left{
   margin-left: 0;
}
 
// kil right margins
.kill-margin-right{
   margin-right: 0;
}

The following LESS will be compiled to the CSS below.

.column12{position:relative;float:left;width:100%;min-height:1px;}
.column11{position:relative;float:left;width:91.66666666666666%;min-height:1px;}
.column10{position:relative;float:left;width:83.33333333333334%;min-height:1px;}
.column9{position:relative;float:left;width:75%;min-height:1px;}
.column8{position:relative;float:left;width:66.66666666666666%;min-height:1px;}
.column7{position:relative;float:left;width:58.333333333333336%;min-height:1px;}
.column6{position:relative;float:left;width:50%;min-height:1px;}
.column5{position:relative;float:left;width:41.66666666666667%;min-height:1px;}
.column4{position:relative;float:left;width:33.33333333333333%;min-height:1px;}
.column3{position:relative;float:left;width:25%;min-height:1px;}
.column2{position:relative;float:left;width:16.666666666666664%;min-height:1px;}
.column1{position:relative;float:left;width:8.333333333333332%;min-height:1px;}
.inside-grid{margin-left:10px;margin-right:10px;}
.kill-margin{margin-left:0;margin-right:0;}
.kill-margin-left{margin-left:0;}
.kill-margin-right{margin-right:0;}

Member for

3 years 9 months

Matt Eaton

Long time mobile team lead with a love for network engineering, security, IoT, oss, writing, wireless, and mobile. Avid runner and determined health nut living in the greater Chicagoland area.

Twitter

Github

Using LESS to Create a Grid System

Tags

Member for

Comments

I COULDN'T READ...

BACKGROUND

UPDATED STYLES