Uno de los generadores de cuadrícula de respuesta más interesantes y útiles es una herramienta llamada Gridpak, que le permite usar una interfaz de usuario simple y divertida para crear cuadrículas fluidas basadas en consultas de medios. Revisamos Gridpak hace alrededor de un año y llegamos a la conclusión de que, aunque era útil, se quedó corto en el área de la facilidad de uso cuando se trató de implementar el código.
Los desarrolladores han hecho algunos progresos en esta área y creo que es hora de que echemos otro vistazo. Únase a nosotros para profundizar en cómo Gridpak ha mejorado su oferta y estructura de código para proporcionar una experiencia mejor y más ágil para los usuarios.
Conoce a Gridpak
Gridpak ha aparecido en varios redondos de herramientas de diseño web, por lo que probablemente lo haya encontrado una o dos veces. Aquí hay una captura de pantalla para refrescar su memoria:
En caso de que no hayas leído nuestro último artículo, lo que estás viendo aquí es una representación visual de tu cuadrícula. El gráfico principal en el centro muestra las columnas, el relleno y la canalización según su entrada y el rango seleccionado actualmente. Repasemos brevemente cómo funciona esta herramienta.
Añadiendo puntos de interrupción
Para comenzar, tome el círculo grande a la derecha que contiene dos flechas y arrástrelo hacia la izquierda o hacia la derecha. Verás toda la cuadrícula y expandirás mientras haces esto. En la parte inferior, encontrará un indicador que le indica el ancho actual. Una vez que llegue a un punto en el que desee insertar un nuevo punto de interrupción, presione "Agregar punto de ruptura". botón.
A medida que avanza en la configuración de puntos de interrupción, la parte inferior de la interfaz de usuario se dividirá en diferentes secciones, que sirven como rangos de anchos de ventana gráfica. En la captura de pantalla de abajo, puedes ver que mi primer rango va de 0 a 319px, momento en el que hay un punto de interrupción, creando una nueva sección que se extiende de 320px a 479px. Continuamos este proceso hasta que se tengan en cuenta todas las consultas de medios de su diseño.
Pellizcando la rejilla
Observe en la captura de pantalla anterior que, cuando mi ancho actual está dentro de un rango determinado, ese rango se resalta en rojo en la parte inferior. Esto significa que puedo entrar y establecer la configuración de cuadrícula específica para ese rango. Para hacer esto, uso las herramientas simples en el extremo derecho de la página.
Aquí podemos establecer el número de columnas, el relleno y el ancho del canal para cada sección. Simplemente arrastre su cuadrícula para resaltar cada sección, luego configure su cuadrícula para esa sección, haciéndola tan diferente como quisiera de todas las demás secciones. Por ejemplo, su cuadrícula móvil puede tener solo una o dos columnas, mientras que la cuadrícula de su escritorio tiene doce.
La descarga
Una vez que haya terminado de configurar su cuadrícula en Gridpak, estará listo para descargar sus archivos. En esta ocasión, te darás cuenta de que tenemos algunos archivos más para trabajar:
Como mencioné anteriormente, anteriormente les di a los desarrolladores un tiempo difícil porque, en este punto, la diversión había terminado y Gridpak se volvió muy difícil de usar. Sin embargo, parece que han mejorado la experiencia al enfocarse en tres cosas principales:
- Una demostración totalmente funcional: Esto es absolutamente clave. La última vez que vimos Gridpak, no se incluyó una demostración, lo que nos permitió resolver las cosas por nosotros mismos. Tener esto a mano significa que podemos profundizar en un ejemplo que está correctamente configurado y aprender cómo funcionan las cosas. Creo que así es como la mayoría de los desarrolladores aprenden, por lo que ofrece una experiencia mucho mejor para los usuarios de Gridpak por primera vez.
- ¿Mejor? ¿README? expediente: El? Reme? El archivo parece haber mejorado mucho también. Le guía a través de cada parte de la descarga y, de hecho, lo pone en el camino correcto sobre cómo trabajar con las clases pre-construidas en su archivo CSS.
- Amplios comentarios: Además de las instrucciones en "README", y quizás aún más útiles, son los comentarios que encontrará dispersos en los distintos archivos de código. Los desarrolladores se han preocupado de explicar cada pieza del rompecabezas a medida que avanzan, de modo que no importa dónde se encuentre en un archivo, hay una buena descripción de lo que está sucediendo para ayudarlo a trabajar con lo que le han dado.
En general, los responsables de Gridpak no han cambiado nada en cuanto a la forma en que funciona, pero las mejoras que han hecho al difundir información e instrucciones útiles para el usuario hacen que la herramienta sea mucho más accesible y fácil de usar.
Usando el codigo
La última vez, solo mencioné brevemente cómo funciona el sistema Gridpak. Con más soporte informativo que nunca, me gustaría profundizar un poco más para que pueda estar seguro de que sabe exactamente cómo funciona todo y que puede usar esto en un proyecto con bastante rapidez.
Las piezas
En su descarga se incluirán una serie de archivos CSS (CSS, LESS y SCSS), así como un puñado de imágenes y un archivo JavaScript. La demo también tiene un archivo HTML para referencia.
Las imágenes y el archivo JavaScript son simplemente para crear una superposición de cuadrícula para que pueda ver cómo funcionan sus columnas. Cada sistema de cuadrícula tiene uno de estos y, francamente, nunca los uso, así que los desecharé y me centraré en las piezas reales que utilizará para su flujo de trabajo de desarrollo.
El HTML
Lo primero que querrás hacer es configurar tu propio archivo HTML. Codifique la sección de su cabeza como de costumbre, luego comience el marcado de esta manera:
¿Todo lo que crees será arrojado dentro de esta página? div, que esencialmente sirve como un contenedor que centra el contenido en la página.
A continuación, dividirá todo su contenido en filas. Para hacer esto, cada elemento de la página se lanzará a un div con una clase de "fila". Tendrás varios de estos:
Dentro de la fila, puedes colocar tu contenido normal, como siempre. Asegúrate de usar el? Col? clase en cada parte del contenido, que esencialmente aplica los estilos de columna globales.
Nombres de clase semántica
Después de aplicar el? Col? clase, eres libre de aplicar un nombre de clase semántica. No hay necesidad de usar nombres de clase divertidos como? 1-3-6? o? m1 ?, use algo descriptivo que comunique exactamente qué es y qué hace esa sección. Aquí hay un ejemplo con un encabezado:
Si expandimos esto un poco para incluir algunas secciones diferentes, así es como se vería nuestro código. Observe los nombres de clase claros y descriptivos y la inclusión de? Col? en cada div.
SCSS
La última vez que vimos Gridpak, nos metimos en el CSS simple. Para cambiar las cosas, veamos el archivo SCSS esta vez, porque Sass es increíble y probablemente deberías rendirte y usarlo ya.
Tres mixins
Para comprender completamente lo que está sucediendo en el archivo SCSS, debe envolver su mente en torno a tres mixins incluidos: col, span y span_first.
columna
La primera mezcla que encontramos es "col", que usaremos para ayudar a definir esos "col". Clases que vimos en el HTML anterior.
He dividido esto en tres secciones para que pueda ver fácilmente lo que está pasando. La primera parte hace flotar las columnas y agrega un borde transparente a cada una. A continuación, configuramos el tamaño de la caja y el clip de fondo. Estos ayudan a manipular el modelo de caja en algo un poco más amigable en lo que se refiere a matemáticas.
Esta mezcla se implementa con bastante facilidad, simplemente se lanza directamente a la columna? clase. También colocará cualquier estilo de columna adicional que desee aplicar aquí.
lapso
El siguiente es el? Lapso? mezclar Aquí es donde se realiza toda la matemática de fantasía para averiguar los diferentes anchos posibles.
Este fragmento de código puede ser muy confuso debido a las variables, así que echemos un vistazo a cada uno de estos y veamos qué hace.
- $ num: Cuando implementemos esto más adelante, le diremos a la mezcla en qué columna estamos. Si estamos configurando la primera de las tres columnas, esto se establecerá en 1.
- $ gutter_pc: El canalón, expresado en porcentaje.
- $ gutter_px: El canalón, expresado como un valor de píxel.
- $ relleno El relleno, expresado como un valor de píxel o porcentaje.
- $ max_columns: El número de columnas en nuestro conjunto de cuadrícula activo actualmente. Puede establecerse en 1 para la red móvil y 12 para el escritorio.
- $ one_col: El ancho de una sola columna, calculado automáticamente.
Esto puede sonar como una gran cantidad de trabajo, configurando estas variables cada vez que cree una nueva consulta de medios, pero recuerde que esta tarea ya está terminada. La configuración que ingresamos en la interfaz de usuario en los primeros pasos anteriores definirá la configuración de estas variables en cada punto de interrupción o rango.
span_first
Esto se aplica al primer tramo en cada rango. Se despeja el margen izquierdo en la primera columna.
Usando Sus Rejillas
Salido de Gridpak, encontrará una sección de su CSS o SCSS dedicada a cada uno de los rangos que estableció. Cada sección está muy bien comentada para que sepas lo que está pasando. Aquí está uno de mis rangos, sin ningún código adicional agregado por mí:
Como puede ver, la sección está encabezada por un comentario que nos indica el rango que estamos viendo (0-319px), así como los intervalos que encontraremos en este rango. Parece que este es nuestro rango móvil, por lo que encontraremos dos vanos, uno al 48% y otro al 100%. El intervalo del 48% cubre una columna y el intervalo del 100% cubre todas las columnas.
Los márgenes y el relleno apropiados se aplican a nuestro? Col? clase, entonces se establecen las variables para nuestro span mixin. Nuevamente, estos valores se insertan automáticamente en función de lo que hizo en la aplicación web. Aquí podemos ver el resultado de este proceso:
A continuación, la primera columna se da nuestro? Span_first? Mezclando para despojar ese margen izquierdo.
Por último, cada uno de los anchos de intervalo se establece utilizando el? Intervalo? Mezcla con las variables anteriores como entrada.
Ahora, esta es la parte donde realmente tenemos algo de entrada manual que hacer. Para establecer los anchos de las distintas piezas en nuestro HTML, simplemente agregamos los nombres de clase con el intervalo apropiado.
Por ejemplo, si queremos que nuestro contenido principal y destacado sea para cada una de las columnas, que ocupa aproximadamente la mitad de la página, agregaremos sus nombres de clase con "span_1". Queremos que nuestro encabezado se extienda a lo largo de toda la página, así que lo lanzamos con "span_2", que se extiende a lo largo de toda la página.
Eso es realmente todo lo que hay que hacer! Todo lo que tiene que hacer es repetir este proceso rápido de agregar clases para cada uno de los rangos que configuramos en la aplicación web.
Por ejemplo, digamos que saltamos a nuestra sección de escritorio y contiene doce intervalos posibles. Aquí queremos que el encabezado ocupe un ancho del 100%, el contenido destacado ocupe un tercio del ancho y el contenido principal ocupe 2/3 del ancho. Agregaremos el encabezado? clase a? span_12 ?, el? maincontent? clase para? span_9? y el? aparece? clase a? span_3 ?.
Aquí hay un vistazo a los anchos que este código aplicaría a cada una de estas secciones. Con muy poco esfuerzo, tenemos una pequeña cuadrícula de contenido:
Simplemente continúe configurando cada rango, luego redimensione su ventana y verá que su contenido se adapta automáticamente. Si desea verlo en acción, consulte la página de demostración que se incluye con cada descarga de Gridpak.
Conclusión
Después de pasar un tiempo con Gridpak desde mi primera revisión, pensé que era necesario volver a visitar esta herramienta y decir que, de hecho, creo que es bastante útil como punto de partida para el diseño receptivo. La documentación y los comentarios actuales lo guiarán a través de todo lo que necesita saber, reduciendo considerablemente la curva de aprendizaje.
Si va a utilizar la versión SCSS como lo hice anteriormente, tendrá un marco bastante conciso y flexible para comenzar y necesitará muy poco esfuerzo para que su contenido se adhiera a los diversos puntos de ruptura. Definirlos con la interfaz de usuario web es definitivamente más fácil que codificarlos a mano.
Todavía tengo un problema con la idea de comenzar con consultas de medios e insertar contenido en lugar de crear consultas de medios como clientes potenciales, pero siempre que comience con la estructura HTML correcta, podría trabajar de esta manera sin dejar de utilizar Gridpak. .
Deja un comentario a continuación y hazme saber lo que piensas de Gridpak. ¿Consideraría usarlo como punto de partida para su próximo proyecto de diseño receptivo? ¿Qué otras herramientas útiles de RWD ha encontrado recientemente?