¿Los marcos web como Bootstrap o HTML5 le ofrecen algo a un diseñador (no a un desarrollador)?

Las ventajas suelen ser principalmente:

• Creación rápida de prototipos (es decir, velocidad)
• Coherencia entre navegadores integrada

Si necesita crear una cuadrícula, y la cuadrícula que necesita crear se ajusta al marco CSS preconstruido, entonces la lógica es que está a mitad de camino usando el marco.

Dicho todo esto, tiendo a estar de acuerdo contigo. Los marcos CSS, en mi humilde opinión, son como plantillas de diseño visual en el sentido de que si cumplen el 90% de su objetivo, son geniales, pero si no lo hacen, entonces dedicará mucho más tiempo y esfuerzo a modificar el valor predeterminado en lugar de solo construir. tu propio desde cero.

APÉNDICE:

Debo agregar un beneficio potencial más:

• es un sistema documentado

En un entorno empresarial, donde puede tener varios desarrolladores front-end y el proyecto puede abarcar varios años con varios equipos diferentes de desarrolladores front-end, tener un marco de capa de presentación subyacente documentado puede ayudar.

Eso no quiere decir que su propio marco construido en casa no pueda documentarse, es solo que la documentación a menudo no es una prioridad.

Estoy familiarizado con HTML5 Boilerplate, pero estoy más familiarizado con Bootstrap, así que hablaré sobre eso. Recuerde que ambos están orientados a dos tareas diferentes (H5BP es una plantilla normalizada receptiva, Bootstrap es una colección de widgets HTML/CSS/JS y una cuadrícula receptiva). De hecho, se pueden usar juntos .

Sin embargo, no puedo evitar preguntarme si Bootstrap et. Alabama. son meras muletas que están paralizando a los diseñadores alimentándolos con cuchara con su propia marca de código. Por lo tanto, asegura una base de consumidores que dependerá completamente de una solución de terceros y su funcionalidad para todo, o al menos para la mayoría. Me recuerda a aquellos que solo pueden diseñar un sitio web si pueden usar Dreamweaver. Y Dios no lo quiera si no tienen acceso a Dreamweaver y se necesita un cambio.

La analogía falla aquí porque tiene acceso completo a la fuente de Bootstrap. Si no te gusta cómo funciona algo, puedes cambiarlo. Para mí, es lo opuesto a una muleta: puedes usar el código fuente para aprender técnicas CSS.

No estoy de acuerdo en que "diseñar un sitio web" deba estar tan cerca del metal más de lo que creo que los codificadores de C deben tener un conocimiento íntimo del lenguaje ensamblador. Aunque incluso esa analogía falla porque ajustar HTML/CSS es simplemente una cuestión de extender los selectores y agregar lo que necesita.

¿Alguien puede ensalzarme las grandes virtudes de sistemas de plantillas como Bootstrap o HTML5 Boilerplate?

La característica principal de Bootstrap, para mí, es el estilo de widget consistente y fácil de aplicar y los componentes de Javascript. ¿Quieres que un enlace parezca un botón? Agregue una clase '.btn'. ¿Quieres una mesa? Agregue una clase '.table'. ¿Quieres un elemento de navegación? Configure una lista desordenada y agregue clases de navegación.

Los menús desplegables, popovers, alertas, etc. se agregan fácilmente a los elementos con atributos de datos. Bootstrap incluye un conjunto de iconos de muy buen aspecto que se pueden integrar fácilmente en los widgets.

¿Qué los hace valiosos para ti?

• Puede hacer prototipos de sitios rápidamente
• Toda la depuración de CSS multinavegador y multiplataforma se ha realizado por mí.
• CSS fácilmente personalizable con una amplia selección de variables para que pueda experimentar y crear prototipos de diseños rápidamente.
• Widgets de navegación estándar
• Código fuente abierto y gratuito, puedo ensuciarme las manos y personalizar el LESS si necesito una nueva mezcla o cambiar el comportamiento de la manera que necesito.

¿Simplemente está familiarizado con el sistema que utiliza para poder navegar fácilmente o todavía tiene que buscar artículos?

Una de las mayores características de Bootstrap es su excelente documentación . Puedo navegarlo fácilmente y los selectores css son intuitivos y fáciles de recordar.

¿Podrías construir un sitio sin ellos si tuvieras que hacerlo?

Sí, pero claramente es más trabajo. Puedo concentrarme en UX y diseños de prototipos rápidamente con widgets terminados de buen aspecto y funcionalidad consistente.

Lo bueno de los sistemas y marcos de plantillas es que pueden ahorrarle mucho tiempo si trabaja como ellos quieren. Entonces, con Bootstrap, una vez que aprende su semántica para hacer un carrusel JS, es casi criminalmente simple de implementar. Además, Bootstrap parece volverse mucho más simple si lanza el suyo propio antes de comenzar o usa algo como bootstrap-sass en Rails para cambiar esas variables sobre la marcha; te evitará cambiar todo más tarde.

DA01 habla sobre la consistencia del navegador... ese es un factor importante para mí. Es por eso que uso jQuery a pesar de que muchas personas en SO le recordarán que agregar una biblioteca grande solo para hacer algunas cosas es una pérdida de recursos. Sé que cuando uso jQuery, funcionará en un determinado conjunto de navegadores, por lo que, aunque probablemente pueda lograr una solución más liviana por mi cuenta, me resultó más beneficioso aprender cómo jQuery quiere que escriba. JavaScript y luego hacerlo a su manera.

Al final, tiendo a encontrar marcos HTML/CSS restrictivos; Soy lo suficientemente fanático del control que todavía me gusta codificar a mano cuando puedo. Pero respeto el hecho de que las personas más inteligentes y avanzadas que yo dedicaron mucho tiempo a configurar estas plantillas/marcos.

He estado investigando marcos mucho el último mes más o menos. En realidad, no me he sumergido en ninguna de las soluciones, pero un par de alternativas de marco que están en mi lista son Foundation , Intuit y YAML y Base .

Lo bueno de estos es que no tienen el aspecto 'Bootstrap' y parecen animar a los diseñadores a hacer su trabajo (diseñar), mientras que ellos se encargan de la capacidad de respuesta.

Aquí hay una gran lista de marcos y más información en este artículo .

Como se mencionó, hice el trabajo preliminar de investigación, pero no comencé a probarlos, por lo que cualquier comentario que defienda cualquiera de los marcos sería útil.

Por interés, ¿alguno de ustedes trabaja en un gran equipo para una gran empresa?

Los marcos como bootstrap son fantásticos para crear un estándar de código consistente a lo largo de un proyecto, también significa que al reclutar nuevos desarrolladores, aquellos con experiencia en un marco popular ya estarán familiarizados con la sintaxis y pueden volverse productivos mucho más rápido... una gran noticia para las grandes empresas.

Además... con marcos como bootstrap, lo mantienen constantemente actualizado al admitir más tamaños de pantalla, más dispositivos y mejores funciones, para una empresa como la nuestra (donde usamos bootstrap) esto se reduce esencialmente al ahorro de dinero.

Al leer algunas de las respuestas hasta ahora, parecen tener una mentalidad muy estrecha, supongo que la mayoría de las respuestas provienen de personas acostumbradas a trabajar solas o en equipos muy pequeños y en proyectos más pequeños donde este tipo de cosas normalmente no es un problema. .

Además de lo que se ha dicho en las excelentes respuestas anteriores, otra ventaja de estas plantillas sería la coherencia entre dispositivos . Las cuadrículas integradas facilitan el diseño para cualquier sistema operativo.

Todavía prefiero escribir mi propio código, por las siguientes razones:

• Familiaridad con lo que ya he escrito. Si necesito cambiar algo, sé exactamente dónde está;

• Estructura centrada en el proyecto. Cada nuevo sitio/aplicación tendrá necesidades diferentes a las del anterior, por lo que es posible que los archivos y recursos deban organizarse por separado.

• Vistas personalizadas para diferentes dispositivos.

A menos que esté creando una página muy restringida, terminará agregando más y más estilos a los elementos nuevos y sobrescribiendo los existentes.

Debido a que me gusta trabajar con diseños receptivos, la principal razón por la que no los usaría es porque prefiero diseñar cada paso receptivo "por separado" y como un todo. Y estas plantillas suelen funcionar con una cuadrícula más o menos rígida que no se puede modificar por completo.

La mayor ventaja es que puede experimentar con el cambio de tamaño usted mismo en lugar de solo especular cómo se verían las cosas.

Tengo un enfoque de desarrollo de "primero el contenido" en el que codifico la navegación y agrego el contenido del texto. Tiende a exponerlo a cosas que no anticipó cuando estaba en la fase de diseño.

Al usar un marco como Twitter Bootstrap, puede probar las páginas mientras aún están en diseño e incluso podría descubrir problemas de usabilidad y otros desafíos de la experiencia del usuario. Los marcos tienen muchas clases reutilizables con las que se familiarizará y le ahorrarán tiempo.

Mencionaste que codificas mucho desde cero. Cuando tengo algo que necesita ser muy personalizado o muy liviano, elijo Skeleton

Durante años, solía codificar todo a mano, pero hoy en día tiendo a usar Bootstrap. ¿Por qué hago eso?

1. Obtengo un diseño receptivo con muy poco trabajo. En algunos de los sitios web en los que estaba trabajando, solo necesitaba un par de ajustes menores para obtener un diseño optimizado para tabletas y dispositivos móviles. La barra de navegación receptiva es uno de mis componentes de arranque favoritos.
2. Los controles predeterminados no son consistentes entre los navegadores y el sistema operativo, sin mencionar que todos son invariablemente feos, independientemente del sistema operativo o navegador que esté utilizando. Con bootstrap, obtienes una apariencia decente y consistente y sientes poco trabajo. Sin embargo, si desea cambiar el estilo de todos los controles de todos modos, entonces sí, Bootstrap no le ahorrará mucho tiempo, pero en mi experiencia, la mayoría de las veces no tendrá suficiente tiempo para cambiar el estilo de todos los controles pero aún así se sentirá irritado por el feo valor predeterminado. control S.
3. Pone un límite a lo que quieres hacer, lo cual es bueno, porque cuando trabajas en CSS puro, tiendes a querer modificar cada pequeña cosa (el color, el grosor del borde, el degradado, la sombra, el radio del borde, el transiciones, y la lista continúa), mientras que individualmente toman poco tiempo, en general es un gran sumidero de tiempo. Cuando trabaja en proyectos con fecha límite, desea limitar lo que puede y no puede hacer; el uso de marcos le permite pensar en componentes de grano más grueso en lugar de qué propiedades de CSS modificar.
4. Algunos marcos del lado del servidor tienen integración con bootstrap. Por ejemplo, cuando usa django-bootstrap, puede hacerlo {{ form|as_bootstrap }}para obtener formularios con estilo de arranque, incluido el resaltado rojo en los mensajes de error, etc.

Mientras alteraba Bootstrap, se me ocurrió que el 80% o más de mi tiempo lo dedicaba a aprender qué clase o identificación se aplicaba a algo, y luego encontrar eso en el CSS para ajustarlo.

Ahí es donde te equivocas. Si desea beneficiarse de Bootstrap, no debe personalizar demasiado; renuncias a la flexibilidad de tener que hacerlo y poder modificarlo todo cuando usas componentes prefabricados. No debería perder tiempo cortando o tallando tablas de madera al decorar una habitación con componentes de IKEA.

Bootstrap es bueno cuando necesita parchear rápidamente un sitio web en funcionamiento a partir de componentes prediseñados; sus componentes sobresalen como un pulgar dolorido si los coloca en sitios con diseños elegantes, por lo que generalmente dejo Bootstrap para ese tipo de proyectos.

El uso de cualquiera de los paquetes front-end preconfigurados simplemente significa que necesito aprender sus convenciones de nomenclatura y su estructura en lugar de depender de los míos.

Esa es en realidad una ventaja de usar un paquete popular. Es más fácil entregar un proyecto a otro desarrollador cuando ambos saben lo que hace "btn-group", "btn btn-large", con marcos personales tendrían que aprender sus peculiaridades (o más común, simplemente se conectarían en cascada su css con sus cambios, y sin molestarse en tratar de descifrar o modificar su código).

¿Simplemente está familiarizado con el sistema que utiliza para poder navegar fácilmente o todavía tiene que buscar artículos?

Los comunes como btn, table, row*, span*, etc. serían naturales. Pero para el html de los componentes principales, es mucho más rápido simplemente copiar y pegar de sus ejemplos en lugar de escribirlos.

¿Podrías construir un sitio sin ellos si tuvieras que hacerlo?

He estado allí, hecho eso, muchas veces.

solo son buenos para:

1. diseñadores que no están familiarizados con la codificación pero quieren una solución para llevar sus diseños a un sitio.
2. una forma de agilizar la producción en línea para alguien que no quiere construir su propio marco.

Personalmente, tengo mis propios métodos y no deseo seguir este camino porque ya aprendí a codificar CSS, HTML y jQuery. Veo un beneficio en esto para las personas que no tienen idea y están tratando de aprender a codificar. Habría sido bueno ver algo así hace unos cinco años. Además, como ha dicho, le llevaría más tiempo implementar esto en sus métodos de producción actuales.

EDITAR: no estoy tratando de secuestrar su hilo, pero yo también me pregunto lo mismo, pero con respecto a WordPress. He usado WordPress ligeramente, pero no sé si un marco es beneficioso. He planeado seguir el camino antiguo hasta que pueda encontrar un gran beneficio.

Bootstrap es bueno como punto de partida para un diseño receptivo. Pero en lo que respecta al diseño, creo que es bastante deficiente. Tiene su aspecto un poco 'bootstrappy', que debido a que es una plantilla se usa demasiado.

Pero debe tener en cuenta para qué se creó Bootstrap, fue para brindar consistencia a las aplicaciones internas creadas por Twitter, y si fuera a usarlo para eso, o incluso si es un desarrollador que quiere arreglar rápidamente allí web aplicación sin pensarlo mucho, tal vez como mvp o prototipo es una herramienta realmente genial.