Share
¿Estás contento con alguna de las bibliotecas de cuadrícula CSS disponibles? ¿No? No te culpo Ingrese a Susy, un complemento para el marco Compass CSS que le permite crear su propio marco de cuadrícula personalizado, minimizando la sobrecarga y haciendo que sea más comprensible de usar. Suena bien, ¿verdad? Saltemos a la derecha en.
No voy a ahondar mucho en Compass o SCSS (el idioma en el que escribes el CSS), pero no dudes en consultar nuestro curso Mantenible de CSS con Sass y Compass Premium, si quieres aprender sobre ellos.
Puedes crear tres tipos diferentes de rejillas: estática, fluida y mágica..
Las bibliotecas de grillas populares de hoy parecen quedarse cortas de una manera 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 en barras de desplazamiento horizontal: la pesadilla de la Web.
Las rejillas fluidas son difíciles de conseguir, 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 imposible escalar más allá de un ancho máximo respetable. Por sí mismo, un diseño fluido es casi tan malo como un diseño fijo, porque mientras obtiene 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 le brinda una mejor experiencia. Sí, tiene que desplazarse 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, 10% de 480px. Esto provoca una división vertical en su texto..
Una solución a este problema es CSS preguntas de los medios. Algunas de las bibliotecas más populares, como la "cuadrícula 1140" y la "cuadrícula de andamios Bootstrap", vienen con consultas de medios 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 rejillas de fluidos son difíciles de conseguir ...
La red de andamios de Bootstrap, por otro lado, incorpora múltiples diseños estáticos. A medida que cambia 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 otra.
¿Qué hay de malo en elegir uno de estos? Bueno, técnicamente nada, pero no están hechos a medida para su aplicación específica. Esto te obliga a construir tu aplicación en su cuadrícula y trabajar en torno a las limitaciones del marco. Siempre puede modificar su marco, pero también puede hacer su propio y eliminar las funciones innecesarias y generales..
Como mencioné anteriormente, Susy es un complemento para el marco de Compass que ofrece una amplia gama de combinaciones para crear tus propias cuadrículas CSS. Simplemente especifique 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 sus elementos. Esto le da la posibilidad de cambiar el número de columnas y sus tamaños.
Puedes crear tres tipos diferentes de rejillas: estática, fluida y mágica..
Ya sabes lo que son las redes estáticas y fluidas; echemos un vistazo a lo que las rejillas "mágicas" te dan. Las rejillas mágicas tienen un exterior elástico 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 tamaño de la cuadrícula en el interior se basa en el ancho real del navegador. Esta combinación le da a su sitio una apariencia más consistente en todos los navegadores y al mismo tiempo admite pantallas más pequeñas.
Susy proporciona una combinación llamada "punto de interrupción", que le permite configurar CSS personalizado según el tamaño de la pantalla. Esta mezcla logra esta hazaña con las consultas de medios CSS. Así, por ejemplo, puede reorganizar las columnas para apilarlas una encima de la otra como en los marcos analizados anteriormente, e incluso puede eliminar contenido que no se ajuste a un dispositivo móvil.
Supongo que ya tiene Compass instalado, pero si no, puede consultar la serie de videos de Jeffrey. Para instalar Susy, simplemente abra una línea de comandos de Ruby y escriba lo siguiente:
gema sudo instalar susy
A continuación, crea un proyecto Compass. Escriba lo siguiente:
brújula crear nombre de proyecto -r susy -u susy
Debería ver una página de información, que detalla cómo comenzar.
Dentro del directorio recién creado, debería ver dos carpetas junto con un archivo de configuración. Editará los archivos que residan en el hablar con descaro a directorio; Compass compila estos archivos para enviar el CSS final a la carpeta de hojas de estilo.
Para ahorrar tiempo compilando los archivos CSS después de cada actualización, puede usar Compass ' reloj comando para hacer que Compass recompile automáticamente sus archivos cada vez que guarde una actualización. Entonces, en la ventana del terminal escriba el siguiente comando:
reloj de brújula
Compass ahora comenzará a monitorear y volver a compilar los archivos en el hablar con descaro a carpeta. Tenga en cuenta que debe mantener abierta la ventana del terminal para monitorear la carpeta; Si usa el terminal para editar archivos (es decir, vim), entonces necesita abrir otra ventana.
Ahora que tiene todo configurado, echemos un vistazo a mi demostración rápida. Voy a mantener el HTML corto porque es el CSS por el que realmente estamos aquí. La demostración es un administrador de eventos del evento que enumera a los invitados y realiza un seguimiento de quién respondió. Es una idea simple que muestra muchos de los conceptos que discutimos..
En lo que respecta a HTML, habrá un área de encabezado seguida de una fila con el nombre del evento, algunos controles y, finalmente, la lista real de invitados. Puede ver la imagen de abajo para comprender mejor el diseño..
Aquí está la página HTML completa para la demostración:
Planearlo! Gerente del evento invitado
Lista de invitados para - Boda de John
Agregar de Contactos Agregar Nuevo Invitado
Nombre Teléfono Célula Estado de RSVP Dave K. Samten [email protected] 708-6777 360-234-1192 Confirmado Bob Renper [email protected] 537-4267 621-124-4294 Confirmado Kevin D. Turner [email protected] 942-2674 930-654-4144 RSVP
Susy usa ancho mínimo para las consultas de medios por defecto; Entonces, comienza por definir el CSS para el diseño más pequeño y luego, gradualmente, expandes el diseño a medida que aumenta el tamaño de la pantalla. 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 puede instalarla escribiendo lo siguiente en un terminal:
gema instalar botones descarados
Luego agrega la siguiente línea a tu config.rb expediente:
requiere 'sassy-buttons'
Vamos a definir el diseño. Abierto _base.scss en el hablar con descaro a carpeta. Este archivo contiene todos los importar Declaraciones y variables que necesitamos más adelante. Reemplace todo dentro de ese archivo con lo siguiente:
@import "susy"; // si quieres usar el plugin de botones @import "sassy-buttons"; // este es el número predeterminado de columnas $ total-columnas: 5; // ancho de cada columna $ column-width: 4em; // espacio entre columnas $ gutter-width: 1em; // espacio a la derecha e izquierda de la cuadrícula $ grid-padding: $ gutter-width; // puntos de interrupción de diseño alternativo $ tablet: 8; $ computadora: 55em 12;
Por sí mismo, un diseño fluido es casi tan malo como un diseño fijo ...
los columnas totales contiene el número predeterminado de columnas para la visualización más pequeña en su diseño.
Fui con tres diseños en total: móvil, tableta y computadora. Los puntos de interrupción de Susy le permiten hacer cosas como configurar los tamaños mínimo y máximo para las consultas de medios, e incluso puede agregar soporte especial para Internet Explorer. Voy a mantener este ejemplo simple y cubriré solo dos tipos.
El punto de interrupción de la tableta se activa cuando la pantalla puede caber ocho columnas. El punto de interrupción de la computadora se activa cuando la pantalla tiene un ancho de al menos 55em, y el 12 en $ computadora: 55em 12; le dice a Susy que cambie a doce columnas.
Ahora guarda este archivo y abre screen.scss. Borre todo en el archivo e importe el archivo base. Definamos también el contenedor principal:
@import "base"; cuerpo fondo: # F7F3E8; a texto-decoración: ninguno; .container @include container ($ total-columns, $ tablet, $ computer);
Tenga en cuenta que no necesita el guión bajo ni la extensión del archivo al importar el base expediente. Dentro de la clase de contenedor, usamos la primera combinación de Susy que define los diferentes diseños para la cuadrícula. Entonces, es solo SCSS regular para el diseño móvil:
Accentsconagua
#header font-weight: 700; tamaño de fuente: 72px; span font-weight: 300; tamaño de fuente: 18px; bloqueo de pantalla; #controls #buttons margin-bottom: 5px; #phonebook @include sassy-button ("simple", 6px, 14px, # 337EC4); #newguest margin-top: 5px; @include sassy-button ("simple", 6px, 14px, # D93131); tabla ancho: 100%; thead color: #FEFEFE; fondo: # 000; th text-align: left; peso de la fuente: 500; relleno: 10px; tbody border: 3px solid # 000; tr fondo: # E5E5E5; tr.alt fondo: #EEEEEE; .buttoncell .confirm @include sassy-button ("simple", 6px, 14px, # F39B06); .unconfirm @include sassy-button ("flat", 6px, 14px, # 3BA06F); .email mostrar: ninguno; .phone pantalla: ninguno; Como puede 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 en un dispositivo móvil. Como práctica recomendada, bríndele al usuario una forma diferente de ver la información completa (es decir, modal, otra página), pero lo dejo por la simplicidad de este ejemplo..
Ahora hemos completado el CSS básico para el sitio web móvil, y podemos comenzar a modificar el diseño con puntos de interrupción. Aquí está una captura de pantalla rápida que tomé en mi iPhone de la versión móvil:
El primer punto de interrupción que necesitamos 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 ruptura:
@include at-breakpoint ($ tablet) body .container #header span display: inline; table .email display: table-cell;
No hay comandos 'mágicos' aquí, 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 más que suficiente espacio 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 en la misma línea que el nombre del evento, alineando al lado derecho, para centrar la mesa (visualmente, al menos). Aquí está ese código:
@include en el punto de interrupción ($ computer) body .container #controls #menutitle @include span-columns (5); margen superior: 5px; #buttons text-align: right; @incluir columnas-span (5 omega); tabla @include prefix (1); @incluir sufijo (1); .cell display: table-cell;
Esta es la primera vez que usamos el columnas de expansión mezclar Susy toma cualquier valor que pase para calcular el porcentaje de ancho del contenedor. los omega La palabra clave le dice a Susy que esta es la última columna de la fila. Esto hace que Compass haga flotar la columna a la derecha y elimina el margen derecho.
los
prefijoysufijolos mix-ins empujan el contenedor x cantidad de columnas desde la izquierda y la derecha respectivamente.
Ahora puede guardar este archivo y dejar que el compás lo compile en CSS. Si agregó el complemento sassy-buttons después de iniciar el reloj de brújula comando, debe detener el comando watch (acceso directo: CTLR-C) y reiniciarlo para compilar el SCSS.
Esta es una breve introducción a Susy. Para una lista más completa de características, puede visitar la documentación de Susy.
Espero que hayan disfrutado este artículo, y gracias por leer. Como siempre, siéntase libre de dejar cualquier comentario o pregunta en la sección de comentarios. También puedes contactarme en Twitter: @GabrielManricks y trataremos de responderte lo antes posible..
