Todos comenzamos en algún lado. Como nuevo diseñador, no me podría haber importado menos la estructura de mis diseños. Abría Photoshop y empujaba píxeles hasta que hacía algo que creía que se veía genial. Cuando aprendí a codificar, mi proceso fue similar al azar.
No miro hacia atrás en los viejos tiempos con demasiado cariño. Mi trabajo fue descuidado y desenfocado. No tenía objetivos claros. Como principio, supongo que no es tan malo, teniendo en cuenta que la mayor parte de mi educación de diseño provino de sitios de tutoriales de Photoshop, mi trabajo no fue terrible.
Pero luego aprendí sobre los sistemas de grillas. Olvidé exactamente cuándo y cómo se utilizaron popularmente en el diseño web, pero, de repente, todos los sitios relacionados con el diseño web a los que acudí rebosaban artículos sobre 960.gs o algún otro sistema de grillas. La importancia de proporcionar una estructura visual consistente en nuestros diseños fue enfatizada por todos los grandes nombres, y se convirtió en una tendencia.
Tan rápido como la tendencia se convirtió en un estándar de la industria, y ahora la mayoría de nosotros no lo pensamos dos veces acerca de si vamos a implementar o no un sistema de grillas. La única pregunta es, ¿cuál? ¿Iremos con uno de los nombres grandes o una variante menos conocida, o incluso haremos la nuestra?
En este artículo me gustaría echar un vistazo a la segunda opción: sistemas de grillas nuevos y menos conocidos. Siempre hay alguien que ofrece nuevas formas de resolver los diversos problemas de diseño, y creo que es importante estar familiarizado con la mayor cantidad de enfoques posibles, así que veamos algunos marcos de grillas básicos.
34Grid es todo acerca de la distribución de columna igual. También puede acomodar distribuciones desiguales, pero ese no es el propósito principal de este sistema de grillas. Para aquellos de ustedes que desean dividir la mayoría o todas sus páginas en porciones horizontales iguales, este es su marco.
Cómo funciona
El marco está diseñado para adaptarse a sus necesidades, por lo que no solo descarga y se va. Primero debe configurar su cuadrícula en la página de inicio del proyecto. Un formulario rápido le permite determinar cuántas columnas encajarán en una fila, qué tan grandes serán sus márgenes y si aplicará o no transiciones CSS3 a sus columnas cuando su ventana cambie de tamaño.
El código en sí está dividido en dos archivos CSS: uno con el código base y otro con todas las consultas de medios. Las clases CSS son simples. Aplicar '.col_1' a una columna llenará la fila al 100%. '.col_2' creará una columna con un ancho del 50%, y así sucesivamente.
Además, los elementos img, los objetos y algunos otros se redimensionan automáticamente. Hay una clase extra para ayudar a los objetos de video a comportarse. El sitio web del proyecto brinda consejos sobre cómo hacer que las incrustaciones de Facebook y Twitter sean agradables.
Inconvenientes
No parece haber ninguna forma de anidar columnas, o crear arreglos de columna más complejos dentro de una sola fila. Por otro lado, si no necesitas complejidad y solo quieres un marco simple que puedas ajustar cuando lo necesites, 34Grid hará el trabajo.
Simple Grid es una opción receptiva que alcanza un máximo de 1140 píxeles de ancho. En otras palabras, mientras está diseñado para jugar bien con tabletas y teléfonos, Simple Grid se asegura de que las pantallas más grandes no queden fuera.
Cómo funciona
Como su nombre implicaría, este sistema de cuadrícula es bastante liviano. Todo esto viene en un archivo CSS sin comprimir de cuatro kilobytes.
Los nombres de las clases están diseñados para ser entendidos fácilmente: '.col-2-6' dividirá la fila en seis columnas, y definirá el ancho de la columna a dos columnas de ancho. Cada fila se puede dividir en una columna, '.col-1-1', o dos, tres, cuatro, etc. hasta doce.
Inconvenientes
Al igual que 34Grid, no parece haber ninguna disposición para anidar columnas. Además, la manera en que se manejan los márgenes para la primera y la última columna puede causar dificultades al crear, por ejemplo, una galería de fotos.
Éste es para cualquiera que prefiera una grilla simple con nombres de clase en inglés. Es sensible, fácil de entender y se implementa rápidamente.
Cómo funciona
Después de colocar los elementos habituales '.container' y '.grid', las columnas se implementan a la manera antigua. Una clase ('.unit') se usa para definir los atributos generales de una columna, y otra clase se usa para definir el ancho. Las filas se pueden dividir en 2-5 columnas, y todos los nombres de las clases se parecen a esto: '.one-of-three, .two-of-three'.
También se incluyen algunos estilos tipográficos básicos.
Inconvenientes
Una vez más, este es un marco de grilla diseñado para diseños sin complicaciones, por lo que no hay disposición para columnas anidadas. Además, solo hay un punto de interrupción, configurado en un ancho de ventana de 650 píxeles, por lo que algunas de sus columnas pueden terminar de forma prematura.
Matt (AKA Bendición ) es un poco como yo. Le encanta el diseño, pero no ama las matemáticas tanto. Como resultado, su Grillas proporcionales parecen eliminar cálculos interminables tanto como sea posible dependiendo de la box-sizing propiedad. El resultado es un sistema de grillas completo, pero aún bastante liviano, que cubre sus bases para un diseño receptivo.
Cómo funciona
Cuando digo que este sistema depende de box-sizing , Quiero decir que las columnas tienen anchos de porcentaje sin tener en cuenta las canaletas. Las canaletas de ancho fijo están definidas por padding ; y box-sizing se asegura de que las columnas jueguen bien juntas.
Los anchos de canal y la mayoría de las demás mediciones se definen con "ems". Fiel al nombre de esta cuadrícula, las clases de columna son proporcionales (es decir. .col-one-third , .col-two-thirds ), y las columnas son más o menos infinitamente anillables, que es algo que me gusta mucho.
Las clases se incluyen para cambiar las dimensiones de la columna en tres puntos de ruptura diferentes. Las consultas de los medios se estructuran de la manera "móvil primero", de acuerdo con las prácticas estándar.
Hay una hoja de estilos separada para Internet Explorer 8 y anteriores. Al ver que IE8 no es compatible con consultas de medios, y las versiones anteriores no son compatibles box-sizing , se les proporciona un diseño de ancho fijo.
También se incluyen archivos SASS (tanto .sass como .scss) para una personalización rápida y sencilla del sistema de grillas.
Inconvenientes
No me importaría tener más anchos de columna para trabajar (quintos, sextos, octavos). De lo contrario, este es un sistema de grillas bien redondeado y sin errores.
De los sistemas de grillas avanzados en esta lista, Uno% es el más simple, pero de ninguna manera es incompleto. Está diseñado para acomodar pantallas algo más grandes y elementos grandes de UI, si su página de inicio es una indicación.
El nombre proviene del hecho de que el ancho de la cuadrícula y la columna se calcula de modo que siempre es igual al 99%, en lugar del 100%. Esto elimina la necesidad de algunos de los decimales repetitivos más complejos y el redondeo numérico que los exploradores a menudo se ven obligados a hacer.
Cómo funciona
La cuadrícula en sí está dividida en las doce columnas clásicas. Las clases son simples ( .onerow , .col1 , .col6 ), y me gusta que, en su mayoría, solo use una clase por columna.
De forma predeterminada, se incluyen dos puntos de interrupción: 768 píxeles y 1024 píxeles. Si soy sincero, ese primero parece un poco ... grande ... pero siempre puedes agregar otro punto de quiebre si lo necesitas. También se proporcionan dos ejemplos de ancho de diseño de escritorio: 1000 píxeles y 1200 píxeles.
En la página de inicio de proyectos, puede descargar archivos de acción y PSD de Photoshop adecuados para simular sus diseños con este sistema de grillas.
Inconvenientes
Mis dos grandes problemas aquí son los habituales. Primero: sin columnas de anidación. Las columnas de anidación son buenas, ¡gente! Segundo: la última columna en cada fila necesita tener el .last clase aplicada a ella.
Un marco de cuadrícula de CSS entre navegadores que no oculta los píxeles en los márgenes. Ese es el lema de Flurid, y una mirada rápida a la documentación le dirá por qué: el creador de Flurid realmente no quiere que su diseño se rompa. Nunca.
Aquí está la cosa, debido a la forma en que funciona el redondeo de subpíxeles, un navegador ocasionalmente dice "atornillarlo" y pone la última columna en la fila en algún lugar donde no debería ir. Flurid está diseñado para brindar estabilidad, de modo que su diseño siempre funcionará, incluso en versiones anteriores de IE. (La compatibilidad se muestra como IE5 +).
Cómo funciona
Flurid tiene todas las características que necesitará: columnas regulares, columnas mixtas, columnas anidadas y columnas desplazadas. La lista de posibles anchuras y clases de columnas es extensa y está basada en razones, por lo que querrá darse tiempo para familiarizarse con ellas.
Se proporciona cierta documentación razonablemente completa a través de GitHub, así como un plugin jQuery que agrega características adicionales; sí, viene con su propio plugin jQuery, que proporciona columnas de igual altura, y puede poner clases alternas en sus columnas, para su placer de diseño.
Inconvenientes
Es tan molesto .last clase otra vez Aún así, según la documentación, hay una buena razón para hacerlo esta vez.