¿Cuál es el correcto para mí? 22 marcos de referencia CSS adaptables y repeticiones explicadas
Los marcos CSS han existido durante años, pero la llegada de prácticas de diseño receptivo ha inutilizado muchos de nuestros viejos favoritos. Afortunadamente, muchos desarrolladores realmente talentosos han saltado para llenar el vacío con la próxima generación de frameworks CSS y repeticiones.
Ya hay un montón de estas cosas flotando. Todos tienen una lista, pero nadie realmente lo guía a través de cómo cada marco y repetitivo difiere del siguiente para que pueda tomar una decisión informada. Ese es nuestro objetivo hoy. Siga a medida que echamos un vistazo a lo que hace que cada uno de estos 22 marcos y plantillas repetitivas de CSS sean únicos.
Gumby
El marco Gumby toma la cuadrícula 960 en la que todos nos cortamos los dientes hace años y la trae a la era moderna del diseño web con un toque receptivo. También tiene estilos preconstruidos para elementos como formularios, botones, conmutadores, menús desplegables, pestañas y más.
El sistema de cuadrícula semántica
Si odias los sistemas de red y su marcado hinchado, no semántico, este es para ti. El sistema de cuadrícula semántica aprovecha la potencia de los preprocesadores CSS (LESS, Sass y Stylus) para crear variables personalizables para cosas como la canaleta y el ancho de columna. Todo lo que tiene que hacer es usar algunos mixins preconstruidos en su CSS, ¡no se requiere un marcado adicional!
Sin rejilla
Gridless es una potente plantilla que utiliza un diseño web sensible primero móvil 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 abordar el diseño receptivo 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 establece específicamente que Frameless no es un marco y que no se descargan archivos, pero a pesar de esta afirmación, de hecho, hay algunas plantillas básicas para ayudarlo a comenzar.
Rejillas Proporcionales
Las cuadrículas proporcionales abordan algunos de los grandes problemas que surgen al intentar un diseño CSS receptivo, es decir, anidar cuadrículas y luchar con valores basados en porcentajes en ventanas gráficas muy diferentes.
Las cuadrículas proporcionales utilizan el tamaño de cuadro de CSS para crear una solución que permita canales fijos (ems / rems) mezclados con columnas de fluido. 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 ejemplo, la mitad, un tercio, dos tercios y se pueden reutilizar fácilmente tantas veces como desee, incluso cuando están anidadas.
El enfoque de Ricitos de Oro
El enfoque Goldilocks tiene como objetivo reducir la tendencia de los diseños receptivos a inclinarse hacia el soporte de dispositivos específicos. En cambio, 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 una de las plantillas de CSS más grandes y malas de la web y es el punto de partida para 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 previamente diseñados como formularios, 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 y varios elementos de interfaz de usuario con estilo.
Foundation 3 acaba de lanzarse recientemente, por lo que si no ha echado un vistazo al proyecto durante un tiempo, es hora de pasar y echarle un vistazo. Es sin duda uno de los marcos más útiles y completos que encontrarás en cualquier lugar.
Esqueleto
Skeleton fue una de las primeras repeticiones sensibles en aparecer y sigue siendo una de las mejores. En concepto, es un poco como Foundation, solo que se siente más liviano (el tipo, los botones y las formas son los únicos elementos de la interfaz de usuario incluidos).
Consulte nuestro tutorial de esqueleto para ver cuán increíblemente fácil es que esta herramienta le permita obtener un diseño receptivo y funcionar en minutos.
Amazium
Amazium se parece mucho a Gumby en el sentido de que es una cuadrícula receptiva construida sobre las técnicas de cuadrícula 960 de antaño. Recientemente, aunque el marco se ha actualizado para extenderse hasta 1.200 píxeles para que pueda aprovechar las pantallas grandes. ¡Incluso incluye soporte para pantallas de retina!
Sistema de rejilla dorada
El Sistema Golden Grid se llama a sí mismo una "cuadrícula plegable", que es realmente 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 cuatro columnas a medida que la ventana 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 siempre se mantengan en proporción al contenido.
El sistema de cuadrícula CSS de 1140 px
Este es un sistema de red bastante estándar sin nada lujoso. Comienza con una cuadrícula de fluido de 12 columnas que utiliza canales basados en porcentajes y funciona muy 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 redistribuir el contenido.
StackLayout
StackLayout es para los rebeldes, será muy diferente de otros marcos que hayas probado. De hecho, surgió de una aversión a los marcos de diseño CSS típicos.
El principio básico en el trabajo aquí es que StackLayout utiliza el bloqueo en línea como la piedra angular de un sistema de diseño único. El sistema es un poco peculiar, pero no obstante es bastante impresionante. Echa un vistazo a un tutorial aquí.
SimpleGrid
SimpleGrid es otro sistema de diseño único que disfrutará si le encanta jugar con estas cosas tanto como a mí. La cuadrícula aquí se basa en cuatro rangos de pantalla diferentes: pantallas de menos de 720px de ancho, pantallas de más de 720px de ancho, pantallas de más de 985px de ancho y pantallas de más de 1235px de ancho.
Para implementar el sistema, utiliza clases de "ranuras" de un diseño de cuatro y seis columnas. Suena complicado, pero en realidad es fiel a su nombre y bastante simple de implementar.
Rejilla de línea de base fluida
Fluid Baseline Grid está construido con un fuerte énfasis en la tipografía fuerte 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 partida útil, no un estándar a seguir.
Columna
Columnal es una especie de sistema de cuadrícula híbrido que toma prestados los mejores elementos de varios otros marcos. Tiene el ADN elástico del sistema de cuadrícula CSS de 1140 px con algunos 960.gs también incorporados. Es algo bastante estándar, pero si los demás no parecen encajar bien, puede probarlo.
Inuit.css
Inuit.css es un gran marco que en realidad está construido con la extensibilidad en mente. Use el generador de cuadrícula personalizado para crear su propia cuadrícula receptiva, luego descargue algunos iglúes (complementos) para ampliar el marco de formas útiles.
320 y hasta
320 y hasta es como una colección de palabras de moda de diseño web (en el buen sentido). Contiene un sistema de diseño receptivo que utiliza la mentalidad de "móvil primero", junto con estilos visuales Bootstrap, iconos Font Awesome, Modernizr, Selectivizr, LESS y Sass. Es una pequeña caja de herramientas impresionante de golosinas que creo que disfrutarás.
Susy: cuadrículas receptivas para Compass
Este es para los super nerds como yo que aman los sistemas de diseño, así como Sass y Compass. Crea 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 redes, Susy debería ser útil para aquellos que las extrañan.
Initializr: plantilla HTML5 receptiva
Initializr es una herramienta que le ayuda a lanzar sus proyectos HTML5 de forma rápida y sencilla utilizando HTML5 Boilerplate, Bootstrap o una nueva plantilla sensible.
Seleccionar la plantilla receptiva es solo el comienzo, a partir de ahí, puede crear su descarga de forma personalizada eligiendo entre todos los recursos que normalmente desea, como Modernizr y LESS.
Sin embargo, otra caldera 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 de navegación desplegables que se convierten automáticamente en cuadros de selección en pantallas pequeñas e imágenes / presentaciones de diapositivas receptivas.
¡Creo que el sitio web es bastante feo, pero el conjunto de herramientas en sí es bastante útil!
Wirefy
Wirefy está construido específicamente teniendo en cuenta la rápida experimentación de la estructura de alambre sensible. Utiliza una versión modificada de la cuadrícula 960 de dieciséis columnas junto con algunos elementos de interfaz de usuario tipo 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 su opinión si no puede soportarlos.
Sin embargo, si te gustan los sistemas de cuadrícula, me encantaría escuchar tus comentarios sobre las opciones anteriores. ¿Cuáles has probado y qué piensas de ellos? ¿Cuál es tu favorito?
