HacheMuda

Blog personal de Guillermo Latorre

Resultados de la búsqueda de "":

Gridpak: espectacular generador de grids adaptables

Existen cientos de generadores de grids online para diseñadores o desarrolladores web. Su objetivo es crear una base sobre la que construir un layout de forma mucho más rápida, estándar y modular. Normalmente lo que obtienes de los generadores es un fichero HTML de ejemplo y un CSS, la hoja de estilos con la estructura de columnas y espacios ya codificada.

Gridpak: generador de grids responsive

Gridpak es otro generador de grids, pero lo he estado probando y probablemente sea el mejor que he usado hasta ahora. La página web del proyecto es súper simple, bonita y muy sencilla de utilizar. El código y los ficheros que te descargas están muy bien construídos, con comentarios, sugerencias y aclaraciones. Y, sobre todo, tiene una forma muy sencilla para configurar hojas de estilo responsive, que tengan la capacidad de adaptarse a las diferentes pantallas y dispositivos donde se está visualizando.

En Gridpak puedes personalizar el número de columnas de tu layout, su padding y el espacio entre ellas. Y vas viendo los cambios en directo sobre el visualizador del resultado. Este visualizador puedes hacerlo más ancho o más estrecho, te va informando en tiempo real del ancho sobre el que estás trabajando y te permite definir breakpoints. De esta forma, puedes ir marcando los puntos de cambio de resolución para que genere las media queries correspondientes.

Además, cuando generas tu grid, también descargas un fichero Javascript que puedes incluir fácilmente en tu HTML para activar o desactivar una capa semitransparente superpuesta con el grid, que puede resultar muy útil como guía visual durante el proceso de maquetación de la web. Y este overlay con el grid funciona perfectamente al redimensionar la ventana y hacer las pruebas de adaptación del layout.

Un proyecto base de Gridpak está formado por:

  • Un fichero CSS, con los estilos necesarios para el grid.
  • Un fichero LESS, la hoja de estilos en lenguaje LESS.
  • Un fichero Sass, la hoja de estilos en lenguaje Sass.
  • Un fichero Javascript para activar/desactivar la capa superpuesta con las columnas.
  • Varias imágenes PNG, una por cada intervalo de resolución configurado.
  • Un fichero README con las instrucciones de cómo usar el proyecto.

Enlaces: