Foros del Web » Creando para Internet » CSS »

Less-Trapp Grid - CSS

Estas en el tema de Less-Trapp Grid - CSS en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 20/02/2013, 19:40
 
Fecha de Ingreso: febrero-2011
Mensajes: 13
Antigüedad: 11 años, 9 meses
Puntos: 5
Less-Trapp Grid - CSS

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:
Ver original
  1. .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:
Ver original
  1. .col ( 4 );
  2. .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
  #2 (permalink)  
Antiguo 21/02/2013, 04:11
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.487
Antigüedad: 20 años, 4 meses
Puntos: 2114
Respuesta: Less-Trapp Grid - CSS

En el RWD, ¿las columnas que no tienen sitio desaparecen? En la demo pasa eso, y es un poco raro que eso ocurra.
  #3 (permalink)  
Antiguo 21/02/2013, 07:43
 
Fecha de Ingreso: febrero-2011
Mensajes: 13
Antigüedad: 11 años, 9 meses
Puntos: 5
Respuesta: Less-Trapp Grid - CSS

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:
Ver original
  1. @media all and (max-width: 950px)  {
  2.         .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:
Ver original
  1. .grid_1 {
  2.     .grid-conf-fix ( 60px, 20px, 12 ); // <- Configuro el Grid
  3.     .col ( 12, auto ); // <- Defino el container con 12 columnas
  4.     background-color: @color_grid_gutter;
  5.     margin-top: 40px;
  6.     font-size: 16rem;
  7.     @timet: 0.3s;
  8.     transition: all @timet;
  9.  
  10.     h2 {
  11.         .col (12 , 1);
  12.         text-align: center;
  13.         background-color: white;
  14.  
  15.         span {
  16.             color: #aaa;
  17.         }
  18.         #content_grid:after  {
  19.             content: "Grid 960x";
  20.             color: @red_gh;
  21.         }
  22.     }
  23.  
  24.     div {
  25.         .col ( 1, 12 );
  26.         background-color: @color_grid_column;
  27.         height: 50px;
  28.     }
  29.  
  30.     @media all and (max-width: 950px)  {
  31.         .col ( 6, auto );  // <- Re-Defino el container con 6 columnas
  32.         font-size: 13rem;
  33.  
  34.         h2 {
  35.             .col ( 6 , 1 );
  36.             #content_grid:after  {
  37.                 content: "Grid 480x";
  38.                 color: @red_gh;
  39.             }
  40.         }
  41.         div {
  42.             .col ( 1, 6 );
  43.             &:nth-child(n+8) {  //<- Oculto los div sobrantes
  44.                 display: none;
  45.             }
  46.         }
  47.     }
  48.  
  49.     @media all and (max-width: 470px)  {
  50.         .col ( 3, auto );  // <- Defino el container con 3 columnas
  51.         font-size: 8rem;
  52.  
  53.         h2 {
  54.             .col ( 3 , 1 );
  55.             #content_grid:after  {
  56.                 content: "Grid 240x";
  57.                 color: @red_gh;
  58.             }
  59.         }
  60.  
  61.         div {
  62.             .col ( 1, 3 );
  63.             &:nth-child(n+5) { //<- Oculto los div sobrantes
  64.                 display: none;
  65.             }
  66.         }
  67.     }
  68. }

Saludos
  #4 (permalink)  
Antiguo 25/02/2013, 10:20
 
Fecha de Ingreso: febrero-2011
Mensajes: 13
Antigüedad: 11 años, 9 meses
Puntos: 5
Respuesta: Less-Trapp Grid - CSS

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

Etiquetas: ancho, grid, html
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta

SíEste tema le ha gustado a 3 personas




La zona horaria es GMT -6. Ahora son las 18:59.