The Persistant Grid

gistfile1.txt

/* Padding stuff */
.col {
	@include box-sizing('border-box');
	padding-left: $columnPadding / 2;
	padding-right: $columnPadding / 2;
	&[class*="collection"],
	&.parent {
		padding-left: 0;
		padding-right: 0;
		/* Experimental */
		>*:not(.col) {
			padding-left: $columnPadding / 2;
			padding-right: $columnPadding / 2;
		}
	}
}

/* Shortcuts */
[class*="collection"] > * {
	@extend .col;
}
.collection-of-twelfths > * {
	@extend .col.twelfth;
}
.collection-of-sixths > * {
	@extend .col.sixth;
}
.collection-of-fourths > * {
	@extend .col.fourth;
}
.collection-of-thirds > * {
	@extend .col.third;
}
.collection-of-halfs > * {
	@extend .col.half;
}
.collection-of-twothirds > * {
	@extend .col.twothird;
}
.collection-of-fulls > * {
	@extend .col.full;
}

persistant-grid-gist

/* The base grid */
.root { display: block; margin: 0 20px; }

@media screen and (min-width: 1360px) {
  .root { max-width: 1280px; margin: 0 auto; }
}

.col { width: 33.333333%; display: inline-block; margin-right: -0.5em !important; vertical-align: top; }

.col.twelfth { width: 8.333333%; }
.col.sixth { width: 16.666667%; }
.col.fourth { width: 25%; }
.col.third { width: 33.333333%; }
.col.half { width: 50%; }
.col.twothird { width: 66.666667%; }
.col.full { width: 100%; }

@media screen and (max-width: 767px) {
  .col:not(.persistent) { width: 100%; }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .col { width: 50%; }
}
@media screen and (min-width: 1280px) and (max-width: 1679px) {
  .col { width: 25%; }
}
@media screen and (min-width: 1680px) {
  .col { width: 16.666667%; }
}