I’m just now getting around to publishing some of the helpers I’ve created recently that I found useful (and maybe you will, too).

So, to start: Columns. Almost all of my projects end up needing some combination of columns (without the hassle of grid frameworks), and since I’ve been building responsive sites, I needed to create something simple and reusable to solve my responsive column problem so that content would flow nicely from mobile to desktop.

I found that I rarely used anything above 4 columns, so if you need more than that you’ll see a method to the madness below. I’ve based my media query breakpoints on the Frameless grid (mobile, wide mobile, tablet, widescreen) and I keep my column-collapsing relative to the number of columns (i.e., I don’t flow a 3 column layout into 2, but I do flow 4 into 2).

Having variable gutter spacing between projects was always necessary, so simple set columnGutter to whatever spacing size/unit you prefer and have at it.

Below is the Sass syntax, but for those interested in LESS, see this gist for both options.

Sass Syntax

/* Media Queries Assume: 1em = 16px */

/* ================================================= */
/* Helpers
/* ================================================= */
.clearfix{*zoom: 1;&:before,&:after{display:table;content:"";}&:after{clear:both;}}

@mixin box-sizing( $boxmodel ) {
	-webkit-box-sizing: $boxmodel;
	   -moz-box-sizing: $boxmodel;
	    -ms-box-sizing: $boxmodel;
	        box-sizing: $boxmodel;
}

/* ================================================= */
/* Columns
/* ================================================= */
$columnGutter : 20px;

.columns{
	list-style: none;
	margin:0;
	padding:0;
	width:100%;
	@extend .clearfix;

	img,
	input,
	select,
	textarea{
		max-width: 100%;
	}

	& > .column{
		float:left;
		width:100%;
		@include box-sizing(border-box);
	}
	&.two > .column,
	&.col-2 > .column{
		&:nth-child(odd){
			clear: left;
		}
	}
	&.three > .column,
	&.col-3 > .column{
		&:nth-child(3n+1){
			clear: left;
		}
	}
	&.four > .column,
	&.col-4 > .column{
		&:nth-child(4n+1){
			clear: left;
		}
	}
}

/* ================================================= */
/* Mobile layout
/* 240–479 px
/* ================================================= */
@media screen and (min-width: 15em) { /** 16px * 15 = 240px **/
	.columns{
		& > .column{
			margin-bottom: $columnGutter;
		}
	}
}

/* ================================================= */
/* Wide mobile layout
/* 480-599 px
/* ================================================= */
@media screen and (min-width: 30em) { /** 16px * 30 = 480px **/ }

/* ================================================= */
/* Tablet layout
/* 600-959 px
/* ================================================= */
@media screen and (min-width: 37.5em) { /** 16px * 37.5 = 600px **/
	.columns{
		& > .column{
			margin-bottom: $columnGutter * 1.5;
		}
		&.two > .column,
		&.col-2 > .column,
		&.four > .column,
		&.col-4 > .column{
			padding-left: 0;
			padding-right: $columnGutter * (1/2);
			width: 50%;

			&:nth-child(even){
				padding-left: $columnGutter * (1/2);
				padding-right: 0;
			}
		}
	}
}

/* ================================================= */
/* Widescreen layout
/* 960-1079 px
/* ================================================= */
@media screen and (min-width: 60em ) { /** 16px * 60 = 960px **/
	.columns{
		&.three > .column,
		&.col-3 > .column{
			padding-left: $columnGutter * (2/3);
			width: 33.3333333333333%;

			&:first-child,
			&:nth-child(3n+1){
				padding-left: 0;
				padding-right: $columnGutter * (2/3);
			}
			&:nth-child(3n+2){
				padding-left: $columnGutter * (1/3);
				padding-right: $columnGutter * (1/3);
			}
		}

		&.four > .column,
		&.col-4 > .column{
			padding-left: $columnGutter * (3/4);
			width: 25%;

			&:first-child,
			&:nth-child(4n+1){
				padding-left: 0;
				padding-right: $columnGutter * (3/4);
			}
			&:nth-child(4n+2){
				padding-left: $columnGutter * (1/4);
				padding-right: $columnGutter * (2/4);
			}
			&:nth-child(4n+3){
				padding-left: $columnGutter * (2/4);
				padding-right: $columnGutter * (1/4);
			}
		}
	}
}