Zurb Foundation Sixteen Column Tweak

I’ve been using Zurb Foundation for a few weeks now and am pretty much sold on it. I love having all that robust functionality at my fingertips and the ease with which I can create a responsive website with particular attention to mobile layout.

The one thing that was bothering me was I couldn’t get the column widths to work with an existing site layout. The main issue was this site runs Google Adsense and the top revenue generating ads are 300px and 160px wide. Having little success with the twelve column grid and finding a solution I decided to get under the hood and see whether I could knock up a sixteen column layout.
Before continuing I’d like to point out this was a 20 minute fix and it may still come back to bit me in the arse. That said it seems to be working fine thus far and I haven’t had to hack any of the core files.

So here it is. This goes in the app.css file, which you use to set site styles and override foundation.css (Note this applies to Foundation 3, but I’m sure a similar fix could work for 4)

/* 16 Column mod
------------------------------------------------------------------------------------------------ */
 .one, .row .one { width: 6.25%; }
 .two, .row .two { width: 12.5%; }
 .three, .row .three { width: 18.75%; }
 .four, .row .four { width: 25%; }
 .five, .row .five { width: 31.25%; } 
 .six, .row .six { width: 37.5%; }
 .seven, .row .seven { width: 43.75%; }
 .eight, .row .eight { width: 50%; }
 .nine, .row .nine { width: 56.25%; }
 .ten, .row .ten { width: 62.5%; }
 .eleven, .row .eleven { width: 68.75%; }
 .twelve, .row .twelve { width: 75%; }
 .thirteen, .row .thirteen { width: 81.25%; }
 .fourteen, .row .fourteen { width: 87.5%; }
 .fifteen, .row .fifteen { width: 93.75%; }
 .sixteen, .row .sixteen { width: 100%; }

 .row .offset-by-one { margin-left: 6.25%; }
 .row .offset-by-two { margin-left: 12.5%; }
 .row .offset-by-three { margin-left: 18.75%; }
 .row .offset-by-four { margin-left: 25%; }
 .row .offset-by-five { margin-left: 31.25%; } 
 .row .offset-by-six { margin-left: 37.5%; }
 .row .offset-by-seven { margin-left: 43.75%; }
 .row .offset-by-eight { margin-left: 50%; }
 .row .offset-by-nine { margin-left: 56.25%; }
 .row .offset-by-ten { margin-left: 62.5%; }
 .row .offset-by-eleven { margin-left: 68.75%; }
 .row .offset-by-twelve { margin-left: 75%; }
 .row .offset-by-thireteen { margin-left: 81.25%; }
 .row .offset-by-fourteen { margin-left: 87.5%; }
 .row .offset-by-fifteen { margin-left: 93.75%; }

 /*** Push / pull ***/
	
	.push-two { left: 12.5%; }
	.pull-two { right: 12.5%; }
	.push-three { left: 18.75%; }
	.pull-three { right: 18.75%; }
	.push-four { left: 25%; }
	.pull-four { right: 25%; }
	.push-five { left: 31.25%; } 
	.pull-five { right: 31.25%; } 
	.push-six { left: 37.5%; }
	.pull-six { right: 37.5%; }
	.push-seven { left: 43.75%; }
	.pull-seven { right: 43.75%; }
	.push-eight { left: 50%; }
	.pull-eight { right: 50%; }
	.push-nine { left: 56.25%; }
	.pull-nine { right: 56.25%; }
	.push-ten { left: 62.5%; }
	.pull-ten { right: 62.5%; }
	.push-eleven { left: 68.75%; }
	.pull-eleven { right: 68.75%; }
	.push-twelve { left: 75%; }
	.pull-twelve { right: 75%; }
	.push-thireteen { left: 81.25%; }
	.pull-thireteen { right: 81.25%; }
	.push-fourteen { left: 87.5%; }
	.pull-fourteen { right: 87.5%; }
	.push-fifteen { left: 93.75%; }
	.pull-fifteen { right: 93.75%; }

Well that worked for me. Will update if it all falls apart…