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

¿Qué marco de cuadrícula CSS debería usar para el diseño web?

by
Difficulty:BeginnerLength:LongLanguages:

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

¿Alguna vez te has preguntado cómo se crearon todos esos temas de "revistas" para WordPress y otras plataformas? Muchos, si no todos, se diseñaron utilizando un marco de cuadrícula CSS, al menos en esencia, si no en realidad. Es decir, puedes usar un marco CSS existente o construir tu propio desde cero. Si bien es posible diseñar diseños de páginas web complejas sin un marco, podría decirse que es un acto de masoquismo. En este artículo, obtendrá una descripción general del lote actual de marcos y que debe elegir utilizar.

¿Qué es un CSS Grid Framework?

Las cuadrículas de diseño se han utilizado en publicaciones impresas mucho antes de la Web. Son una base invisible que se utiliza para lograr cohesión visual en el diseño y diseño de páginas de revistas y periódicos. Básicamente, se trata de una celosía que divide el espacio horizontal y vertical en unidades coherentes donde se pueden colocar texto, titulares, imágenes y publicidad.

El mismo concepto se ha adaptado para el diseño de páginas web por la misma razón, utilizando el código CSS (Cascading StyleSheets) para posicionar elementos HTML. De hecho, muchos sitios editoriales dirigidos por grandes editores de medios impresos aplican grillas para lograr una apariencia en sus sitios web que sea similar a su contenido impreso.
Tenga en cuenta que el eje vertical no es tan compatible con los sistemas CSS Grid, ya que la altura de una página web no es tan importante como para una página impresa. (Aún así, ese es un problema menor en el diseño de páginas web, a menos que espere las mismas características que con los sistemas Desktop Publishing, también conocido como DTP, que es difícil de admitir sin un lenguaje similar a PostScript para que los navegadores lo implementen y lo respalden).


960 CSS Grid System: uno de los mejores diseños para un sitio web de framework :-)

¿Por qué usar un marco de cuadrícula CSS?

No todos los diseñadores admiten el uso del uso de marcos de cuadrícula sobre tablas, ni siquiera en absoluto. Pero seamos sinceros; hay diseños que simplemente no se pueden hacer con solo tablas HTML sin un gran esfuerzo doloroso, y un montón de anidaciones que son difíciles de descifrar, siempre deben hacer cambios.

Claro, si usa cuadrículas, tendrá que agregar a su contenido el marcado necesario de etiquetas HTML, lo que aumentará el tamaño de los archivos de la página. Además, esto significa que el marcado y el estilo no están realmente separados, un principio al que muchos diseñadores web desean adherirse. (Algunas personas sienten, correcta o incorrectamente, que quienes no aceptan los marcos de CSS son diseñadores que temen que la necesidad de sus servicios disminuya). Sin embargo, con esta lógica, los codificadores también están en problemas, especialmente con el aumento en las bibliotecas de código de navegador cruzado como jQuery.

El hecho es que usar un marco de cuadrícula CSS significa que su navegador carga los archivos CSS solo una vez y los guarda en caché "en el lado del cliente". Además, el marcado HTML adicional necesario para aplicar el marco CSS "invisible" rara vez es tan importante que los problemas de ancho de banda para los lectores deberían ser una preocupación. (Curiosamente, la mayoría de los detractores parecen estar hablando de Yahoo UI Grids, no tanto de Blueprint).

En la mayoría de los ejemplos con los que he estado trabajando, y en cualquiera de los temas de la revista que usan grillas que he inspeccionado, estamos hablando de aumentos de tamaño de archivo relativamente pequeños, especialmente en comparación con el código de la plataforma de blog que se está utilizando. Una sola imagen grande probablemente ocupará más espacio. Con conexiones de Internet más rápidas, realmente no es tan importante.

Diseño y beneficios estéticos

Independientemente de si utiliza cuadrículas CSS para prototipos o sistemas de producción, hay múltiples ventajas estéticas y de diseño:

  1. Diseño visual de cohesión entre elementos de página.
  2. Uniformidad y consistencia en la colocación de elementos HTML, reduciendo así los errores de codificación CSS.
  3. Más fácil de aplicar la "regla de los tercios" y la "sección dorada" para el diseño, lo que resulta en un diseño visualmente atractivo para la mayoría de los ojos humanos.
  4. Principalmente elimina la necesidad de usar tablas HTML anidadas.
  5. Subredes anidadas, para diseños muy complejos que son relativamente fáciles de producir.
  6. Más fácil de aplicar imágenes y llamadas de texto para producir diseños asimétricos para la textura visual.
  7. Compatibilidad con varios navegadores, por lo que menos gritos y tirones de pelo cuando llegas a las pruebas para esa pesadilla de los diseñadores, IE. (Bill Gates debe haberse sentido tan poco amado como un niño por haber producido tanto software que hace lo que quiere, en desafío a los estándares que MSFT supuestamente apoya).
  8. Esfuerzo reducido para producir diseños de páginas web más sofisticados, en comparación con la codificación del CSS necesario desde cero.
  9. Reducción del esfuerzo futuro si necesita reposicionar elementos o cambiar las características de representación (tipografía, márgenes, etc.) para los elementos relacionados en masa.
  10. Utilizable con páginas estáticas y plataformas CMSes / blog.
  11. Permite el uso popular de la creación de "revistas" y temas premium para plataformas de blogs. (WordPress parece ser la plataforma con la que se utilizan con mayor frecuencia los marcos CSS, aunque cualquier otra plataforma que permita hacer referencia a un archivo fuente de JavaScript debería funcionar bien).

YAML - "Sin embargo, otro diseño multicolumna"

Frameworks y herramientas CSS

Aquí hay una breve lista de algunos de los marcos más populares:

  1. Blueprint CSS Grid Framework.
    Robusto a pesar de estar solo en V0.7 (en el momento de esta publicación), con mucho apoyo de diseñadores y numerosas herramientas para generar código CSS (más allá del marco estándar de 24 columnas, 950 px predeterminado). Admite el uso de "complementos" de Blueprint.
  2. Yahoo! YUI Grids CSS, Grids Builder.
    Este marco, que precede a Blueprint, viene con seis plantillas preestablecidas y cuatro anchos preestablecidos, y los diseños se ajustan a las pautas de los bloques de anuncios de IAB. YUI Grids CSS está integrado con el resto de Yahoo! Biblioteca de interfaz de usuario (UI).
  3. YAML, YAML Builder.
    YAML (Yet Another Multicolumn Layout) tiene bastante madurez, se basa en estándares web y es supuestamente fácil de usar. Aunque no parece tener mucho uso en la comunidad de WordPress. De hecho, en los cientos de temas de WP que he visto durante los últimos tres años, no recuerdo haberlos usado una sola vez. Esto podría deberse a que necesita una licencia para usarla con algunos CMS (sistemas de administración de contenido).
  4. Grid Designer.
    Esta es una herramienta web para generar cuadrículas CSS personalizadas. Utiliza sus propias clases de CSS, por lo que podría decirse que es un marco, aunque no es tan compatible con la comunidad de diseño como algunos otros.
  5. Sistema de cuadrícula 960 CSS. Este sistema se basa en un ancho de página de 960 píxeles, que es un número que es divisible por muchos otros números, por lo que es "un número base altamente flexible para trabajar". Sin embargo, 960 Grid solo funciona con 12 o 16 columnas.
  6. CSS Boilerplate. Producido como un marco simplificado por uno de los autores originales de Blueprint.
  7. Sparkl. La documentación dice que puede crear páginas de 1, 2 o 3 columnas, pero las muestras sugieren que tiene más flexibilidad.

Hay otros marcos de CSS Grid que puede encontrar listados en Google Code, pero de los tres o cuatro más que miré, la mayoría estaban incompletos en cuanto a documentación o incluso archivos de proyectos, así que los he dejado. Si conoce un marco que no figura en la lista, ¡háganoslo saber en los comentarios!

Comparación

Permítanme señalar que esta no es una comparación completa de los marcos de CSS. De hecho, no he usado mucho más que Blueprint, aunque he escaneado documentos en todos los marcos mencionados anteriormente y he jugado un poco con YAML y Grid Designer. Blueprint, YUI Grids y YAML son posiblemente los "tres grandes" en el espacio del marco CSS, y 960 parece ser una cuarta opción sólida.

Al elegir un marco, he tenido en cuenta que no soy un diseñador capacitado, más allá de lo que he estudiado por mi cuenta durante años. Hago incursiones en el diseño cuando es necesario, aunque en una forma muy minimalista. De hecho, como pasé unos cuantos años publicando mi propia revista impresa o trabajando en otros, hice un poco de diseño de página (realmente malo) usando los principios del diseño de cuadrícula que funciona con Adobe PageMaker. Por eso me resulta muy natural trabajar con CSS Grids para el diseño web. Parece que dada la cantidad de temas de WordPress que hay por ahí (ver la lista al final de este artículo) que se basan en un marco de cuadrícula (principalmente Blueprint), los diseñadores también se sienten bastante cómodos con las cuadrículas.

Sin embargo, con el tiempo siempre limitado, necesito algo fácil de aprender y usar, pero robusto. He encontrado que Blueprint CSS Grid satisface mis necesidades. Se integra muy bien con varias bibliotecas de JavaScript, incluida jQuery, que puede dar como resultado algunas interfaces web muy atractivas. Se desempeña bien (aunque no al 100% a la perfección) en la mayoría de los navegadores, aunque es necesario probar esa gran espina en el lado de los diseñadores web, el navegador IE.

El último año, basado en mi investigación de CSS Grids, Blueprint parece ser el marco más robusto, el menos restrictivo, el más compatible, en términos de su uso generalizado, el más pequeño en tamaño y el marco con la mayoría de las herramientas. . De hecho, la belleza de Blueprint es que puede producir muy rápidamente el código CSS para un marco personalizado utilizando herramientas como el Blueprint Grid CSS Generator de Kematzy. Aunque puedes hacer esto con Grid Designer, una comparación rápida sugeriría que no es tan robusto como Blueprint.

En el otro lado, escaneando y navegando la documentación de Yahoo! El marco CSS de UI Grids me lleva a creer que si solo quieres hacer un diseño de página web simple y quieres jugar con algunos ajustes preestablecidos, es posible que desees ver esta opción. Sin embargo, creo que es un poco demasiado restrictivo para mi gusto. (Es posible que desee leer Blueprint CSS Framework de Foo Hack frente a YUI Grids).

En última instancia, cuando se trata de aprender algo nuevo en línea, como un lenguaje de programación y una biblioteca / marco de código, siempre aplico la "regla de los hombros de gigantes". Primero presento las opciones que parecen adecuadas para lo que necesito, luego las selecciono en función de cuánto se ha escrito. Puede que no parezca justo para las nuevas opciones, pero el proceso no es mucho más arbitrario que la cantidad de gente que elige las aplicaciones web para usar. Hay demasiado por ahí para mantener un seguimiento, y tener una comunidad de apoyo existente hace una gran diferencia.


Blueprint - Mi elección

Por qué elegí Blueprint CSS

Blueprint CSS Grid Framework es lo que usaré en todos mis tutoriales en NETTUTS (cuando sea relevante). En lugar de copiar la lista de funciones de los documentos en Google Code, permítame centrarme en por qué lo elegí personalmente. Algunos de estos puntos se superponen con lo que he dicho anteriormente:

  1. Relativamente pequeños tamaños de archivo. Tiene versiones comprimidas para uso de producción, para mayores reducciones de tamaño.
  2. Imprimir + hojas de estilo de pantalla.
  3. Simple de integrar y usar. (Aunque los navegadores IE son problemáticos, según la versión de Blueprint que se esté utilizando).
  4. Es fácil recordar las clases de CSS y las identificaciones que probablemente no coincidirán con las que ya estás usando.
  5. Un montón de herramientas de apoyo, especialmente para generar cuadrículas personalizadas.
  6. Muchos artículos / tutoriales sobre Blueprint, con mucha vibra positiva.
  7. Mucho uso de los diseñadores de temas de Blueprint by WordPress.

Como se mencionó anteriormente, me encuentro con problemas de IE, ¿pero no todos? Varios temas de WP que utilizan Blueprint han resuelto los problemas del navegador IE, por lo que estoy extrapolando la creencia de que en su mayoría se pueden resolver.
Blueprint, a partir de este escrito, no admite diseños líquidos, algo de lo que no soy un gran fan de todos modos. Sin embargo, tal apoyo aparentemente está llegando, en caso de que te inclines de esa manera.

Ejemplo de proceso de diseño basado en cuadrícula

Bueno, esto es una cuestión de elección, ¿no? Algunas cuadrículas de CSS vienen con una cuadrícula.png o incluso un archivo .psd que puede usar en modo transparente en Photoshop, Fireworks, GIMP, etc., mientras coloca los elementos de diseño. Soy un poco más viejo y siempre diseño mis diseños comenzando en el papel:

  1. Bloquea un rectángulo delimitador que representa una página web completa. (Haga esto para cada página que esté diseñando).
  2. Particione el rectángulo en rectángulos más pequeños que representan áreas primarias: encabezado, pie de página, barra lateral, área de contenido, etc.
  3. Particiones adicionales áreas principales y lápiz en el componente de diseño "atómico" (sitio, logotipo, botón RSS, publicaciones recientes, comentarios recientes, cuadro de búsqueda, publicaciones de muestra, miniaturas de publicaciones, etc.)
  4. Convierta ese boceto final en HTML de esqueleto, usando texto real o lorem ipsum. El marcado HTML incluirá la clase de CSS Grid necesaria y los valores de identificación para admitir el diseño que necesito.
  5. Crear banners / botones en el software de gráficos.
  6. Pruebe la maqueta de HTML en tantos navegadores y versiones como sea posible. (Es posible que necesite contratar algunos amigos si solo tiene una computadora).
  7. Convertir texto en CMS / código de plataforma. (Por ejemplo, convierta los bloques de texto en las llamadas necesarias de la función WP y el código PHP).

Notará que en ninguna parte de ese proceso está el uso de software de gráficos para maquetas de diseño. Eso es porque no soy un diseñador y uso un enfoque muy minimalista para lo que diseño (solo para mí). Pero si planea usar, digamos, Fireworks para su maqueta, lo haría entre los pasos # 3 y # 4.

Resumen

Intenté ser exhaustivo en mi búsqueda de CSS Grid Frameworks, escaneando más de 120 artículos en busca de clientes potenciales. Sin embargo, es posible que haya perdido algunas opciones, así que siéntase libre de ofrecer otras.
Cualquiera que sea el marco CSS que decida usar, hágalo porque se adapta mejor a sus necesidades generales. Si las páginas / plantillas que diseñe tendrán publicidad, considere qué tipo de anuncios. Al principio, cuando elegí temas para mis sitios, elegí los anuncios de AdSense (que cumplen con IAB). Más recientemente, he estado seleccionando / diseñando para bloques de 125x125 anuncios, que prefiero sobre la mayoría de los bloques de AdSense.
Si está interesado, hay un borrador de especificación del W3C titulado CSS Grid Positioning Module Level 3 (escrito por dos empleados de Microsoft) que trata sobre la integración del diseño basado en cuadrícula en CSS. Las características discutidas en este borrador podrían estar en IE 8.

Referencias

Herramientas relacionadas

  1. Blueprint CSS AIR Grid Tool.
  2. Blueprint CSS Quick Reference (PDF, 1 página).
  3. CSS Grid Calculator.
  4. Diagnostic CSS.
  5. Reset CSS.

Algunos artículos o sitios sobre CSS Grid Frameworks

Aquí hay enlaces a algunos de los muchos grandes artículos que hay sobre CSS Grids.

  1. 456 Berea Street - Grids, Tables, CSS.
  2. Una lista aparte: pensando fuera de la cuadrícula, estableciendo el tipo en la red a una cuadrícula de línea base.
  3. Olav Bjørkøy - Launch: Blueprint, a CSS Framework.
  4. La serie de 5 partes de Mark Boulton, Cinco pasos simples para diseñar sistemas de Grid.
  5. Jeff Croft - ¿Qué es lo que no debe amar de los marcos de CSS?
  6. Demostraciones CSS - Hands on With Blueprint, un marco CSS.
  7. Trucos CSS - GridControl.
  8. Diseño por Grid.
  9. Cameron Moll - Gridding the 960.
  10. Smashing Magazine: diseño con enfoque basado en cuadrícula, seis técnicas de columna creativa.
  11. Mente de piedra - Primeras impresiones del marco CSS Blueprint.
  12. Resta - Oh Yeeaahh! (o cómo usar la cuadrícula en un diseño)
  13. Blog tutorial.
  14. Vandelay Design - 65 recursos para el diseño basado en cuadrícula.
  15. W3 - CSS y diseño de cuadrícula.
  16. Web Designer Wall - Grid and Column Designs.

Revolución - El tema Premium

46 temas de especialidad gratuitos o de pago

Si siente que aún no está preparado para abordar las cuadrículas y el diseño de temas, pero necesita un tema basado en cuadrículas, esta es probablemente una de las listas más completas que encontrará. (En realidad, hay más de 46, si incluye variaciones). Incluye revistas, similares a revistas, galerías, especialidades y varios temas premium que utilizan cuadrículas CSS explícitas o implícitas. (Es posible que uno o dos no usen cuadrículas, aunque a primera vista, parecen serlo).
Algunos de estos temas son gratuitos o tienen una versión gratuita. La mayoría son para la plataforma WordPress. Esta lista solo incluye temas disponibles para el público en general, no necesariamente temas de cuadrícula personalizados utilizados por varios bloggers. (Vea los enlaces de selección en la lista anterior, incluidos Web Designer Wall y Smashing Magazine para obtener instantáneas de dichos sitios. También vea la sección Sustracción de Khoi Vinh, como un ejemplo de un sitio basado en cuadrícula visualmente impactante).
Advertencia: Algunos de estos temas podrían no funcionar en WP 2.5x +

  1. Revista Artfull. (Asegúrese de usar el conmutador de temas en esta página, esquina inferior derecha).
  2. Block Magazine.
  3. BranfordMagazine.
  4. Chimera Pro.
  5. Contenido de prensa.
  6. Cornerstone.
  7. Galería CSS.
  8. Deadwood, Deadwood Lite.
  9. Fjords09.
  10. Forte. (Nota: actualmente mostrando una página suspendida)
  11. Noticias frescas.
  12. Futurosity.
  13. Enfoque de cuadrícula.
  14. Gridline - Lite, Noticias, Revista.
  15. Gridlock.
  16. IndoMagz.
  17. Jello Wala Mello.
  18. Live Wire series.
  19. Magazine News.
  20. Massive News.
  21. Mimbo, Mimbo Pro.
  22. Monochrome - Galería, Autor, Pro, Lite.
  23. Nautica.
  24. Noticias - Quommunication.
  25. NewsPixel.
  26. NewsPress.
  27. Options.
  28. Overstand.
  29. Tema Premium de Noticias - The Gazette Edition.
  30. Rebel Magazine.
  31. Revolución y varias variaciones.
  32. Showcase Gallery.
  33. Simplicity.
  34. Structure.
  35. Tauren Pro.
  36. TMA - The Morning After.
  37. Trevilian Way.
  38. Victoria.
  39. Visionary.
  40. Visualization.
  41. WordPress Magazine (Gabfire).
  42. WP-Magazine Theme.
  43. WP-Polaroid.
  44. Ygo CMS.
  45. Your Revolution.
  46. Zeke.

La lista anterior de temas de revistas se compila a partir de las siguientes referencias, así como de la búsqueda en Google.com.

  1. Bootstrapper.
  2. Clever Sage.
  3. Graph Paper Press.
  4. Michael Doig.
  5. The Blog Entrepreneur.
  6. Theme Playground.
  7. Vandelay Design.
  8. Visual Blast.
  9. Web Hosting Show.
  10. Squidoo Magazine Themes lens.
Advertisement
Advertisement
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.