La construcción de cuadrículas era moderadamente complicada antes del diseño de respuesta, en estos días pueden ser absolutamente intimidantes. Cuando se sumerge en un diseño complejo, es fácil perderse en todas las matemáticas y porcentajes. Claro, a los nerds incondicionales entre nosotros les encanta jugar con estas cosas, ¡pero algunos desarrolladores solo quieren ponerse a trabajar!
Hoy vamos a ver un increíble sistema de cuadrícula que lo ayudará a configurar sus cuadrículas de respuesta con muy poco esfuerzo. Es semántico, diseñado para un diseño receptivo, completamente flexible a la forma en que trabaja y impulsado por Sass. Conoce a Zen Grids.
Verlo en acción
Si quieres echar un vistazo a lo que estamos construyendo hoy con Zen Grids, haz clic en el siguiente enlace.
Manifestación: Haga clic aquí para lanzar.
¿Qué es Zen Grids?
Sé lo que estás pensando, "¡Otro maldito sistema de cuadrícula!" Sin embargo, Zen Grids es diferente. Correcto, todos dicen eso. Este realmente vale la pena un vistazo sin embargo.
Hay muchas razones por las que creo que Zen Grids es una gran herramienta que deberías revisar, aquí hay algunas de ellas:
Ninguna de las cosas que odias
Hay muchas razones para odiar los sistemas de red. Feo, nombres de clase no semánticos, un crapload de divs aparentemente redundantes pero de alguna manera necesarios; La lista sigue y sigue. Sin embargo, Zen Grids no tiene nada de eso. Usted configura su documento como quiera y se integra perfectamente en su flujo de trabajo.
Construido en sass
Sé que esto es un inconveniente para muchos de ustedes, pero es una ventaja sólida para mí. Sass es la razón por la cual Zen Grids puede ser semántico. Los archivos SCSS se encargan de todos los cálculos matemáticos y le permiten aplicar los mixins de cuadrícula cuando y donde los desee.
Responsive Friendly
Técnicamente, no llamaría a Zen Grids un sistema de cuadrícula receptivo (aunque se factura a sí mismo como tal) porque realmente no viene con ninguna función de consulta de medios incorporada de la manera en que lo hace Bootstrap.
Yo lo llamaría un fluido Sistema de red porque está construido sobre porcentajes. Dicho esto, es bastante fácil conectar Zen Grids a algunas de sus propias consultas de medios y hacer que responda.
Fácil como 1, 2, 3
Zen Grids es realmente fácil de usar. 1 declaración de importación, 2 variables y 3 mixins. Esto es todo lo que se necesita para construir un diseño básico. En mis experimentos, lo presioné a cuatro mixins (necesitas uno adicional para anidar), pero eso no es tan malo en vista de la complejidad que se puede lograr.
Antes de que empieces
Voy a sumergirme y enseñarte cómo usar esta ventosa, pero antes de entrar en eso, se requiere una pequeña configuración. Primero, debe asegurarse de que tiene Sass y Compass instalados.
Obtener scout
Si te sientes cómodo con Ruby, Terminals y Shell Scripts, todo esto debería ser bastante sencillo. Para el resto de nosotros, recomiendo simplemente descargar Scout y llamarlo un día. Scout es gratuito, de código abierto y multiplataforma. Apúntelo en una carpeta que contenga archivos SCSS y los compilará automáticamente en CSS. Codekit y LiveReload son aún mejores, pero te costarán.
Obtener Zen Grids
Una vez que haya configurado Sass y Compass, tome Zen Grids de GitHub. Descargar el .zip y tirar todo menos las? Hojas de estilo? carpeta. Aquí es donde encontrará los archivos SCSS que alimentarán su red.
Empezando
Para comenzar, recomiendo investigar su descarga y encontrar? _Grids.scss? expediente. Sáquelo y colóquelo en una nueva carpeta de proyecto, luego cree un nuevo archivo SCSS e impórtelo.
Eso es todo, ahora estamos listos para construir una cuadrícula!
Iniciar un contenedor
Para comenzar una nueva cuadrícula, necesitarás algún tipo de contenedor. No considero que esto sea un problema en absoluto, dado que normalmente lo hago incluso sin ningún tipo de sistema de red de terceros.
Aquí he creado un div con una clase? Contenedor,? pero recuerde que prometí que Zen Grids se conectaría a su flujo de trabajo específico. Esto significa que el contenedor puede ser lo que quieras. Use una sección en lugar de un div, cambie la clase a? Main ,? se vuelven locos ¡Realmente no importa!
Ahora pase a su SCSS e incluya el contenedor de rejilla zen Mezcla utilizando sintaxis Sass estándar.
Lo que esto hace es decirle a Zen Grids que desea que este artículo se convierta en un contenedor. Mientras estás en ello, también puedes establecer un ancho y centrar la división.
Establecer las variables
Ahora es el momento de establecer las variables para el recuento de columnas y el margen. Me gusta hacer esto dentro de la clase de contenedor porque lo cambiaremos más tarde y es más fácil seguir de esta manera.
Para empezar, configurar recuento de columnas zen a 3 y ancho zut-zen a 10px. Obviamente, esto nos dará un diseño de tres columnas con un margen de 10px entre cada columna.
Crear algo de contenido
A continuación, vamos a querer crear algún contenido HTML. Ya que estamos aprendiendo a usar Zen Grids, voy a usar un contenido súper genérico aquí como ejemplo. Aquí creé tres divs, cada uno conteniendo un párrafo simple:
Tenga en cuenta que estos nombres de clase son completamente arbitrarios y solo numerados para ayudarnos a realizar un seguimiento de todo a través de los ejemplos. Tienes total libertad para usar los nombres de clase que elijas. El suyo debe reflejar las prácticas semánticas estándar.
CSS Bloque Básico
Nuevamente, solo por el bien de la demostración, aplicaré un estilo genérico a cada bloque de contenido que creamos. Esto nos ayudará a ver qué pasa con cada bloque.
Fluye el contenido
Tenemos tres divs con los que trabajar y ya hemos configurado tres columnas, así que asignemos un div a cada columna. Hacer esto requiere la elemento de cuadrícula zen mezclar Así es como se verá en nuestro SCSS.
¿Qué está pasando con esta sintaxis? Aquí hay una tabla útil para ayudarte:
Como puede ver, el primer número determina cuántas columnas abarcará el elemento. El segundo número determina la posición de ese elemento. En nuestro ejemplo anterior, colocamos los tres divs en las ranuras 1, 2 y 3 consecutivamente.
Esto crea una cuadrícula simple dividida en tercios con cada bloque de contenido que ocupa un tercero:
Vamos a complicarnos
De acuerdo, ahora sabemos lo básico de cómo funciona esto, así que saltemos a un diseño mucho más complejo. En lugar de tres bloques de contenido, vamos a tener ocho. Usaremos diferentes contenedores, nuevas filas e incluso algunos anidamientos solo para llevar nuestra prueba al límite.
HTML
Esta vez vamos a lanzar en una gran parte de HTML. Seguimos usando la misma configuración básica que antes, la única complicación real es que el? Anidado? El contenedor está realmente sentado dentro de nuestro otro contenedor.
Para hacer que los bloques de contenido se vean bien esta vez, aquí está el estilo que vamos a usar:
Anidamiento
Como antes, comenzamos con tres bloques de contenido. La parte difícil, sin embargo, es que el tercer bloque de contenido es en realidad un contenedor anidado propio, que contiene otros dos bloques. Configurar esto es realmente muy fácil.
Al igual que antes, use elemento de cuadrícula zen (1, 3) en el? anidado? clase, sino que también incluyen contenedor-anidado zen () para indicar que este será un contenedor anidado.
No hay problema verdad? Ahora agregamos los bloques tres y cuatro en el contenedor anidado. Tenga en cuenta que el contenedor anidado también contendrá tres columnas, así que quiero que los bloques tres y cuatro ocupen cada una tres columnas (serán de ancho completo y se apilarán entre sí).
Echa un vistazo al código para el bloque cuatro aquí. Para empezar, utilicé el zen-claro () mezclar Así es como creas una nueva fila. Sin esto, los bloques tres y cuatro ocuparían el mismo lugar.
Aquí está el efecto que esto tiene en nuestro diseño:
¡Bonito! Esto es exactamente lo que estábamos disparando para lograr. Nuestro contenido se divide en tres bloques y el bloque del extremo derecho se divide en dos subbloques. ¡Todo sin un poco de matemáticas!
Cambiando la rejilla
Terminaremos aquí codificando contenedor2. Este contenedor contiene cuatro bloques de contenido, y me gustaría que fluyan todos uno al lado del otro, ¿pero nuestra configuración solo tiene tres columnas? ¿ahora que?
La respuesta es, por supuesto, que necesitamos restablecer nuestras variables cuando configuramos el nuevo contenedor. No estaba seguro de si Sass manejaría esto correctamente cuando lo probé por primera vez, pero parece funcionar perfectamente. Aquí está el código:
Como puede ver, esta vez fuimos con cuatro columnas y un canal de 10px. Luego establecemos cada bloque de contenido en un espacio de ancho y los posicionamos consecutivamente en las columnas.
Ahí vamos, un diseño bastante complejo que usa solo unos pocos mixins fáciles de aplicar. Por la flexibilidad que ofrece esta herramienta, realmente no puede ser más fácil que esta gente.
Hazlo Responsivo
Antes de decir que era fácil hacer que nuestra cuadrícula respondiera. Hasta el momento es fluido, por lo que se redimensiona según el tamaño de la viuda, pero nunca se refleja. Vamos a arreglar eso con una consulta rápida de medios:
Aquí creé una consulta de medios para 700 px y realicé completamente el diseño para acomodar la ventana gráfica más estrecha. Así es como se verá después del punto de quiebre.
¿Qué tan bueno es eso? Acabamos de lograr un diseño muy complejo y sensible sin ningún tipo de matemáticas, mientras que evitamos los nombres de clase no semánticos y constrictivos. Esa es una hazaña bastante seria.
Hoja de trucos
Cubrimos un montón de cosas arriba, así que permítanme desglosarlo en una pequeña y agradable hoja de trucos:
- Establecer contenedor: @include zen-grid-container
- Establecer contenedor anidado: @include zen-nested-container ()
- Establecer el recuento de columnas: $ zen-column-count: 2
- Establecer el ancho del canal: $ zen-gutter-width: 10px
- Establecer el intervalo de posición y la posición: @incluir elemento de cuadrícula-zen (1, 1)
- Nueva fila @incluir zen-claro ()
¿Qué piensas?
Así que ese es el sistema Zen Grids. Personalmente, creo que es un pequeño sistema de cuadrícula realmente útil que funciona bastante bien. ¿Qué piensas? ¿Le ahorraría mucho tiempo y esfuerzo en su flujo de trabajo receptivo o le agregaría muchas complicaciones innecesarias? Deja un comentario y házmelo saber.