¿Cuál es una mejor alternativa a Bootstrap?

En 2015, realmente me alejé de los dos grandes marcos: Foundation y Bootstrap. Para estar seguros, todavía tienen sus usos en la creación rápida de prototipos.

No me malinterpreten, me encanta la base. He ganado mucho dinero con Foundation desde 2012. Nunca he sido tan aficionado a Bootstrap, pero han tenido un impacto transformador similar en el mercado del diseño.

El problema con los grandes sistemas de red es que no son muy útiles cuando necesitas salir de ellos. La mayoría de las páginas que construye no se ajustarán a la línea en cada elemento, especialmente cuando alterna entre ancho completo y contenido en recuadro, o cuando está acumulando una subsección. Muchas veces, se encontrará pirateando márgenes o simplemente abandonando por completo la estructura de clase atómica como resultado.

Si quieres entrar en un mundo posterior a Bootstrap, las cosas se ponen un poco prácticas. Primero debemos examinar lo que un sistema como Bootstrap le brinda:

  1. Un sistema de cuadrícula adaptativo con puntos de interrupción
  2. Una biblioteca de componentes CSS
  3. Una biblioteca JS
  4. Elementos de navegación preconfigurados

También notarás que muchas veces no usas todo lo que te dan. Aún así, tendrás que reemplazar todas esas cosas. El material de JavaScript y navegación es fácil. El CSS es más difícil porque tienes que aprender a pensar en términos de diseño atómico (aquí hay una configuración popular: construir sistemas de diseño atómico). La parte más difícil es envolver su mente alrededor de una cuadrícula sensible personalizada.

Para ese componente crítico, la grilla, he estado usando Susy: herramientas eléctricas para la web con Breakpoint y Compass para generar una grilla a pedido. En lugar de tratar de hacer que todo se ajuste a un sistema de cuadrícula precompilado, puedo llamar a un contenedor de cuadrícula a pedido. Puede ver una versión relativamente simple del principio aquí: Noelle Winery & Vineyard. Tenga en cuenta que la capa subyacente de botella especificada en el PDF para el modo de escritorio requirió algunos ajustes realmente creativos de los anchos de cuadrícula, que habrían sido mucho menos precisos en Bootstrap. Basé la cuadrícula libremente en la especificación del sistema de cuadrícula 1200px. En ese diseño, estamos hablando de un sitio muy pequeño, así que no me he vuelto atómico con mis definiciones de contenedor o segmento de cuadrícula. Simplemente no era necesario (léase: no valía la pena las horas y el cliente no iba a pagar por la pedantería).

Entonces, la versión corta es que si quieres seguir lo que Zurb y Twitter comenzaron por la madriguera del conejo a su conclusión natural, deberías tomarte unos días en CodePen y experimentar con SUSY. También debe comenzar a reunir un conjunto de los mejores elementos de su clase como Magnific, Select2 y sus controladores favoritos para imágenes de retina + videos receptivos para que tenga una biblioteca JS familiar a la que recurrir cuando se trata de efectos prácticos.

Es mucho trabajo aprender, pero una vez que tenga un sistema inactivo, su diseño se volverá mucho más flexible como resultado.

Siempre he sido un detractor de bootstrap y cualquier “marco” CSS, ya que tienden a complicar en lugar de simplificar y especialmente porque como diseñador puedo ver cómo todos homogeneizados … obviamente reconocen un sitio web con bootstrap, lo que constituye un obstáculo no fácil superar para llegar a diferenciar la identidad de un sitio web o una aplicación.
En mi caso, siempre utilizo en mi CSS una estructura lo más simple posible, siempre pensando en la flexibilidad y la limpieza del código. Por ejemplo, siempre use porcentajes para ancho y alto para altura, el tamaño de la caja para evitar desajustes no deseados y minimizar el uso de reglas específicas para varios dispositivos (consulta de medios) … menos es más (sí, por supuesto, uso menos) … podría alentar yo y cree algo al respecto 🙂

¿Desea establecer sus propios anchos de contenedor, eso es todo para buscar alternativas al bootstrap?

Puede crear su archivo css personalizado con clases como col-md- *, col-xs- * etc.
y define el valor a ancho

Luego incluya este archivo después de haber incluido bootstrap.min.css

Esto debería anular los valores del ancho de arranque predeterminado

IU semántica. Desde la versión 2.0 usa flexbox para su grilla.

Eso realmente depende de sus necesidades y preferencias. No has dicho lo que no te gusta de Bootstrap.
Personalmente prefiero la Fundación, pero no necesariamente es mejor. Simplemente lo prefiero.
¿Deberías usar Bootstrap o Foundation?

Estoy usando la interfaz de usuario de ArtDesign durante más de 5 años y puedo decir que es una muy buena alternativa para todo tipo de proyectos web que tenga. Tienes posibilidades increíbles de usar sus productos a un precio excelente 🙂

Desde el punto de vista de la programación, la mejor alternativa sería aprender a usar Bootstrap e intentar construir su propio marco privado. Intente implementarlo sabiamente y responderá a todas sus necesidades y puede pulirlo todos los días. Como conoce la estructura, puede alojarla centralmente para todos sus proyectos (en un CDN) y, con un poco de suerte, puede hacer que sus proyectos actualicen automáticamente su aspecto con el tiempo.

Debería leer en flexbox que está integrado en css3. No se ha utilizado mucho porque la mayoría de los navegadores no lo admitían. Ese no es el caso en estos días ya que la mayoría de los principales navegadores web lo admiten ahora.
Flexbox: ha llegado la próxima generación de diseño CSS – Treehouse Blog

More Interesting

¿Qué herramientas o métodos utilizan los desarrolladores front-end para aumentar su velocidad y eficiencia de codificación?

Cómo alojar una página web y vincularlos a un nombre de dominio

¿Las API RESTful todavía se consideran RESTful si dependen del estado de la sesión del navegador y las cookies?

¿Qué ventaja tiene el uso de componentes web sobre los complementos de jQuery?

Cómo hacer que mi sitio web de viajes sea más atractivo

¿Cuál es la forma de hacer CMS en PHP sin inicio de sesión 'admin'? Lo que quiero decir es CMS sin formulario de inicio de sesión en la página de inicio, pero sin WordPress ni nada de eso.

Después de aprender los conceptos básicos de JavaScript, ¿qué debo aprender a continuación?

¿Cómo involucro a un redactor para un sitio web de espiritualidad? ¿Cuánto cobran?

¿Cuáles son las principales limitaciones de WordPress como plataforma de desarrollo web en comparación con la codificación en HTML, CSS y JavaScript?

¿Qué idioma debe aprender un analista web, PHP, Python o ambos? ¿Cómo va a beneficiar su carrera?

¿Cuál es la mejor estructura MVC con ReactJS (escalable, popular, gran comunidad, etc.)?

Algunos sitios no muestran extensiones como .html o .php, etc. ¿Cómo es eso posible y cómo se hacen?

¿Cuáles son las ventajas y desventajas de ASP.NET? ¿Cuál es su alcance?

Cómo hacer que los módulos AngularJS estén disponibles para una aplicación

¿Cómo ganar dinero construyendo sitios web menores?