Me encanta encontrar herramientas gratuitas que sean capaces de hacer mi trabajo (y el suyo) un poco más fácil. La comunidad de desarrolladores web rebosa positivamente de personas con talento que están más que dispuestas a compartir sus creaciones con el mundo sin pedir nada a cambio.
Hoy vamos a ver una herramienta de este tipo de Erskine Design llamada Gridpak. Con él, podemos generar rápida y fácilmente nuestra propia cuadrícula de respuesta para crear páginas web que funcionan bien en muchos tamaños de pantalla diferentes. Sin embargo, es un poco difícil de implementar, así que te ayudaremos a descubrir cómo configurar tus estilos después de descargar la descarga.
Este artículo es parte de nuestra serie sobre "mirar más allá del diseño de escritorio", presentado en colaboración con Heart Internet VPS.
Conoce a Gridpak
Como estoy seguro de que sabe, puede haber un poco de matemática involucrada en la creación de una cuadrícula simple que no responde y se vuelve mucho más compleja cuando comienza a modificar esa cuadrícula en varios puntos de ruptura. Si eres un diseñador que evita las matemáticas siempre que sea posible, abordar un proyecto de este tipo puede ser una tarea bastante intimidante.
Gridpak es una aplicación web gratuita que promete eliminar el dolor de crear tu propio sistema de cuadrícula sensible. Tampoco tiene que ajustarse a la estructura rígida de una cuadrícula construida por otra persona o tiene que trabajar demasiado para crear la suya. Con solo unos pocos clics y arrastrando las acciones, tendrá una plantilla de cuadrícula con una capacidad de respuesta impresionante que se ha creado según sus especificaciones.
Aunque Gridpak es muy fácil de usar, puede ser un poco confuso al principio si no sabes lo que estás haciendo. Cuando encontré el sitio por primera vez, hice clic durante bastante tiempo antes de sentir que realmente tenía una idea del proceso. Le mostraré cómo funciona todo para que pueda aprovechar esta práctica herramienta de forma rápida y eficiente en su flujo de trabajo.
Los controles
Cuando cargue por primera vez la página de Gridpak, verá una imagen de una cuadrícula de seis columnas. A la derecha de la cuadrícula hay una serie de controles. Aunque esto parece una cantidad modesta de configuraciones, el nivel de personalización disponible aquí es bastante completo.
Como puede ver, puede establecer rápida y fácilmente el número de columnas, así como el relleno y el margen, en porcentaje o en píxeles. El pequeño botón redondo con las flechas básicamente representa su ventana gráfica. Arrástrelo hacia la izquierda y hacia la derecha para ver cómo reaccionaría la cuadrícula al cambiar los tamaños de las vistas. También hay un botón para agregar un punto de interrupción, que veremos a continuación.
Indicador de punto de interrupción
En la parte inferior de la interfaz de usuario hay una regla de píxeles, así como un pequeño icono que indica que la cuadrícula predeterminada actual se aplicará en todo el continuo de tamaños de vista, desde cero hasta el infinito. Básicamente, esto significa que no se han agregado puntos de interrupción aún, por lo que la misma cuadrícula se aplica a todos los tamaños.
Añadiendo nuestro primer punto de interrupción
Ahora, todo el punto aquí es que desea que el marco subyacente básico para su sitio cambie y evolucione a diferentes tamaños de vista. La clave para usar esto es recordar pensar en su cuadrícula en términos de rangos, no solo puntos de interrupción. Una parte determinada de la configuración tendrá un rango de tamaños de vista posibles donde la cuadrícula estará activa.
El caso de uso típico es configurar una cuadrícula para cada tamaño de dispositivo móvil, tableta y escritorio. Configurar esto es fácil, simplemente arrastre el control deslizante a su ancho objetivo, agregue un punto de interrupción, deslice hasta el siguiente tamaño de destino, agregue otro punto de interrupción, etc.
Aquí coloco el control deslizante en 320 píxeles y agregué un punto de interrupción, luego lo puse a 480px y agregué otro punto de interrupción. A medida que arrastre el control deslizante, la cuadrícula se actualizará según la configuración que haya aplicado. Los rangos que ha configurado son evidentes en la parte inferior, con el rango actual resaltado en rojo.
El flujo de trabajo aquí es un poco torpe. El truco es asegurarse de tener seleccionado el rango adecuado. Entonces, cuando quiero ajustar mi configuración para 0-319px, agrego un punto de interrupción a 420px, luego muevo mi control deslizante hacia la izquierda un poco para asegurarme de que el rango esté activo.
Seguir adelante
Una vez que haya resuelto su cuadrícula para el primer rango de anchuras, agregue otro punto de interrupción, luego mueva el control deslizante un poco hacia atrás y establezca la cuadrícula para esa sección.
Aquí puede ver que he establecido una cuadrícula de tres columnas que se activará de 320-479px. Una vez que se establece esto, si muevo mi control deslizante hacia adelante y hacia atrás, puedo ver la actualización de la cuadrícula en vivo para las diferentes configuraciones de la ventana gráfica.
Para terminar, agregaré otra cuadrícula que ocupa el rango de 480-959 y una última que responde a cualquier cosa a 960px o superior.
La descarga
Una vez que haya resuelto sus grillas, es hora de descargar los archivos y ponerse a trabajar. La descarga es uno de los aspectos más impresionantes de toda la aplicación. Es realmente extenso y ofrece no solo un archivo CSS, sino también archivos LESS y SCSS, además de PNG de cuadrícula para Photoshop y un JavaScript para superponer la cuadrícula en su documento en vivo.
La página de información de Gridpak le informa todo sobre cada elemento incluido en la descarga, por lo que omitiré la redundancia y le permitiré verlo allí. Lo que es más importante es cómo implementar la cuadrícula en su propio trabajo, y lograr eso probablemente no sea tan fácil como espera. Vamos a sumergirnos y ver por qué.
Complicaciones de la rejilla
Ahora, la interfaz de usuario web hace que sea muy fácil configurar una buena parte de código personalizado que utiliza consultas de medios. Si echamos un vistazo a nuestro CSS, MENOS o SCSS, podemos ver claramente que las consultas de los medios fueron efectivamente generadas.
Aunque gran parte del trabajo de CSS está hecho para ti, definitivamente no has terminado. Es cierto que es bastante difícil implementar la cuadrícula de una manera útil.La razón de esto es, por supuesto, que el diseño receptivo puede ser bastante complicado, los sistemas de red pueden ser complicados, y cuando se combinan los dos, se obtiene mucha complejidad. Si realmente tienes un manejo de CSS, deberías poder averiguarlo, pero si eres bastante nuevo, es probable que tengas muchos dolores de cabeza. En consecuencia, recomiendo que este no debería Sé tu primera incursión en el diseño responsivo.
Cómo funciona
Ya que esto puede ser bastante complicado, y no hay mucha documentación disponible, intentaré explicarlo. Al igual que con cualquier sistema de cuadrícula CSS, Gridpak le brindará algunas clases creadas previamente para aplicar a su contenido. Sin embargo, el desarrollador recomienda que utilices tus propias clases semánticas y solo utilices las clases creadas previamente como guía.
Así que digamos que tienes un div que contiene tres párrafos de texto. ¿Qué clase deberías poner en ella? Esto es complicado porque puede querer que sea span_one y un punto y span_three en otro punto. Afortunadamente, ya hemos decidido usar nuestros propios nombres de clase para que sea un poco más fácil.
Si queremos llamar a nuestra sección de párrafos? Características ?, agregamos ese nombre de clase a cada uno de los párrafos de nuestro HTML y luego saltamos al CSS. Aquí buscamos primero el contenedor genérico CSS y asegúrese de agregar nuestra nueva clase para asegurarnos de que recoge esos estilos:
Luego entra en la consulta de medios específica y configura los estilos para su clase de características dentro de ese rango. Una vez más, deberá agregar la clase a las clases genéricas preexistentes:
A continuación, ingresa y agrega la clase al lado del intervalo específico que está tratando de hacer coincidir. En este tamaño de ventana gráfica, quiero que los tres párrafos aparezcan en una sola fila, así que agrego la clase de características junto a la clase span_2 (aquí hay una cuadrícula de seis columnas, por lo que tres dos son seis).
Esto hará que los tres párrafos aparezcan en una sola fila. Pero, ¿qué pasa cuando entramos en una vista diferente? Por ejemplo, en el tamaño más pequeño, tal vez queremos que los párrafos se apilen uno encima del otro al 100% de ancho. Una vez más, entramos y encontramos el intervalo que coincide con el ancho que buscamos, casualmente abarcamos nuevamente_2, y agregamos nuestra clase .features (no olvide agregarlo también a las clases genéricas).
También sin duda se encontrará con algunos problemas de margen al hacer esto (seguro que sí). Esto se debe a que los márgenes se restablecen solo después de cada fila? div, pero cuando cada párrafo ocupa el 100% del ancho, debemos eliminar los márgenes en todos ellos. En última instancia, espere un montón de ajustes necesarios.
También tenga en cuenta que span_2 no siempre será la opción adecuada para este ejemplo. Por ejemplo, si nuestra cuadrícula sube a 12 columnas en tamaño completo, probablemente queramos agregar la clase de características junto a la clase span_4, lo que garantizará que una vez más los tres párrafos ocupen todo el ancho.
¿Esto es útil?
Cuando obtuve mi primera descarga, esperaba que la implementación fuera bastante sencilla. Sin embargo, definitivamente tomó algo de tiempo envolver mi cabeza para que funcionara. Tal vez lo estoy complicando demasiado, pero parece que alguien con la habilidad suficiente para implementar Gridpak es probablemente lo suficientemente hábil para omitirlo por completo, mientras que alguien que necesita ayuda con un diseño sensible puede encontrar que el CSS es un poco complicado al final.
Honestamente, me encantaría ver que Gridpak se haya reconstruido como un generador personalizado para Skeleton Boilerplate, que tiene una cuadrícula sensible que es más versátil y más fácil de implementar.
Sin embargo, dicho esto, me divertí mucho jugando con Gridpak y definitivamente lo veo como una forma sólida de comenzar un proyecto receptivo siempre que sepas lo que estás haciendo. Como dije antes, no soy el mayor fanático de configurar consultas de medios basadas específicamente en tamaños de pantalla populares, pero ese es un argumento para un día diferente.
Me encantaría escuchar tus pensamientos. ¿Has usado Gridpak todavía para construir una página web? ¿Que piensas de eso? ¿Tiene un flujo de trabajo diferente y / o mejor que el mío anterior? Me encantaría escucharlo!