Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. HTML & CSS

Cuadrículas receptivas con Susy

by
Read Time:10 minsLanguages:

Spanish (Español) translation by Steven (you can also view the original English article)

¿Estás satisfecho con alguna de las bibliotecas de cuadrícula CSS disponibles? ¿No? No te culpo Ingresa a Susy, un complemento para el framework CSS de Compass que te permite crear tu propio framework de cuadrícula personalizado, minimizando los gastos generales y haciéndolo más comprensible de usar. Suena bien, ¿verdad? Vayamos al grano.

No voy a profundizar mucho en Compass o SCSS (el idioma en el que escribe el CSS), pero no dudes en consultar nuestro curso Premium de CSS mantenible con Sass y Compass, si deseas obtener más información sobre ellos.


Preparando el escenario

Puedes crear tres tipos diferentes de cuadrículas: estática, fluida y mágica.

Las bibliotecas de cuadrículas populares de hoy parecen quedarse cortas de una forma u otra. Las cuadrículas como 960 y Blueprint son cuadrículas estáticas con valores de píxeles muy específicos. Ver estas cuadrículas en pantallas de menos de 950 píxeles de ancho da como resultado barras de desplazamiento horizontales, la pesadilla de la Web.

Las cuadrículas fluidas son difíciles de hacer bien, pero existen algunas. La mayoría de las cuadrículas fluidas funcionan con porcentajes en lugar de píxeles, pero tienden a tener un tamaño máximo y hacen que sea imposible escalar más allá de un ancho máximo respetable. Por sí solo, un diseño fluido es casi tan malo como un diseño fijo, porque mientras obtienes una mejor cobertura de las computadoras de escritorio, los dispositivos móviles tienden a sufrir con un diseño peor. En esta situación particular, una cuadrícula estática te brinda una mejor experiencia. Sí, debes desplazarte horizontalmente en dispositivos con una resolución más baja, pero los sistemas basados en porcentajes generalmente terminan con una columna que es, por ejemplo, el 10% de 480px. Esto provoca una división vertical en tu texto.

Una solución a este problema son las media queries CSS. Algunas de las bibliotecas más populares, como "1140 grid" y la "cuadrícula de andamio de Bootstrap", vienen con media queries preestablecidas. La cuadrícula 1140 tiene un diseño fluido, pero los tamaños de pantalla pequeños hacen que las columnas se apilen unas sobre otras.

Las cuadrículas fluidas son difíciles de hacer bien...

La cuadrícula de andamio de Bootstrap, por otro lado, incorpora múltiples diseños estáticos. A medida que cambias el tamaño de la pantalla, Bootstrap cambia el diseño al más adecuado para el tamaño de pantalla actual. Una vez que llega a un tamaño de pantalla móvil, Bootstrap carga la misma configuración que la cuadrícula 1140, un diseño fluido con todas las columnas apiladas una encima de la otra.

¿Qué hay de malo en elegir uno de estos? Bueno, técnicamente nada, pero no están hechos a medida para tu aplicación específica. Esto te obliga a construir tu aplicación en su cuadrícula y trabajar alrededor de las limitaciones del framework. Siempre puedes modificar su framework, pero también puedes crear el tuyo y eliminar las funciones generales innecesarias.


Presentando a Susy

Como mencioné antes, Susy es un complemento para el framework Compass que ofrece una amplia gama de combinaciones para crear tus propias cuadrículas CSS. Simplemente especifica el número predeterminado de columnas y algunas opciones de tamaño (ancho de columna, relleno de cuadrícula, etc.) y Susy calcula los porcentajes correctos para tus elementos. Esto te da el poder de cambiar el número de columnas y sus tamaños.

Puedes crear tres tipos diferentes de cuadrículas: estática, fluida y mágica.

Ya sabes qué son las cuadrículas estáticas y fluidas; echemos un vistazo a lo que te dan las cuadrículas "mágicas". Las cuadrículas mágicas tienen un elástico por fuera y un fluido por dentro. En otras palabras, el exterior de la cuadrícula (ancho máximo) se ajusta de acuerdo con el tamaño de fuente predeterminado del navegador (los navegadores de escritorio generalmente tienen un valor predeterminado de aproximadamente 16 px). El interior de la cuadrícula cambia de tamaño según el ancho real del navegador. Esta combinación le da a tu sitio una apariencia más consistente en todos los navegadores al mismo tiempo que admite pantallas más pequeñas.

Susy proporciona una combinación llamada "en el punto de interrupción", que te permite configurar CSS personalizado de acuerdo con el tamaño de la pantalla. Esta combinación logra esta hazaña con media queries CSS. Entonces, por ejemplo, puedes reorganizar las columnas para que se apilen unas sobre otras como en los frameworks discutidos anteriormente, e incluso puedes eliminar contenido que no se ajusta a un dispositivo móvil.


Creación de un proyecto de Susy

Supongo que ya tienes Compass instalado, pero si no, puedes consultar la serie de videos de Jeffrey. Para instalar Susy, simplemente abre una línea de comandos de Ruby y escribe lo siguiente:

A continuación, crea un proyecto de Compass. Escribe lo siguiente:

Deberías ver una página de información que detalla cómo comenzar.

Dentro del directorio recién creado, deberías ver dos carpetas junto con un archivo de configuración. Editarás los archivos que residen en el directorio sass; Compass compila estos archivos para generar el CSS final en la carpeta de hojas de estilo.

Para ahorrar tiempo al compilar los archivos CSS después de cada actualización, puedes usar el comando watch de Compass para hacer que Compass recompile automáticamente tus archivos cada vez que guardes una actualización. Entonces, en la ventana de la terminal, escribe el siguiente comando:

Compass ahora comenzará a monitorear y volver a compilar los archivos en la carpeta sass. Ten en cuenta que debes mantener la ventana del terminal abierta para poder monitorear la carpeta; si usas la terminal para editar archivos (es decir, vim), entonces necesitas abrir otra ventana.


Susy en acción

Ahora que tienes todo configurado, echemos un vistazo a mi demostración rápida. Voy a mantener el HTML corto porque es el CSS para lo que realmente estamos aquí. La demostración es un administrador de invitados al evento que enumera a los invitados y realiza un seguimiento de quiénes confirmaron su asistencia. Es una idea simple que muestra muchos de los conceptos que discutimos.

El plan

En cuanto al HTML, habrá un área de encabezado seguida de una fila con el nombre del evento, algunos controles y, finalmente, la lista real de invitados. Puedes echar un vistazo a la imagen a continuación para comprender mejor el diseño.

Aquí está la página HTML completa para la demostración:

Susy usa min-width para las media queries de forma predeterminada; por lo tanto, comienza por definir el CSS para el diseño más pequeño y luego expande gradualmente el diseño con el tamaño de pantalla creciente. La versión 'móvil' separa el lema y los botones en sus propias líneas, y hacemos que todo llene el ancho de la página.

Utilizo otro complemento de Compass, llamado Sassy Buttons, para generar el CSS de los botones. No es parte integral de esta demostración, pero puedes instalarlo escribiendo lo siguiente en una terminal:

Luego agrega la siguiente línea a tu archivo config.rb:


El SCSS

Definamos el diseño. Abre _base.scss en la carpeta sass. Este archivo contiene todas las declaraciones y variables de importación llamadas import que necesitaremos más adelante. Reemplaza todo dentro de ese archivo con lo siguiente:

Por sí solo, un diseño fluido es casi tan malo como un diseño fijo...

total-columns contiene el número predeterminado de columnas para la pantalla más pequeña en tu diseño.

Fui con tres diseños en total: móvil, tableta y computadora. Los puntos de interrupción de Susy te permiten hacer cosas como establecer los tamaños mínimo y máximo para las consultas de medios, e incluso puedes agregar soporte especial para Internet Explorer. Mantendré este ejemplo simple y cubriré solo dos tipos.

El punto de interrupción de la tableta se activa cuando la pantalla puede ajustarse a ocho columnas. El punto de interrupción de la computadora se activa cuando la pantalla tiene al menos 55em de ancho y el 12 en $computer: 55em 12; le dice a Susy que cambie a doce columnas.

Ahora guarda este archivo y abre screen.scss. Borra todo en el archivo e importa el archivo base. Definamos también el contenedor principal:

Ten en cuenta que no necesitas el guión bajo ni la extensión del archivo al importar el archivo base. Dentro de la clase 'container', usamos la primera mezcla de Susy que define los diferentes diseños de la cuadrícula. Entonces, es solo SCSS normal para el diseño móvil:

Como puedes ver en las dos últimas líneas, oculto las columnas de correo electrónico y teléfono en la tabla para que la página se ajuste normalmente a un dispositivo móvil. Como práctica recomendada, se le debe brindar al usuario una forma diferente de ver la información completa (es decir, modal, otra página), pero lo dejo fuera por el bien de la simplicidad de este ejemplo.

Ahora tenemos el CSS básico completado para el sitio web móvil y podemos comenzar a modificar el diseño con puntos de interrupción. Aquí hay una captura de pantalla rápida que tomé en mi iPhone de la versión móvil:

Agregar puntos de interrupción

El primer punto de quiebre que debemos implementar es la versión para tableta; recuerda, primero debemos comenzar con el diseño más pequeño. El tamaño de la tableta es lo suficientemente grande como para poner el lema en su propia línea, y también podemos mostrar la columna de correo electrónico. Desafortunadamente, todavía no es lo suficientemente grande como para poner el nombre del evento y los botones en la misma línea. Aquí está el SCSS para este punto de interrupción:

Aquí no hay comandos 'mágicos', solo SCSS estándar dentro de una mezcla de Susy. Aquí hay una captura de pantalla de un iPad del diseño de la tableta:

Finalmente, implementemos la versión de escritorio. Definitivamente tenemos espacio más que suficiente para todas las columnas; por lo tanto, sangramos la tabla en ambos lados para que no tenga demasiado espacio en blanco. También movemos los botones a la misma línea que el nombre del evento, alineándolo al lado derecho, para centrar la mesa (visualmente, al menos). Aquí está ese código:

Esta es la primera vez que usamos la combinación de columnas de intervalo, conocida como span-columns. Susy toma el valor que le pases para calcular el porcentaje de ancho del contenedor. La palabra clave omega le dice a Susy que esta es la última columna de la fila. Esto hace que Compass flote la columna hacia la derecha y elimina el margen derecho.

Las combinaciones de prefijo (prefix) y sufijo (suffix) empujan el contenedor x cantidad de columnas desde la izquierda y la derecha, respectivamente.

Ahora puedes guardar este archivo y dejar que Compass lo compile en CSS. Si agregaste el complemento sassy-buttons después de iniciar el comando compass watch, debes detener el comando 'watch' (acceso directo: CTLR-C) y reiniciarlo para compilar el SCSS.


Palabras finales

Esta es una breve introducción a Susy. Para obtener una lista más completa de funciones, puedes visitar la documentación de Susy.

Espero que hayas disfrutado de este artículo y gracias por leer. Como siempre, siéntete libre de dejar cualquier comentario o pregunta en la sección de comentarios. También puedes contactarme en Twitter - @GabrielManricks e intentaré responderte lo antes posible.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.