Si te encanta el diseño basado en grid, este artículo es para ti. Hemos rastreado la web y compilado todos los recursos de gran red que pudimos encontrar. Tenemos todos los mejores marcos, constructores de grillas, guías prácticas y más.
¡Empieza a navegar y marcar!
¿Odio los marcos de cuadrícula?
Antes de comenzar, solo quiero decir que sé muy bien que muchas de las personas que leen esto ya están llenas de ira por los males de los marcos de diseño.
En verdad, hay mucho que decir contra los marcos de cuadrícula. Son engorrosos, tienen una curva de aprendizaje y a menudo tiran la semántica por la ventana. Además, hay un millón de estas cosas, lo que dificulta que las discusiones sobre prácticas estándar incluso comiencen.
Si cae en el campo de los que odian los marcos de CSS, no se preocupe, todavía hay muchos recursos de diseño de cuadrículas a continuación que no tienen nada que ver con los marcos. Mientras tanto, aquí hay algunas alternativas a los marcos de cuadrícula.
Rodando sus propios diseños de cuadrícula sobre la marcha
Hace poco publiqué un artículo sobre cómo lograr fácilmente diseños complejos de varias columnas de forma rápida y sin necesidad de marcos complicados ni nombres de clases no semánticos. Es tan fácil que nunca podría usar un marco para el diseño de nuevo.
Sin rejilla
Gridless es una plantilla de HTML5 y CSS3 opcional para hacer que los primeros sitios web móviles, con múltiples tipografías y con capacidad de respuesta sean móviles. No viene con ningún sistema de cuadrícula predefinido o clases no semánticas.
Diseño de pila
Un sistema de diseño de CSS basado en componentes y ancho flexible que hace un uso intensivo de los elementos de bloque en línea.
HTML5 boilerplate
HTML5 Boilerplate se está convirtiendo rápidamente en el punto de partida estándar para proyectos de diseño web moderno. La última vez que lo verifiqué tiene todo lo que pueda desear con la exclusión de un sistema de red.
Marcos de la vieja escuela
Estas son las redes de abuelos que han existido durante años. Algunos de ellos realmente están empezando a mostrar su edad, por lo que puede o no desear usarlos hoy.
Cianotipo
Blueprint es un marco CSS, cuyo objetivo es reducir el tiempo de desarrollo. Le brinda una base sólida para construir su proyecto además de una cuadrícula fácil de usar, tipografía sensible, complementos útiles e incluso una hoja de estilo para imprimir.
960.gs
960.gs es donde la mayoría de las personas comienzan cuando entran a los marcos de CSS y sistemas de cuadrícula. Todavía es bastante popular y muchos de los marcos más nuevos se basan al menos parcialmente en el trabajo aquí.
Sistema de rejilla Fluid 960
Una variante popular de 960.gs con un diseño fluido que ajusta automáticamente su ancho según el tamaño de la ventana del navegador.
YAML
? Sin embargo, otro diseño de columnas múltiples? (YAML) es un marco (X) HTML / CSS para crear diseños flotantes modernos y flexibles. La estructura es extremadamente versátil en su programación y absolutamente accesible para los usuarios finales.
Impresionante nuevo (er) marcos
Perkins
Perkins combina la novedad brillante de HTML5 y CSS3 con el increíble poder de LESS.js para crear un marco de CSS definitivo. Si te encanta experimentar con soluciones CSS futuristas, este es un gran marco para ti. Utiliza una variante de la cuadrícula de 1KB.
Menos marco
Less Framework es un sistema de cuadrícula CSS sensible para diseñar sitios web adaptativos. Contiene 4 diseños y 3 conjuntos de ajustes preestablecidos de tipografía, todos basados en una sola cuadrícula. ?¿Menos? en este sentido no debe confundirse con MENOS.js desde arriba. Lo sé, es confuso. ¡Necesitan ponerle nombre a esta otra cosa!
Columnal
Un sistema de cuadrícula CSS sensible que ayuda a los navegadores de escritorio y móviles a jugar juntos. Columnal utiliza su propio sistema de cuadrícula híbrida que se toma de otros pocos.
Esqueleto
Skeleton es un marco de respuesta impresionante que he escrito un par de veces antes. Si no está seguro sobre el tiempo extra y la curva de aprendizaje que implica el diseño responsivo, debe verificar esto. El esqueleto está construido libremente en 960.gs.
Marco de 52
Un marco que utiliza HTML5, CSS3 y JavaScript para maximizar la compatibilidad de las prácticas modernas de desarrollo web en todos los principales navegadores. Se basa en una simple cuadrícula de 16 columnas.
G5 Framework
(X) HTML5, CSS3, PHP y jQuery Front End Framework. G5 Framework comenzó como un proyecto personal. En un intento por acelerar el flujo de trabajo, reutilizar las mejores prácticas de codificación y técnicas de codificación similares, el marco sirve como un archivo de inicio para nuevos sitios web.
La cuadrícula de G5 Framework se basa en Easy Grid.
Fácil sistema de porcentaje de cuadrícula con HTML5
Las principales características de este sistema de cuadrícula es que todas las columnas tienen un ancho basado en porcentaje, por lo que se adaptan al elemento contenedor. Esto significa que con el uso de este sistema no tendrá que definir un ancho de cada columna a mano, simplemente puede colocarlo dentro de cualquier contenedor y los anchos de columna y los canales de la columna se establecerán automáticamente.
CSS de cabina
CSS Frameworks tienden a estar super hinchados. Cabin resuelve este problema con un sistema de extensión modular que le permite agregar solo lo que necesita. Varias extensiones de cuadrícula son compatibles.
jQuery Masonry
jQuery Masonry no es realmente un Framework CSS, es un complemento de JavaScript que permite diseños basados en cuadrícula que usan una especie de sistema flotante vertical. Es una herramienta increíble que es bastante popular en este momento.
InuitCSS
Este marco lo tiene todo: plugins progresivos, flexibles, móviles, sensibles, extensibles, accesibles, pragmáticos, funcionales, útiles, listos para la producción, más. El sistema de rejilla está personalizado a sus necesidades.
Marcos de huella pequeña
1 línea CSS Grid Framework
Pensé que una sola línea de CSS Grid sonaba loca, pero este tipo lo logró. No estoy seguro de lo práctico que es en el mundo real, ¡pero estoy impresionado con el pensamiento que se produjo en él!
Grilla de 1 KB
Este es uno de mis viejos favoritos.Es un sistema de cuadrícula reducido a sus elementos esenciales absolutos, no se necesita un video tutorial de sesenta minutos. Si no entiendes los sistemas de cuadrícula CSS, comienza aquí.
Tiny Fluid Grid
Al igual que la cuadrícula de 1KB solo es fluida para mayor diversión.
CSS delgado
SlimCSS es un marco ligero de CSS que establece una base sólida para múltiples navegadores con muchas características esenciales y al mismo tiempo es lo más pequeño posible.
Otros marcos
Gravedad
Gravity es un marco basado en SASS para crear sitios web HTML5 potentes y fáciles de mantener. Te ayuda a hacer un prototipo rápido de tus ideas y, en general, te hará la vida mucho más fácil.
1140 cuadrícula
La rejilla 1140 encaja perfectamente en un monitor 1280. En monitores más pequeños se vuelve fluido y se adapta al ancho del navegador.
Más allá de cierto punto, utiliza consultas de medios para ofrecer una versión móvil, que esencialmente apila todas las columnas una encima de la otra para que el flujo de información aún tenga sentido.
La cuadrícula cuadrada
Un marco simple de CSS para diseñadores y desarrolladores, basado en 35 columnas de igual ancho. Su objetivo es reducir el tiempo de desarrollo y ayudarlo a crear sitios web bellamente estructurados.
Rejilla fluida
Fluid Grid es un nuevo sistema de cuadrícula que funciona de la misma manera que Blueprint o 960, pero con cualquier ancho de página, incluso con diseños fluidos. Se basa únicamente en CSS.
EZ-CSS
EZ CSS es un tipo de marco de cuadrícula completamente diferente. Utiliza un sistema de módulos único que le permite copiar, pegar y anidar diseños simples para crear páginas complejas. Es un poco difícil envolver la cabeza, pero es un uso realmente brillante de CSS.
Marco de CSS FEM
FEM CSS Framework es un sistema de cuadrícula de 960px de ancho + 12 columnas + estilos comunes de CSS, para desarrollar fácil y rápidamente diseños web.
Se basa en el Sistema de cuadrícula 960, pero con un giro en la filosofía para que sea más flexible y rápido para jugar con las cajas.
CSS elástico
Un simple css framework para diseñar interfaces basadas en web, basadas en las técnicas de diseño impreso de 4 columnas pero con capacidades para combinaciones de columnas ilimitadas. Y capacidad para realizar fácilmente diseños elásticos, fijos y líquidos.
Atatonic CSS
Este marco está dirigido principalmente a la tipografía, pero también existe un sistema de cuadrícula muy ligero.
Base
Baseline facilita el desarrollo de un sitio web con una grilla agradable y una buena tipografía. La cuadrícula en la Línea de base se compone de 4 columnas básicas, para una mayor flexibilidad, cada columna se puede dividir en 2 unidades.
Emastic
Un marco de CSS ligero de cuadrícula fluida con un enfoque en la tipografía.
Rejilla dorada
The Golden Grid es un sistema web grid. Es un producto de la búsqueda del sistema de red moderno perfecto. Está destinado a ser una herramienta CSS para sitios web basados en cuadrícula.
Frak
Frak es un framework CSS para crear grillas fluidas. Tiene un concepto interesante que involucraba el uso de multiplicadores como nombres de clase.
Marco fácil
Fácil es un marco CSS / HTML / JavaScript que comenzó como un proyecto personal y luego se convirtió en algo más. La idea detrás de esto es reducir la cantidad de tiempo empleado en configurar la plantilla HTML básica básica reutilizando las mismas técnicas de codificación. Incluye un simple sistema de cuadrícula basado en porcentajes.
Cuadrícula
Rejilla: un sistema de rejilla de fluido simple y mínimo que puede fluir dentro de cualquier contenedor fijo o de fluido o funcionar bien con otro sistema de Rejilla.
520 cuadrícula
Un sistema de grid para diseñar páginas de Facebook, loco pero cierto.
Herramientas y constructores de grillas
Calculadora de cuadrícula
Una calculadora de cuadrícula realmente impresionante con soporte para plantillas de Photoshop e Illustrator.
Calculadora y generador de cuadrícula
GridCalc es una calculadora de cuadrícula fácil de usar. Simplemente ingrese el ancho deseado de su página y un rango aproximado para el ancho de su columna y canal y la calculadora le dará todas las combinaciones posibles dentro de los límites que ingresó.
Guía de Guía
GuideGuide es mi nuevo complemento favorito de Photoshop. Esta herramienta gratuita coloca automáticamente las guías en su documento de Photoshop en función de su entrada.
3? 4 Grid Builder
Grid Builder te permite construir fácilmente una cuadrícula HTML con un simple arrastre
y soltar la interfaz. Es una herramienta realmente interesante que le permite crear cuadrículas personalizadas para cada proyecto.
Gridr Buildrrr
Un constructor de cuadrícula personalizado super simple y eficaz.
Boks
Una herramienta realmente excelente y poco apreciada que le permite crear implementaciones personalizadas de Blueprint. Echa un vistazo a mi tutorial aquí.
Sistema de rejilla variable
El sistema de cuadrícula variable es una forma rápida de generar una cuadrícula CSS subyacente para su sitio. El archivo generado CSS se basa en el sistema de cuadrícula 960.
ZURB CSS Grid Builder
Un gran generador de cuadrículas que reparte una cuadrícula realmente simple con una huella pequeña.
Plancha
¿Quieres usar un diseño basado en cuadrícula sin un marco? Esta herramienta crea una imagen de fondo personalizada que facilita el diseño de cuadrícula por su cuenta.
Simplemente ponga sus dimensiones después de nuestra URL para obtener una imagen de guía de fondo para trabajar en su navegador. Las cuadrículas se crean sobre la marcha, por lo que cualquier combinación debería funcionar.
Cuadricula
Otra herramienta de imagen de fondo como la plancha. La principal diferencia es que Griddle genera una URL para que ingreses y esto te da una imagen real (me gusta más Griddle).
Sitios de amante de la rejilla y artículos que debes leer
Basado en cuadrícula
Una galería de diseño web llena de ejemplos asombrosos de diseño basado en cuadrícula.
Diseño por cuadrícula
Otro gran sitio dedicado a herramientas basadas en cuadrícula, artículos y otros recursos.
El sistema de rejilla
Una ventanilla única para todo lo relacionado con la red. Es una fuente antigua, pero parece que todavía se actualiza regularmente.
Diseño basado en cuadrícula simplificado
Una cartilla imbatible en los fundamentos del diseño basado en la red. Este debe ser el primer paso en tu búsqueda de diseño de cuadrícula.
El sistema de cuadrícula 960 hecho fácil
Una introducción completa para principiantes del sistema de cuadrícula 960 por parte de usted.
Diseño con enfoque basado en cuadrícula
Un artículo anterior de Smashing Mag, pero todavía tiene un montón de excelentes recursos e información para revisar.
Repensando CSS Grids
Mark Boulton explica cómo debería funcionar el soporte nativo de CSS para las cuadrículas. Una gran lectura!
Conclusión
Espero que hayas disfrutado de esta colección masiva y que tengas suficientes recursos de diseño basados en cuadrícula para mantenerte ocupado durante meses.
Deje un comentario a continuación y háganos saber lo que piensa de las herramientas y los recursos anteriores. ¿Utiliza algún marco de cuadrícula? ¿Cuáles y por qué?