Seamos realistas, el diseño responsivo es un trabajo duro. El diseño web era bastante difícil cuando solo estábamos considerando las plataformas de escritorio, pero el desafío de aparentemente infinitamente diferentes tamaños de pantalla y ventana de visualización realmente se agregó a la complejidad del diseño del sitio web.
Ya sea que sea completamente nuevo en diseño responsivo o se considere un experto en el área, la herramienta que veremos hoy lo dejará boquiabierto. Se llama Gridset y es increíble.
¿Qué es Gridset?
Gridset es un proyecto de Mark Boulton que actualmente se encuentra en fase beta y está dirigido a simplificar drásticamente el proceso de desarrollo y diseño web sensible.
Sin duda has visto muchas herramientas que hacen esta promesa. La cosa es que la mayoría son poco más que calculadoras de cuadrícula glorificadas. Gridset es diferente. En realidad, le brinda un conjunto de herramientas sólido que le permite construir y aplicar una cantidad de cuadrículas diferentes que están optimizadas para cualquier número de dispositivos.
Es difícil describir cómo y por qué Gridset es tan increíble, ¿por qué no le muestro un proyecto de muestra?
Crear un nuevo conjunto de cuadrícula
Cuando inicie sesión por primera vez en la aplicación, se le mostrará una lista de conjuntos de cuadrículas que ha creado en el pasado (no solo está construyendo una cuadrícula sino varias). Puedes elegir editar uno de estos o crear uno nuevo, yo crearé uno desde cero. Para ello, pulsa el? Nuevo set? botón y aplicar un nombre de su elección.
Después de esto, es hora de saltar y comenzar a construir su primera cuadrícula. Verá la pantalla a continuación, que le da la opción de elegir entre unas cuantas plantillas de cuadrícula predefinidas y construir su propia plantilla. Comenzaremos a construir el nuestro en el siguiente paso.
Configurar cuatro cuadrículas
Usando los controles básicos en el lado izquierdo de la pantalla, haremos cuatro cuadrículas diferentes: Escritorio A, Escritorio B, Mesa y Móvil. Tenga en cuenta que estas son selecciones realmente arbitrarias para este tutorial, siéntase libre de seguir su propio camino en las decisiones que tomamos a lo largo del artículo. Aún deberías poder seguirlo bien.
Esto creará cuatro cuadrículas de pizarra en blanco diferentes en la sección del centro primario, cada una de las cuales desearemos incluir y personalizar para nuestros propósitos.
Personaliza tu primera cuadrícula
Ahora es el momento de profundizar y ver cómo funciona esto. De manera predeterminada, debería ver algo como el ejemplo en la captura de pantalla a continuación como el estado predeterminado de una cuadrícula dada:
Esto no es realmente una cuadrícula todavía, sino que es simplemente una columna grande. Para personalizar la cuadrícula, usamos la serie de controles en la parte superior. Digamos que quería una cuadrícula de tres columnas con canales de 30px que se activen a 990px de ancho y más. Todo lo que tengo que hacer es escribir estos valores en los campos.
¿Cuál es el prefijo?
Hay un pequeño campo aquí que solicita un "prefijo de clase". ¿De que va todo eso? La respuesta es que, una vez que configura sus diferentes grillas usando Gridset, aplicarlas es tan fácil como pegar algunos nombres de clase en su HTML.
"Una vez que configura sus diferentes grillas usando Gridset, aplicarlas es tan fácil como pegar algunos nombres de clase en su HTML".Gridset te permite elegir exactamente cómo serán estas clases, aunque te limitan a tres caracteres, por lo que es probable que la semántica se sacrifique un poco aquí. El ejemplo típico es usar? D? para escritorio,? t? para tableta, y? m? para móvil Voy a construir dos cuadrículas de escritorio, así que usaré? Da? y? db? para mantenerlos separados.
Proporción y actualización
Ahora, solo porque usé tres columnas no necesariamente significa que quiero que se dividan de manera uniforme. Afortunadamente, Gridset te permite ajustar la proporción con un pequeño menú desplegable. Por cierto, quiero que la mía se divida en tercios, así que aceptaremos esa opción.
Una vez que haya terminado de ajustar todas las configuraciones, simplemente presione el botón de actualización para ver la actualización de la cuadrícula.
Como puede ver, la vista previa ahora muestra una cuadrícula de tres columnas que refleja la configuración que elegimos. Hay mucha flexibilidad adicional aquí si la necesitas. Intente hacer clic en una columna para ver y modificar sus configuraciones individualmente o hacer clic y arrastrar para reorganizar las columnas.
Configure sus otras rejillas
Ahora que hemos visto cómo configurar una cuadrícula, analicemos las otras tres. Para ilustrar cuán flexible puede ser Gridset, configuremos otra cuadrícula de escritorio, "db". Este será prácticamente el mismo, solo se dividirá en cuatro columnas en caso de que queramos dividir el contenido de la página en mitades o cuartos. No estamos configurando un nuevo ancho que deba tenerse en cuenta, solo otra cuadrícula dentro del mismo rango.
Para finalizar, configuraremos una cuadrícula de tabletas de 768 píxeles de ancho con canales de 20 píxeles y cuatro columnas, luego terminaremos con una red móvil de 320 píxeles de ancho con canales de 10 píxeles y dos columnas.
Una vez más, preste atención a los prefijos porque pronto serán importantes. Tomamos la ruta estándar y usamos? T? para tablet y? m? para móvil
También tenga en cuenta que cada columna individual está etiquetada en todas las cuadrículas: da1, db3, t2, etc. Estas representan ranuras específicas que podremos usar en nuestro código.
Usando las rejillas
Hasta este punto, Gridset se ha acercado a "ordenado". Pero no es indispensable. Es bueno tener algunas representaciones visuales de nuestras cuadrículas, pero ¿de qué sirve eso sin ayuda de implementación?
Aquí es donde Gridset realmente destruye la competencia. Para ver por qué, haga clic en? Usar? Botón en la parte superior de la barra de herramientas del lado izquierdo.
A partir de aquí, asegúrese de que tiene? Incrustar? seleccionado y verá un sencillo enlace de hoja de estilo que puede colocar directamente en su código. En mi caso fue el siguiente:
Esto significa que Gridset ha realizado el trabajo que he realizado en las cuadrículas, ha generado el archivo CSS necesario y lo aloja para que pueda realizar pruebas. Este archivo se actualizará automáticamente según sea necesario, así que si entro y hago un cambio en la cuadrícula, no tengo que tocar una sola línea de código. ¿Cuan genial es eso?
Otras golosinas
Hay otras tres pestañas en? Usar? sección también. ?¿Descargar? le permite descargar el CSS generado, por lo que no depende del sitio para alojar su archivo una vez finalizada la etapa de prueba. ?¿Engañar? le muestra todas las mediciones de las cuadrículas que construyó para que pueda codificar fácilmente su propio diseño utilizando los mismos números. El formato aquí es realmente bueno y lo alientan a imprimir un PDF de referencia.
?¿Acceso? le permite ingresar la dirección de correo electrónico de otro usuario que también le gustaría poder usar la cuadrícula. Esto es genial para cuando estás trabajando con un equipo.
Codificando un ejemplo
Ahora que hemos configurado todas nuestras cuadrículas, es hora de lanzar ese enlace de hoja de estilo en un archivo HTML y probar el diseño. La implementación aquí es extremadamente fácil, solo utilice las clases de cuadrícula que configuramos antes.
Digamos, por ejemplo, que teníamos dos divs, cada uno con un título y un párrafo. Al igual que:
Ahora imagina que queríamos dividirlos para que estuvieran en la misma fila, pero el primer div ocupó 2/3 del ancho de la página, dejando 1/3 para el segundo. ¿Usando nuestro? Desktop A? rejilla, nos gustaría agarrar el? da? prefijo.
Nuestro primer div se extendería a través de ambos? Da1? y? da2? columna, por lo que la clase que queremos aplicar es "da1-da2". Solo queremos que la segunda división ocupe la tercera columna, así que aquí simplemente escribiremos "da3".
Añadiendo las otras rejillas
Fácil verdad? Entonces, ¿cómo hacemos que este lechón responda? De eso se trata todo esto, ¡así que vamos a hacerlo! Todo lo que tenemos que hacer es agregar clases para las otras cuadrículas que configuramos.
Comience con la red móvil, luego trabaje hacia arriba. Quiero que el contenido se divida de manera uniforme tanto en la versión móvil como en la de tableta, así que configuro div one en? M1? y? t1-t2? y div dos a? m2? y? t3-t4?
Esto significa que cada div ocupará una columna en la vista móvil, luego saltará a dos columnas en la vista de tableta, luego saltará nuevamente a una división 2: 1 en la vista de escritorio. ¡Eso es un vudú de diseño elegante con muy poco trabajo!
Hagámoslo
De acuerdo, ahora que tenemos la idea de cómo funciona esto, vamos a programar una página de ejemplo completa con siete divs diferentes.