Este es un grid system para CSS

README.md

Stylus Minimal Grid System

Un sistema de columnas para CSS, basado en 12 columnas, líquido, MVP.
Puede ser usado como semilla para extenderlo a diferentes resoluciones o páginas responsivas.

Por default el gap entre columnas es de 10px, pero se puede cambiar con la variable gap en la línea 2

## Update 2016-09-30 Agrego una versión modificada responsiva. Incluye la misma base a 12 columnas, reduje el gap a 8px Hice el grid a 5 saltos responsivos:

• XL = > 1200px
• L = > 960px < 1199px
• M = > 768px < 959px
• S = > 480px < 767px
• XS = < 479

Las columnas funcionan de la misma forma excepto en los tamaños S y XS que se hacen 100%.
También agregué un set de columnas con tamaño forzado, para poder especificar columnas en diferentes resoluciones colL#, colM#, colS#, colSX#.
Si se quieren ocultar o mostrar ciertos elementos en diferentes resoluciones, se pueden usar una serie de combinaciones de hideXL, hideL, hideM, hideS o hideXS.

demo.jpg

grid.styl

.grid
	gap = 10
	display block
	padding 0 30px
	.row
		display block
		font-size 0
		
		div[class^="col"]
			font-size 12px
			display inline-block
			padding 0 (gap/2)px
			box-sizing border-box
			vertical-align top
		div[class^="col"]:first-child
			padding-left 0
		div[class^="col"]:last-child
			padding-right 0
		
		for i in (1..12)
			.col{i}
				width ((i*100)/12)%

grid_responsivo.styl

gap = 8

.grid
	display block
	margin auto
	padding 0
	box-sizing border-box
	.row
		display block
		font-size 0
		
		&>div[class^="col"]
			font-size 14px
			line-height 100%
			display inline-block
			padding 0 (gap/2)px
			box-sizing border-box
			vertical-align top
		&>div[class^="col"]:first-child
			padding-left 0
		&>div[class^="col"]:last-child
			padding-right 0
		
		for i in (1..12)
			&>.col{i}
				width ((i*100)/12)%

// Responsive stuff
//XL
@media screen and (min-width: 1200px)
	.grid
		width 1200px
		padding 0 (gap)px
	.hideXL
		display none!important
//L
@media screen and (min-width: 960px) and (max-width: 1199px)
	.grid
		width 960px
		padding 0 (gap)px
	.hideL
		display none!important
	for i in (1..12)
		.grid .row>.colL{i}
			width ((i*100)/12)%
//M
@media screen and (min-width: 768px) and (max-width: 959px)
	.grid
		width 768px
		padding 0 (gap)px
	.hideM
		display none!important
	for i in (1..12)
		.grid .row>.colM{i}
			width ((i*100)/12)%

// S & XS
@media screen and (max-width: 767px)
	.grid .row
		&>div[class^="col"]:first-child
			padding-left (gap/2)px
		&>div[class^="col"]:last-child
			padding-right (gap/2)px
		for i in (1..12)
			&>.col{i}
				width 100%			

//S
@media screen and (min-width: 480px) and (max-width: 767px)
	.grid
		width 480px
		padding 0 (gap)px
	.hideS
		display none!important
	for i in (1..12)
		.grid .row>.colS{i}
			width ((i*100)/12)%
//XS
@media screen and (max-width: 479px)
	.grid
		width 300px
	.hideXS
		display none!important
	for i in (1..12)
		.grid .row>.colXS{i}
			width ((i*100)/12)%