Skip to content

Instantly share code, notes, and snippets.

@ZeroDragon
Last active November 11, 2023 18:39
Show Gist options
  • Save ZeroDragon/0e366c166dd8b949df0d to your computer and use it in GitHub Desktop.
Save ZeroDragon/0e366c166dd8b949df0d to your computer and use it in GitHub Desktop.
Este es un grid system para CSS

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.

.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)%
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)%
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment