gridpak

Generador de Grids Responsive – Gridpak

Desde mediados del año pasado Ethan Marcotte en A List Apart publico un artículo sobre diseño web responsivo “Responsive Web Design” sobre que la web no debia tener las mismas limitaciones de una página impresa y que el diseño de esta debia ser más flexible.

El problema

Los grandes desafíos y problemas surgen inevitablemente a la hora de adoptar nuevas ideas y formas de trabajar. Uno de los principales obstáculos que encontramos era como una agencia podia ser eficiente y rentable aplicando uno de los ingredientes fundamentales del diseño responsivo: un diseño flexible basado en grids.

Esto es lo que nuestro diseño típico y ciclo de desarrollo usado para crear un sitio web responsivo o adaptable con un sistema de grids flexible que se use para parecerse a:

  1. Crea 3 o 4 tamaños de grids diferentes en Fireworks para utilizarlos como una referencia en la etapa de wireframes / diseño.
    gridpak 1 Generador de Grids Responsive   Gridpak
    Crea múltiples grids, para pantallas de escritorio, tablets, smartphone.

  2. Volver a crear las mismas grids con las extensiones del navegador (no mencionaremos nombres) o escribir algo de código JavaScript que nos permita superponer nuestras capas de grids (exporta como semi-transparentes PNG) en el navegador.
    gridpak 2 Generador de Grids Responsive   Gridpak
    Recreando las mismas grids en el navegador.

  3. Escribir con LESS las hojas de estilo esto requiere algo de matemáticas, pero aún requería que todos los valores base y las fórmulas para el cálculo del ancho de las grids.
    gridpak 3 Generador de Grids Responsive   Gridpak
    Calculando los anchos en porcentaje y escribir CSS con el fin de hacer que nuestro sitio web y las grids responsive.

Hubo 2 inconvenientes importantes de este enfoque:

  1. Le tomó mucho tiempo crear las grids, crearlas en formato gráfico estático, entonces producen largas lineas de LESS.
  2. No pudo visualizar las grids hasta que fueron construidas (que ironía).

En ese momento, la mayoría de los frameworks de grids adaptables lo llevan a un rincón: usted estaba obligado a usar un número predeterminado de columnas, paddings, espacios dependiendo el dispositivo. Sentimos que esto socava el espíritu de una metodología que fue por su propia naturaleza flexible.

También sentimos que los generadores existentes carecían de la información visual que se requiere: estábamos desesperados por ver cómo nuestras grids iban a reaccionar cuando se encogiera y se estirara.

Solución

Así que en una tarde, insatisfecho con nuestro propio proceso, ya que estábamos con las soluciones disponibles, comenzamos a hecharle lapiz al papel con el objetivo final de crear un generador de grids responsive que:

  1. Ofrecer una verdadera flexibilidad:

    La interfaz permite al usuario ajustar la cantidad de columnas en cada cuadrícula, el padding y el gutter, ya sea en pixeles o en porcentajes, y donde se producen los cambios de grids dependiendo del tamaño de pantalla del dispositivo.

  2. Permite al usuario visualizar un sistema de grids responsive o adaptables:

    El usuario puede cambiar tipos de grids y editarlas en tiempo real utilizando el sistema de tabs. Se puede ver de inmediato cómo reaccionaran las grids.

  3. Agilizar el proceso de diseño y desarrollo:

    Gridpak se genera en todos los formatos de archivo necesarios para hacer una ejecución rápida a un proyecto responsive. Son fáciles de extender. Los formatos de archivo vienen perfectamente empaquetados dentro de un archivo zip que incluye tabs.:

    • PNG con capas de cada tipo de grids que el usuario haya creado para su uso en su programa de diseño de su elección.
    • Un archivo demo en HTML
    • Archivos LESS, SCSS y SASS con el mismo propósito, pero con el poder de agregar variables y mixins.
    • Un snippet JavaScript que permite al usuario superponer sus grids en cualquier navegador con la tecla “G”.
    • Un archivo readme.txt con un poco más en profundidad la documentación.

gridpak 4 Generador de Grids Responsive   Gridpak

La sencilla interfaz hace que sea fácil de visualizar, crear y editar su sistema de red de respuesta.

Hojas de estilo CSS

Gridpak no está realmente destinado a ser un framework de diseño. A pesar de sus hojas de estilo. Es por eso que sólo contienen información que es esencial para el sistema grids.

Tuvimos un problemita con las consultas de los medios en los diseños basados ​​en grids cuando el número de columnas que han cambiado entre los tamaños de dispositivo. Para resolver este problema, se evitó el uso de la clase marcado con el nombre “span_x”, y se prefiere utilizar nombres más semánticos como “news_item”. A continuación, añade los nombres de las clases semánticas para gridpak.css , justo al lado de su contraparte:

.span_1, .span_2, .span_3,
.news_item {
    margin-left:2%;
    padding:0 1.5%;
    ...
}

.span_6,
.news_item {
    ...
}

De esta manera, nuestro marcado no está atado al CSS ni son elementos asociados a los tamaños de los tipos de dispositivo. Es una forma mucho más escalable de hacer las cosas. La aplicación es mucho más abierta a estos cambios de tamaños de pantalla, y esperamos a ver cómo la gente lo aplica a sus propios proyectos.

Gridpak utiliza media queries, y las propiedades box-sizing y background-clip. Estas propiedades CSS3 son compatibles con todos los navegadores modernos, así como IE8, pero le recomendamos utilizar un servicio de detección de estos navegadores como Modernizr para detectar estos tipos de navegadores.

Ayúdenos y le ayudamos

gridpak 5 Generador de Grids Responsive   Gridpak

Próximamente: la funcionalidad de línea de base y la capacidad de modificar la posición de los puntos donde cambian las resoluciones de pantalla después de haberlas creado.

En fin estas son algunas de las caracteristicas más interesantes de este magnifico generador de grids responsive o adaptables.

Etiquetas: , , ,

1 Respuesta a “Generador de Grids Responsive – Gridpak”

  1. pembe180 2 junio, 2013 en 15:14 #

    Yo tengo una pregunta.

    En Gidpak uno toma las resoluciones y le da Add break point hasta llegar a lo deseado, pero mi pregunta es como hacer para que no choquen las medidas si un Smartphone mide

    320px *480px iphone 3gs
    1080px *1600px galaxy 4

    y una tablet mide

    600px*1024 galaxy tab
    2560px*1600 nexus 10

    yo como cuadraría las resoluciones en porcentajes si lo mas grande que quiero tener son 1200px y que comience a bajar hasta llegar a los Smartphone?

    o cuales son los media query para Smartphone y tablet de que rango a que rango se usan?

    Gracias.

Deja un comentario