Desarrollar páginas web y marcos es desafiante y difícil, especialmente si tienes que luchar con un sistema de cuadrícula que no responde o está mal diseñado. Afortunadamente, existen muchos sistemas y marcos de grid HTML5/CSS3 de alta calidad en los que puede confiar para facilitar su trabajo.
Veamos 15 de estos sistemas de redes superiores uno por uno.
1. Borbón puro
El primero en la lista es: una biblioteca de mezclas de preprocesador SASS. Neat es un marco ideal para desarrolladores que ya usan SASS y Bourbon, pero también es una buena opción ya que brinda a los desarrolladores acceso a un sistema grid muy fluido, rápido y fácil de configurar. En cuestión de minutos tendrás un framework flexible listo para realizar cambios o ajustes en elementos y páginas web hasta que queden a tu gusto.
2. Sistema de red 960
es una popular herramienta de cuadrícula que ya utilizan miles de sitios web. Diseñada originalmente por Nathan Smith, esta herramienta muy eficiente puede ayudarlo a optimizar su flujo de trabajo al ofrecer opciones. Ya sea que elija el diseño de columnas 12 o 16, puede iniciar una página de inicio que sea perfecta para admitir entradas estáticas o dinámicas en cuestión de momentos.
Incluso puedes agregar columnas adicionales a una página determinada, aunque querrás profundizar en su tutorial para aprender cómo hacerlo.
3. grd
Grd es simple todavía. Si desea crear diseños modernos, intuitivos y optimizados, Grd es la elección perfecta. Viene con una función de demostración en vivo que puede utilizar para ajustar diferentes configuraciones o personalizaciones de diseño antes de implementarlas en páginas en vivo. Con Grd, le resultará excepcionalmente fácil crear áreas de contenido general, pies de página, encabezados y otras áreas utilizando un menú desplegable básico de controles y configuraciones.
4. Cuadrícula muerta y simple
Dead Simple Grid es un 200-bite. Esto es una ventaja ya que significa que sus páginas se ejecutan mucho mejor que otros marcos. DSG te permite separar la cuadrícula para incorporar una barra lateral flexible o incluso un área de contenido principal al desarrollar páginas. Es una elección perfecta para aquellos que desean crear páginas de inicio minimalistas (como la de), blogs y otras áreas web.
5. Poco semántico
Luego está: una versión estrechamente relacionada y de seguimiento de 960 Grid. Sin embargo, Unsemantic ofrece un marco de diseño totalmente responsivo a través del cual los desarrolladores como usted pueden reorganizar los diseños de página siempre que necesiten producir o editar una página existente. Con Unsemantic, podrá promocionar y mostrar fácilmente contenido crítico, además de utilizarlo de manera sólida para los clientes. A los desarrolladores de aplicaciones para el usuario les resultará fácil utilizar este marco de cuadrícula, ya que Unsemantic también utiliza consultas de medios.
6. Csswizardry-grids
es una cuadrícula HTML que te permite ahorrar tiempo y energía a partes iguales. Esta herramienta sólida y bien diseñada es fácil de usar y fácil de estructurar y dominar, especialmente si consulta el tutorial incluido. Csswizardry-grids admite muchas variaciones y le permite reordenar libremente los elementos de la página para que coincidan con sus deseos de acuerdo con especificaciones exactas.
7. Cuadrícula simple
No te dejes engañar: es una herramienta diferente al DSG mencionado anteriormente. De todos modos, ofrece un diseño muy flexible y responsivo compatible con computadoras de escritorio, teléfonos inteligentes y tabletas.
Esto es ideal para la mayoría de los usuarios de Internet que ahora utilizan dispositivos móviles. Puede utilizar Simple Grid con pantallas grandes y altas resoluciones para mayor comodidad. Este marco de cuadrícula liviano ofrece una estructura de 12 columnas para que pueda crear un diseño de página que se adapte a sus necesidades o preferencias únicas. Incluso puedes dividir tu página en hasta seis columnas con solo presionar un botón.
8. Gridlex
es una herramienta increíblemente simplista y fácil de usar de principio a fin, en parte porque está basada en Flexbox. De todos modos, le permite ajustar rápidamente las columnas con su cuadrícula y realizar ajustes adicionales para garantizar que el diseño final de su nueva página se vea excelente de arriba a abajo. Este sistema de cuadrícula de primer nivel puede ser una excelente herramienta adicional para su flujo de trabajo y proyectos personales.
9. Plancha
es un sistema de cuadrícula modular y muy fluido para navegadores modernos como Google Chrome, Firefox, Safari y más. Esta herramienta ultracompatible es perfecta para crear páginas para navegadores web y dispositivos móviles populares.
Griddle garantiza que el rendimiento de su aplicación será fluido y de primera clase, pase lo que pase. Le permite crear cuadrículas proporcionales o anidadas, cuadrículas y unidades centradas e híbridas, y más. Incluso puede modificar la alineación vertical de los elementos, el centrado horizontal de la unidad de control y combinar unidades fijas y fluidas para personalizar su producto final.
10. Gridly
continúa la tendencia de nomenclatura anterior y es un sistema de diseño de cuadrícula mínimo. Por tanto, es perfectamente compatible con los navegadores de Internet modernos como Firefox y Chrome. Gracias a su estructura liviana, Gridly garantiza que le resultará fácil ejecutar el diseño de su cuadrícula o columna sin demasiada frustración o molestia. La biblioteca es mínima, por lo que puede usarla con otros marcos o herramientas, por ejemplo, ejecutándola simultáneamente sin forzar las capacidades de su sistema.
11. Fundación
no es un marco de cuadrícula, sino una biblioteca de interfaz de usuario perfecta para desarrolladores que buscan elementos de diseño web responsivos. Foundation 6, la última versión de esta herramienta, ofrece varios elementos y características modernizados para ayudarlo a desarrollar diseños de páginas versátiles y de alto rendimiento. Ofrece varias plantillas fáciles de usar, lo que permite a los desarrolladores centrarse en lo que desean colocar dentro de las cuadrículas de las páginas en lugar de en las propias cuadrículas una y otra vez.
12. Arranque
es uno de los marcos de grid front-end más destacados y se ha utilizado en millones de sitios web en Internet por una buena razón. Está bien diseñado, es intuitivo, flexible y potente, todo al mismo tiempo. Es una buena idea comenzar a usar Bootstrap ahora, ¡incluso mientras esperamos colectivamente Bootstrap 4!
13. Piedra de forma
Al igual que Foundation, Formstone es una biblioteca para varios sistemas de grid en lugar de un sistema de grid administrado. Es ideal si necesita componentes personalizables, elementos web y otras herramientas para crear páginas web dinámicas y de alta calidad. La biblioteca es responsiva, automatizada y modular, por lo que puede ser excelente para desarrollar un diseño de cuadrícula de alta calidad o escalar un proyecto de sitio web grande, según sus necesidades.
14. Texto repetitivo HTML5
es una plantilla estelar que los desarrolladores de aplicaciones para el usuario pueden utilizar para iniciar proyectos de nuevas páginas sin muchos problemas. También es ideal para combinar con algunas de las herramientas anteriores, como Foundation o Bootstrap.
15. Sistema de red responsivo para su próximo proyecto
for Your Next Project tiene un nombre complicado, pero bien podría valer la pena dedicarle tiempo. Utiliza las mismas clases de cuadrícula que el sistema 960 Grid, pero está diseñado para lo primero y lo más importante. Además de eso, proporciona una función repetitiva para que puedas administrar tus encabezados fácilmente. Los desarrolladores que crean principalmente sitios móviles apreciarán esta herramienta.
¿Qué marco debería elegir?
Descubrí que los marcos que he usado con más frecuencia son Griddle y Formstone. He llegado a apreciar mucho la amplia compatibilidad que ofrece Griddle entre navegadores web y dispositivos móviles, mientras que Formstone es a menudo mi marco de referencia para el trabajo de desarrollo front-end gracias a su diseño modular y responsivo.
Dicho esto, al final del día, podrías beneficiarte al probar cada uno de estos marcos y sistemas de grid HTML5/CSS3 por ti mismo cuando tengas tiempo. De esa manera, podrá determinar cuál es el adecuado para sus necesidades y conjunto de habilidades.
Facebook Comments
Disqus