Los 21 mejores marcos y sistemas de cuadrícula HTML5 / CSS3

Los métodos de diseño tradicionales hace solo unos años significaban que tenía que diseñar una página de inicio por sí solo, uniendo marcos de alambre y cuadros de contenido y luego esperar lo mejor, pero gradualmente esta técnica ha desaparecido y nuevos métodos más modernos de desarrollo rápido de sitios web. Haber emergido. En particular, CSS3 introdujo Flex-box, una función de cuadrícula fácil de usar que podría usar para crear diseños de contenido, pero aún así, algunos son resistentes, mientras que otros adoptan enfoques aún más complicados para una precisión de diseño absoluta.

Cuando abre un nuevo sitio web, normalmente lo que verá es la parte del encabezado del sitio, el área de contenido y una barra lateral; esas áreas principales también incluyen sus propios diseños y especificaciones, y el agujero del conejo continúa profundizándose. Es crucial encontrar una manera de diseñar un diseño de página de inicio (o cualquier otra página) que se vea bien en todos los medios, dispositivos y software. Por lo tanto, pensamos que podría ser útil para nuestros compañeros desarrolladores que reuniéramos una colección de marcos y sistemas CSS y HTML para desarrollar diseños de cuadrícula.

¿Quieres más marcos? Pruebe nuestros otros resúmenes:

• Frameworks de JavaScript
• Marcos HTML5
• Marcos CSS3
• Frameworks de Node.js

No hace falta decir que estos diseños se adaptan a cualquier situación, por lo que puede ahorrarse el dolor de cabeza de tener que resolver las torceduras y peculiaridades del diseño del diseño en sí, y en lugar de eso, concéntrese en cumplir esos cuadros de cuadrícula con el contenido que desea. poner allí. Hay una gran variedad y diferentes estilos que encontrará en estos sistemas de cuadrícula, tómese un tiempo para visitar las páginas de demostración y tal vez incluso escriba lo que está buscando para que le resulte más fácil encontrar el marco correspondiente. para sus necesidades.

Cuadrícula simple muerta

Las cuadrículas nunca deberían ser complicadas, en su verdadera esencia son solo elementos HTML que combinan un diseño general, y Vladimir Agafonkin es uno de los desarrolladores que adopta ese concepto. Su marco de cuadrícula, Dead Simple Grid, tiene solo doscientos bytes de código CSS; Esa es una cantidad mínima de código, sus páginas ni siquiera notarán que está allí. Puede separar la cuadrícula para presentar un área de contenido principal y una barra lateral flexible si lo desea. Este tipo de cuadrícula se adaptaría a blogs y diseños de página de inicio generales donde se prefiere un diseño mínimo. El diseño receptivo está integrado gracias a las consultas de medios, por lo que la cuadrícula se verá impecable en cualquier dispositivo en el que se esté utilizando.

Bourbon puro

Bourbon es una biblioteca muy exitosa de mixins para preprocesador SASS. Esto, por supuesto, ha hecho de Neat una opción atractiva para aquellos que ya usan Bourbon y SASS. Neat brinda a los desarrolladores acceso a un sistema de cuadrícula fluido que es lo suficientemente rápido y fácil de configurar en minutos, pero flexible hasta el punto en que los cambios y ajustes ilimitados no se convertirían en un problema.

Grd

Grd es un sistema de cuadrícula CSS que usa Flexbox como la herramienta de backend para crear diseños flexibles y modernos con capacidad de respuesta. Con la demostración en vivo, puede jugar con la configuración y las diferentes personalizaciones de diseño para ver si Grd podría resolver su problema de integrar un elemento de diseño en particular en su flujo de trabajo existente. Nos resultó fácil crear encabezados, pies de página y áreas de contenido general usando nada más que un menú desplegable de configuraciones.

ESTRUCTURA

Structure, que también se basa en Flexbox, utiliza patrones de sintaxis declarativa (similares a los de Angular.js) para definir secciones y parámetros de diseño. Algunos desarrolladores se han quejado de que el marcado final de la página no se puede validar, pero la idea es que con Structure puedes crear una cuadrícula declarativa que no interfiera con los atributos CSS tradicionales, como clases y nombres de identificación.

Sistema de cuadrícula 960

Cientos de miles de sitios web han utilizado el sistema de cuadrícula 960 de Nathan Smith para potenciar su diseño. Es una herramienta eficaz para agilizar el flujo de trabajo de los desarrolladores web que trabajan duro. Mediante la elección de dos diseños de columnas diferentes (12 y 16 respectivamente), los desarrolladores pueden iniciar rápidamente una página de inicio que admita cualquier tipo de entrada dinámica y estática. Es posible agregar más columnas, pero deberá trabajar con la documentación para comprender el uso con mayor claridad.

No semántico

Unsemantic es la versión de seguimiento de la cuadrícula 960 que proporciona capacidades de diseño de respuesta completa. A través de clases de extracción únicas, los desarrolladores pueden reorganizar el diseño de la página que están produciendo, lo que podría ayudar a promover y mostrar el contenido más importante en un momento dado, una estrategia conocida para ayudar a los motores de búsqueda a comprender mejor el propósito de cada elemento de contenido. Unsemantic también es un usuario orgulloso de Media Queries, por lo que los desarrolladores de front-end establecidos no tendrán dificultades para personalizar este marco de cuadrícula para sus propias necesidades.

Cuadrícula simple

De ahí el nombre, Simple Grid es para todos los que buscan simplicidad y facilidad de uso. El diseño es receptivo, compatible con teléfonos inteligentes, tabletas y computadoras de escritorio. En otras palabras, el rendimiento de su proyecto será de primera sin ninguna duda. También está totalmente en sintonía con pantallas grandes y resoluciones más altas. Además, Simple Grid es solo una cuadrícula, sin ningún activo adicional, lo que la hace muy liviana. Con la conveniente estructura de doce columnas, tiene la libertad de crear el diseño que sea exactamente de su agrado. Puede dividirlo en dos, tres, cuatro o seis columnas sin problemas.

csswizardry-grids

Con una cuadrícula HTML, como csswizardry-grids, puede ahorrar tiempo y energía. Es una herramienta robusta que puede utilizar con precisión al contenido de su corazón. Es muy fácil de usar y estructurado, lo que garantiza que los desarrolladores web de todos los niveles lo aprovechen al máximo. En la captura de pantalla anterior, puede echar un vistazo a todas las diferentes variaciones que admite csswizardry-grids. Puede reordenar las cosas libremente, para que coincida con sus deseos a la perfección. Haga su actividad evitando realizar cosas desde cero con csswizardry-grids ahora y comience con el pie derecho.

Rejilla profunda

La libertad que te ofrece Profound Grid va más allá. Puede emplear este sistema de rejilla flexible y extensible tanto para diseños fijos como fluidos. El resultado funcionará en todos los dispositivos modernos sin problemas desde el primer momento. Puede crear la estructura exacta que desee cambiando, eliminando o agregando columnas según su gusto. Primero puede consultar algunos de los ejemplos para ver qué es posible con Profound Grid. Además, con los márgenes negativos al calcular las columnas, Profound Grid garantiza que los diseños fluidos se vean iguales independientemente del tamaño de la pantalla y del navegador web.

Plancha

Los beneficios de usar un sistema de cuadrícula son tremendos, ya que no solo ahorra tiempo, sino que tampoco necesita preocuparse por los tecnicismos. Por ejemplo, Griddle garantiza una compatibilidad total con los dispositivos y navegadores web más populares. Es decir, el rendimiento de su aplicación será de primera clase en todo momento. Con Griddle, puede hacer realidad cualquier cosa, desde cuadrículas proporcionales y anidadas hasta unidades centradas e híbridas. En cuanto a este último, con algo de personalización, puede combinar unidades fijas y fluidas en una construcción impresionante. Tiene control sobre el centrado horizontal de las unidades e incluso puede alterar la alineación vertical.

CSS Smart Grid

CSS Smart Grid sigue las últimas tendencias y regulaciones para garantizar la compatibilidad con diferentes dispositivos. En resumen, la herramienta es liviana, receptiva y móvil para que puedas crear cosas épicas con ella. Ya sea que use un teléfono inteligente o una pantalla de escritorio grande, CSS Smart Grid se asegura de que el diseño funcione en ambos sin problemas. Para su información, incluso si alguien usa un teléfono de funciones para navegar por Internet, su proyecto basado en CSS Smart Grid funcionará igual de bien, con una vista de una sola columna. En el sitio web oficial, también tiene un procedimiento rápido, para que no tenga problemas al usar la herramienta.

Gridlex

Gridlex se destaca por su diseño estelar y facilidad de uso. La simplicidad de este marco de cuadrícula basado en Flexbox es asombrosa, la visión es simple: envuelva sus columnas dentro de su cuadrícula y, si es necesario, realice ajustes adicionales para que su diseño final se vea irresistible. Con solo mirar las demostraciones de los sitios web que usan Gridlex, es evidente que este es un sistema de cuadrícula de primera línea y no se sentirá decepcionado por lo que puede hacer por sus propios proyectos y flujo de trabajo.

Sistema de cuadrícula receptivo

Responsive Grid System tiene mucho a su favor, el nombre de dominio perfecto, una visión clara y las herramientas necesarias para hacer que el diseño de cuadrícula responsive sea muy sencillo. El generador de cuadrícula proporciona una entrada de formulario simple donde puede especificar la cantidad de columnas que le gustaría usar y el margen que le gustaría ver entre ellas ... haga clic en enviar y tendrá una salida de código lista para usar de su próximo diseño de cuadrícula receptiva. El autor, Graham, se complace en hacer todo el trabajo duro por usted si así lo desea, puede ponerse en contacto con él al pie de página.

Cuadriculadamente

Los desarrolladores crearon Gridly como un sistema de diseño de cuadrícula mínimo para admitir los navegadores más modernos de la actualidad. Su estructura liviana ayuda a los desarrolladores a tener un tiempo fácil para configurar y ejecutar un diseño de cuadrícula / columna sin demasiados problemas. En general, el tamaño absurdamente mínimo de esta biblioteca lo dejará con ganas de más para los proyectos venideros.

Formstone

Formstone no es un único sistema de cuadrícula administrado en sí mismo, en realidad es una biblioteca para desarrolladores front-end que necesitan componentes y elementos web altamente personalizables que conforman una página web tradicional que se encuentra a diario. Al ser una biblioteca modular, receptiva y automatizada, Formstone puede usarse no solo con el propósito de escalar un proyecto de sitio web importante, sino también para el uso del diseño de cuadrícula en sí.

Oreja

¿Dónde estaría Bootstrap hoy si no fuera por su sistema de cuadrícula sobre el que se construyó todo lo demás? Todavía estamos esperando ansiosamente que llegue Bootstrap 4, pero mientras tanto ... no puedes resistirte a decir que sí a un framework que ha logrado establecerse como uno de los frameworks front-end más destacados de este siglo. Millones de sitios web funcionan con las funciones de Bootstrap, pero nada de esto sería posible si no fuera por el marco de red que viene integrado en el núcleo de Bootstrap.

Fundación

Foundation es otra biblioteca front-end exitosa que admite el diseño receptivo, la última versión (Foundation 6) trae a la mesa características y elementos aún más modernos que pueden ayudar a los desarrolladores a brindar a sus clientes diseños increíblemente versátiles. Las plantillas fáciles de usar proporcionadas por Foundation le brindan la oportunidad de descansar de todo este desarrollo de la cuadrícula y, en cambio, concentrarse en lo que es importante: las cosas que va a poner dentro de esa cuadrícula.

Esqueleto

Skeleton tiene un diseño hermoso y natural que te dejará con ganas de más. Los creadores formaron la idea detrás de Skeleton de ser la mejor opción para proyectos pequeños. Además, puede usarlo en proyectos en los que no cree que sea apropiado usar un marco completo. Skeleton le proporciona los elementos esenciales que necesita para poner en marcha un prototipo de sitio web; un diseño de cuadrícula, opciones de tipografía para encabezados y secciones, elementos de botón para todas sus necesidades de formulario y, de hecho, formularios personalizados para que pueda ahorrar tiempo para tener que codificar el suyo propio, una buena adición de listas, tablas y sintaxis de código, y un medio marco de consultas para que sus diseños sean totalmente receptivos.

Sistema de cuadrícula sensible 2

Responsive Grid System (versión 2) es un sistema de cuadrícula móvil primero que es súper pequeño en tamaño, pero altamente efectivo en estilo. Puede seleccionar entre una variedad de diseños de columnas (24, 16, 12). También puede personalizar los márgenes y los rellenos entre las columnas y usar polyfills para crear un diseño de diseño estelar.

Sistema de cuadrícula receptivo para su próximo proyecto

El sistema de cuadrícula receptiva para su próximo proyecto utiliza las mismas clases que el sistema de cuadrícula 960. Se creó para atender primero a los visitantes móviles y proporciona un modelo estándar para la gestión de encabezados. Los desarrolladores lo probaron con todos los navegadores modernos, por lo que está en buenas manos. Puede usar esto como un sistema de cuadrícula base que lo ayudará a crear un diseño web receptivo. Esto mantendrá su competencia actual sobre el popular sistema de red.

Texto estándar de HTML5

HTML5 Boilerplate es un marco estándar (plantilla) robusto para desarrolladores front-end. Es para desarrolladores que quieren poner en marcha su proyecto sin las molestias que implican marcos más grandes como Bootstrap o Foundation.