Los marcos CSS han existido desde hace años, pero la llegada de prácticas de diseño receptivo ha inutilizado a muchos de nuestros favoritos. Afortunadamente, muchos desarrolladores realmente talentosos han saltado para llenar el vacío con la próxima generación de frameworks CSS y repetitivos.
Ya hay una tonelada de estas cosas flotando alrededor. Todo el mundo tiene una lista, pero nadie realmente le explica cómo cada framework y boilerplate difieren de los otros para que pueda tomar una decisión informada. Ese es nuestro objetivo hoy. Continúe mientras observamos lo que hace que cada uno de estos 22 marcos de respuesta y frameworks CSS sensibles sean únicos.
Gumby
El marco Gumby toma la cuadrícula 960 en la que todos nos cortamos los dientes hace años y lo lleva a la era moderna del diseño web con un toque sensible. También tiene estilos predefinidos para cosas como formularios, botones, alternar, desplegables, pestañas y más.
El sistema de cuadrícula semántica
Si odias los sistemas de cuadrícula y su marcado y no semántico, este es para ti. El sistema de cuadrícula semántica aprovecha el poder de los preprocesadores de CSS (LESS, Sass y Stylus) para crear variables personalizables para cosas como el ancho del canal y la columna. Todo lo que tienes que hacer es usar algunos mixins precompilados en tu CSS, ¡no se requiere marcado adicional!
Sin rejilla
Gridless es un potente modelo que utiliza el primer diseño web móvil sensible para adaptarse al ancho del dispositivo. También está repleto de excelentes características como la normalización de CSS, correcciones de errores de IE y estilos de tipografía.
Sin marco
Sin marco es difícil de clasificar porque técnicamente es más una forma recomendada de acercarse al diseño responsivo que un conjunto real de archivos que puede descargar. Hay tres pasos: primero, haga una cuadrícula regular de ancho fijo, luego haga que se repita infinitamente y termine centrándola en la ventana gráfica.
El sitio indica específicamente que Frameless no es un marco y que no hay archivos que se descarguen, pero a pesar de esta afirmación, de hecho hay algunas plantillas básicas para ayudarlo a comenzar.
Rejillas proporcionales
Las cuadrículas proporcionales resuelven algunos grandes problemas que surgen cuando se intenta un diseño de CSS sensible, a saber, agrupar las cuadrículas y luchar con valores basados en porcentajes en diferentes vistas.
Proportional Grids usa el tamaño de la caja de CSS para crear una solución que permita canales fijos (ems / rems) mezclados con columnas fluidas. La distancia entre columnas permanecerá igual en cada punto de ruptura, en relación con el tamaño de fuente base. Las columnas se definen por proporción, por ej. una mitad, un tercio, dos tercios y puede reutilizarse fácilmente tantas veces como desee, incluso cuando esté anidado.
El enfoque de Goldilocks
El enfoque Goldilocks tiene como objetivo reducir la tendencia de los diseños sensibles a inclinarse hacia el soporte de dispositivos específicos. En su lugar, busca un diseño universal que no dependa de ningún dispositivo.
El Enfoque Goldilocks utiliza una combinación de ems, ancho máximo, consultas de medios y traducciones de patrones para considerar tres estados que permiten que sus diseños sean independientes de la resolución.
Twitter Bootstrap
Twitter Bootstrap no necesita presentación. Es uno de los marcadores de CSS más grandes y malos de la web y es el punto de partida de innumerables sitios profesionales y personales de desarrolladores de todo el mundo.
Twitter Bootstrap incluye un sistema de cuadrícula sensible además de toneladas de elementos estelares de estilo previo, como formas, botones, menús de navegación y más. Echa un vistazo a nuestra introducción completa aquí.
Fundación de ZURB
Foundation es el competidor más importante de Twitter Bootstrap ya que los dos proyectos son muy similares. Al igual que Bootstrap, Foundation le brinda una cuadrícula receptiva así como varios elementos de UI con estilo.
Foundation 3 se acaba de lanzar recientemente, así que si no ha echado un vistazo al proyecto en un tiempo, es hora de pasar y comprobarlo. Es indiscutiblemente uno de los marcos más útiles y completos que encontrarás en cualquier lugar.
Esqueleto
Skeleton fue una de las primeras placas de respuesta para hacer una aparición y sigue siendo uno de los mejores. En concepto, es un poco como Foundation solo porque se siente más liviano (el tipo, los botones y las formas son los únicos elementos de UI incluidos).
Echa un vistazo a nuestro tutorial Skeleton para ver lo increíblemente fácil que es esta herramienta para hacer que un diseño receptivo funcione en minutos.
Amazium
Amazium se parece mucho a Gumby en lo que se refiere a que es una cuadrícula receptiva construida sobre las 960 técnicas de cuadrícula antiguas. Recientemente, aunque el marco se ha actualizado para extenderse hasta 1,200px para que pueda aprovechar las grandes pantallas. ¡Incluso incluye soporte para retina!
Sistema Golden Grid
El Sistema Golden Grid se llama a sí mismo una "rejilla plegable". lo que en realidad es solo una forma elegante de decir que las consultas de medios se utilizan para colapsar el diseño original de dieciséis columnas en ocho y luego en cuatro columnas a medida que la ventana gráfica se estrecha.
Al igual que algunas de las otras cuadrículas que hemos visto hasta ahora, Golden Grid System utiliza canales basados en ems para que los canales permanezcan siempre en proporción al contenido.
El sistema de cuadrícula CSS de 1140px
Este es un sistema de red bastante estándar sin nada sofisticado. Comienza con una cuadrícula fluida de 12 columnas que utiliza canales basados en porcentajes y funciona bien en monitores de 1,280 y 1,140px. A medida que la ventana gráfica se hace más pequeña, se utilizan un par de consultas de medios simples para retransmitir el contenido.
StackLayout
StackLayout es para los rebeldes, va a ser muy diferente de otros marcos que hayas probado. De hecho, surgió de una aversión a los marcos de diseño de CSS típicos.
El principio básico que funciona aquí es que StackLayout utiliza el bloque en línea como la piedra angular de un sistema de diseño único. El sistema es un poco peculiar, pero es bastante impresionante. Echa un vistazo a un tutorial aquí.
SimpleGrid
SimpleGrid es otro sistema de diseño único que disfrutarás si te encanta jugar con estas cosas tanto como yo. La cuadrícula aquí se basa en cuatro rangos de pantalla diferentes: pantallas de menos de 720 píxeles de ancho, pantallas de más de 720 píxeles de ancho, pantallas de más de 985 píxeles de ancho y pantallas de más de 1235 píxeles de ancho.
Para implementar el sistema, utiliza? Slot? Clases de diseño tanto de cuatro como de seis columnas. Suena complicado, pero en realidad es fiel a su nombre y bastante simple de implementar.
Línea de base fluida
La cuadrícula de línea de base fluida se construye con un fuerte énfasis en una tipografía sólida que se adhiere a una cuadrícula de línea de base. También contiene una cuadrícula plegable de tres columnas que pretende ser un punto de inicio útil, no un estándar a seguir.
Columnal
Columnal es una especie de sistema de cuadrícula híbrido que toma prestados los mejores elementos de otros marcos. Tiene el ADN elástico del sistema de cuadrícula CSS de 1140px con unos 960.gs también incluidos. Es algo bastante estándar, pero si los otros no parecen un buen ajuste, puedes probarlo.
Inuit.css
Inuit.css es un gran marco que realmente está construido teniendo en cuenta la extensibilidad. Utilice el generador de cuadrículas personalizado para crear su propia cuadrícula de respuesta, luego descargue algunos iglús (complementos) para ampliar el marco de forma útil.
320 y más
320 and Up es como una colección de palabras de moda de diseño web (de una buena manera). Contiene un sistema de diseño receptivo que utiliza el "móvil primero". mentalidad, junto con los estilos visuales de Bootstrap, los iconos de Font Awesome, Modernizr, Selectivizr, LESS y Sass. Es una impresionante pequeña caja de herramientas con cosas que creo que disfrutarás.
Susy: Grids responsive para Compass
Este es para los súper nerds como yo que aman los sistemas de diseño, así como Sass y Compass. Construye tus diseños en minutos con la magia de los mixins y las variables.
Dado que Compass ha eliminado recientemente el soporte nativo para las cuadrículas, Susy debería ser útil para quienes las extrañen.
Initializr - Plantilla HTML5 Responsive
Initializr es una herramienta que le ayuda a iniciar sus proyectos HTML5 de forma rápida y sencilla utilizando HTML5 Boilerplate, Bootstrap o una nueva placa de respuesta sensible.
La selección de la plantilla receptiva es solo el comienzo, desde allí usted crea su descarga personalizada al elegir entre todos los recursos que normalmente desea, como Modernizr y LESS.
Otro plato de calderas móvil
YAMB es un excelente punto de partida para sus proyectos web receptivos, basado en algunas características clave: una cuadrícula fluida receptiva, menús desplegables de navegación que se convierten automáticamente en cuadros de selección en pantallas pequeñas e imágenes / presentaciones de diapositivas sensibles.
Creo que el sitio web es bastante feo, pero el conjunto de herramientas en sí es bastante práctico.
Wirefy
Wirefy está construido específicamente con una experimentación rápida de wireframing en mente. Utiliza una versión modificada de la cuadrícula de dieciséis columnas 960 junto con algunos elementos de interfaz de usuario similares a Bootstrap (menús, formularios, presentaciones de diapositivas, botones, imágenes, etc.).
¿Cuál es tu favorito?
Inevitablemente, este tipo de publicaciones atraerá a los comentaristas que sienten la necesidad de intentar desacreditar la noción completa de usar cualquier tipo de plantilla o sistema de cuadrícula para el diseño web. Simplemente no son para todos y respeto tu opinión si no puedes soportarlas.
Sin embargo, si te gustan los sistemas de grilla, me encantaría escuchar tus comentarios sobre las opciones anteriores. ¿Cuáles has probado y qué pensaste de ellos? ¿Cuál es tu favorito?