Skip to main content

Using LESS to Create a Grid System

Tags

LESS

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 > 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

2 years 7 months
Matt Eaton

Long time iOS and server side team lead with a love for Python, Swift, ObjC, C, C++, networking, testing, network debugging, embedded development, technical writing, and research.

Comments

Alex_PK

Thu, 08/06/2015 - 02:53 PM

Your dotted background scared me away from reading the article. I suggest just using white or a very light grey (#eee)

Add new comment

Restricted HTML

  • Allowed HTML tags: <a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • Lines and paragraphs break automatically.
  • Web page addresses and email addresses turn into links automatically.