Less-Trapp Grid - CSS

[Maykk]

Buenas noches.
Quisiera compartir con ustedes mi trabajo.
Esta semana he terminado un framework desarrollado en LESS para hacer Grillas de CSS.

https://github.com/Less-Trapp/Grid

http://less-trapp.github.com/Grid/index.html

Es simple, se pueden anidar columnas, Se puede hacer responsive de forma muy fácil.

Lo que mas me gusta es que se pueden usar múltiples grillas en una misma pagina con solo volver a llamar la función.

Código CSS:

.col ( 60px, 20px, 12);
 

Esta linea nos crea una Grilla de 12 columnas de 60px de ancho y espaciado de 20px.
Ahora no es sino empezar a llamar columnas y para esto hay varias maneras.

Código CSS:

.col ( 4 );
.col ( 4, 3 );
 

La documentación no la he terminado, pero en la pagina hay varios ejemplos de como usarlo, tanto el código HTML con el código LESS.

Espero les sirva y si están interesados en aprender mas, con mucho gusto contacten conmigo y les ayudo.

También recibo sugerencias y colaboración con el proyecto.

Saludos

[pzin]

En el RWD, ¿las columnas que no tienen sitio desaparecen? En la demo pasa eso, y es un poco raro que eso ocurra.

[Maykk]

Esa parte es hecha con media querys, el framework no hace desaparecer ningun div, eso seria un error, porque los diseñadores despues perderian sus bloques de infromacion.

Lo que hace el framework en este caso es redefinir el nuevo grid en cada media query:

Código CSS:

@media all and (max-width: 950px)  {
        .col ( 6, auto );
 

que no tenga un contenedor de 12 sino de 6 y después de 3, los divs extras los oculto.

Aqui te paso el codigo completo que use para esa seccion:

Código CSS:

.grid_1 {
    .grid-conf-fix ( 60px, 20px, 12 ); // <- Configuro el Grid
    .col ( 12, auto ); // <- Defino el container con 12 columnas
    background-color: @color_grid_gutter;
    margin-top: 40px;
    font-size: 16rem;
    @timet: 0.3s;
    transition: all @timet;
 
    h2 {
        .col (12 , 1);
        text-align: center;
        background-color: white;
 
        span {
            color: #aaa;
        }
        #content_grid:after  {
            content: "Grid 960x";
            color: @red_gh;
        }
    }
 
    div {
        .col ( 1, 12 );
        background-color: @color_grid_column;
        height: 50px;
    }
 
    @media all and (max-width: 950px)  {
        .col ( 6, auto );  // <- Re-Defino el container con 6 columnas
        font-size: 13rem;
 
        h2 {
            .col ( 6 , 1 );
            #content_grid:after  {
                content: "Grid 480x";
                color: @red_gh;
            }
        }
        div {
            .col ( 1, 6 );
            &:nth-child(n+8) {  //<- Oculto los div sobrantes
                display: none;
            }
        }
    }
 
    @media all and (max-width: 470px)  {
        .col ( 3, auto );  // <- Defino el container con 3 columnas
        font-size: 8rem;
 
        h2 {
            .col ( 3 , 1 );
            #content_grid:after  {
                content: "Grid 240x";
                color: @red_gh;
            }
        }
 
        div {
            .col ( 1, 3 );
            &:nth-child(n+5) { //<- Oculto los div sobrantes
                display: none;
            }
        }
    }
}
 

Saludos

[Maykk]

He preparado un pequeño video de como usar Less-Trapp Grid, no es un tutorial y bueno espero se entienda, cualquier pregunta con mucho gusto la respondo.
Saludos

http://www.youtube.com/watch?v=H7-1hBY6-iU