gistfile1.txt

grid-padding = 1.5em

number-of-columns = 12

column-width = 100% / number-of-columns

media-tablet = "screen and (max-width: 800px)"
media-phone  = "screen and (max-width: 500px)"

*, *:after, *:before 
	-webkit-box-sizing border-box
	-moz-box-sizing border-box
	box-sizing border-box


.grid 
	width 100%
	max-width 1140
	margin 0 auto
	overflow hidden
	padding-left grid-padding
	[class*='col-'] 
		float left
		padding-right grid-padding
	
	&:after 
		content ""
		display table
		clear both
	
	&.-nopad 
		padding-left 0
		[class*='col-']:last-of-type 
			padding-right 0


.-t-show 
	display none

.-p-show
	display none

for num in 1..number-of-columns
	.col-{num}-{number-of-columns}
		width: column-width * num


@media media-tablet
	.-t-hide
		display none

	.-t-show
		display block

	for num in 1..number-of-columns
		.t-col-{num}-{number-of-columns}
			width: column-width * num


@media media-phone
	.-p-hide
		display none

	.-p-show
		display block

	[class*='col-']
		width 100%
		float none
		padding-right 0
		margin-top grid-padding
		margin-bottom grid-padding

	for num in 1..number-of-columns
		.p-col-{num}-{number-of-columns}
			width: column-width * num