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

Tenga en cuenta que esto se trata de diseño mucho más que desarrollo.

Construyo sitios desde cero con CSS y HTML completamente escritos a mano.

Hace tiempo que conozco las plantillas CSS precompiladas, como Bootstrap o HTML5 Boilerplate . Los he mirado brevemente en el pasado, pero nunca salté a usarlos para nada. No tengo problemas para restablecer CSS, o incluir javascript cuando sea necesario, o configurar para viewports.

Esta tarde, codifiqué una página HTML5 / CSS básica. Nada realmente impactante en términos de diseño. Simplemente un punto de partida. Luego decidí darle un giro a Bootstrap con el mismo diseño. Es una página bastante estándar de 960 px, 3 columnas con imagen de héroe.

Cuando estoy alterando Bootstrap, se me ocurrió que el 80% o más de mi tiempo lo pasaba aprendiendo qué clase o id se aplicaba a algo, y luego lo encontraba en el CSS para ajustar. Quedó claro que Bootstrap no me iba a salvar en ningún momento. De hecho, Bootstrap aumentaría en gran medida los tiempos de producción debido al CSS excesivamente diseñado.

* ( por "demasiado exagerado" quiero decir que hay una gran cantidad de CSS que probablemente no usaría para ningún sitio web dado. No es que haya CSS innecesario en general ) .

Entiendo que si estuviera familiarizado con Bootstrap, estaría familiarizado con los nombres de clase / identificación y la ubicación general en las hojas de estilo. Por lo tanto, estoy dispuesto a cambiar un poco el tiempo que me estaba llevando, dándome cuenta de que parte de esto se debió a mi propia falta de familiaridad.

Sin embargo, no puedo evitar preguntarme si Bootstrap et. Alabama. son simplemente muletas que paralizan a los diseñadores con una cuchara que les da su propia marca de código. Por lo tanto, bloquear 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.

Cuando construyo un sitio, uso mi propio conjunto de clases estándar y nombres de identificación. Estructuro CSS como es intuitivo para mí. Tengo mi propio conjunto de plantillas precompiladas para una configuración rápida. Por lo tanto, cualquier sitio que construya lo puedo editar con bastante rapidez. 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 confiar en la mía.

• ¿Alguien puede ensalzarme las grandes virtudes de sistemas de plantillas como Bootstrap o HTML5 Boilerplate ?
• ¿Qué los hace valiosos para ti?
• ¿Está simplemente familiarizado con el sistema que utiliza para poder navegarlo fácilmente o todavía tiene que buscar elementos?
• ¿Podría construir un sitio sin ellos si fuera necesario?

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

Lo bueno de esto es que no tienen el aspecto 'Bootstrap' y parecen alentar a los diseñadores a su trabajo (diseño), mientras 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 de investigación, pero no he comenzado a probarlos, por lo que cualquier comentario que defienda cualquiera de los marcos sería útil.

Las ventajas tienden a ser principalmente:

• Creación rápida de prototipos (es decir, velocidad)
• Consistencia cruzada del navegador incorporada

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 medio 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 con el 90% de su objetivo, son geniales, pero si no lo hacen, pasará mucho más tiempo y esfuerzo modificando el valor predeterminado en lugar de simplemente construir tu propio rasguño

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 documentado de capa de presentación subyacente puede ayudar.

Eso no quiere decir que su propio marco de trabajo casero 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 simplemente muletas que paralizan a los diseñadores con una cuchara que les da su propia marca de código. Por lo tanto, bloquear 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 tienes acceso completo a la fuente Bootstrap. Si no te gusta cómo funciona algo, puedes cambiarlo. Para mí es lo opuesto a una muleta: puede 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 como creo que los codificadores C no deben tener un conocimiento profundo del lenguaje ensamblador. Aunque incluso esa analogía no funciona 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 decisiva de Bootstrap, para mí, es el estilo de widget y los componentes de Javascript consistentes y fáciles de aplicar. ¿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 elementos con atributos de datos. Bootstrap incluye un conjunto de iconos muy bonitos que se pueden integrar fácilmente en widgets.

¿Qué los hace valiosos para ti?

• Puede crear prototipos de sitios rápidamente
• Toda la depuración de css entre navegadores y plataformas cruzadas se ha hecho por mí.
• CSS fácilmente personalizado con una amplia selección de variables para que pueda experimentar y crear diseños de prototipos rápidamente.
• Widgets de navegación estándar
• Código fuente abierto y gratuito, puedo ensuciarme las manos y personalizar MENOS si necesito un nuevo mixin o cambiar el comportamiento de la manera que lo necesito.

¿Está simplemente familiarizado con el sistema que utiliza para poder navegarlo fácilmente o todavía tiene que buscar elementos?

Una de las características más importantes de Bootstrap es su excelente documentación . Puedo navegar fácilmente y los selectores CSS son intuitivos y fáciles de recordar.

¿Podría construir un sitio sin ellos si fuera necesario?

Sí, pero claramente es más trabajo. Me puedo centrar en UX y diseños de prototipos rápidamente con widgets atractivos y funcionalidades consistentes.

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

DA01 habla sobre la consistencia del navegador ... eso es un gran factor para mí. Es por eso que uso jQuery, aunque cualquier cantidad de personas en SO le recordará que agregar una biblioteca grande solo para hacer algunas cosas es una pérdida de recursos. Sé que cuando uso jQuery, funcionará en un cierto conjunto de navegadores, y aunque probablemente pueda lograr una solución más liviana por mi cuenta, he encontrado más beneficioso saber cómo jQuery quiere que escriba JavaScript y luego hazlo a su manera.

Al final, tiendo a encontrar marcos HTML / CSS restrictivos; Soy un 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.

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 ... Grandes noticias para 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 características, para una empresa como la nuestra (donde usamos bootstrap), esto se reduce esencialmente al dinero ahorrado.

Al leer algunas de las respuestas hasta ahora, parecen ser de mente muy estrecha, supongo que la mayoría de las respuestas son de personas acostumbradas a trabajar solos o en equipos muy pequeños y en proyectos más pequeños donde este tipo de cosas generalmente 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 hacen que sea muy fácil de diseñar 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 anteriores, por lo tanto, los archivos y recursos pueden necesitar ser organizados por separado.

• Vistas personalizadas para diferentes dispositivos.

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

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

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

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

Al usar un marco como Twitter Bootstrap, puedes probar las páginas mientras aún estás en diseño e incluso puedes 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.

Usted mencionó que codifica mucho desde cero. Cuando tengo algo que necesita ser muy personalizado o muy liviano, voy con Skeleton

Durante años, solía codificar a mano todo, 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 necesito un par de pequeños ajustes para obtener un diseño optimizado para tabletas y dispositivos móviles. La barra de navegación receptiva es uno de mis componentes favoritos de arranque.
2. Los controles predeterminados no son consistentes entre los navegadores y el sistema operativo, sin mencionar que todos son invariablemente feos, sea cual sea el sistema operativo o el navegador que esté utilizando. Con Bootstrap, obtienes un aspecto decente y consistente y sientes poco trabajo. Sin embargo, si desea cambiar el estilo de todos los controles de todos modos, sí, Bootstrap no le ahorrará mucho tiempo, pero en mi experiencia, la mayoría de las veces no tendría suficiente tiempo para cambiar el estilo de todos los controles, pero aún así se siente irritado por el desagradable valor predeterminado controles.
3. Pone un límite a lo que quiere hacer, lo cual es bueno, porque cuando trabaja en CSS puro tiende a querer ajustar cada pequeña cosa (el color, el grosor del borde, el gradiente, la sombra, el radio del borde, el transiciones, y la lista continúa), aunque individualmente toman poco tiempo, en general es un sumidero de tiempo importante. Al trabajar en proyectos con fecha límite, desea limitar lo que puede y no puede hacer; El uso de frameworks le permite pensar en componentes de grano más grueso en lugar de las propiedades CSS para ajustar.
4. Algunos marcos del lado del servidor tienen integración con bootstrap. Por ejemplo, cuando usa django-bootstrap, puede hacer {{ form|as_bootstrap }}para obtener formularios con estilo bootstrap-style, incluyendo resaltado en rojo en mensajes de error, etc.

Cuando estoy alterando Bootstrap, se me ocurrió que el 80% o más de mi tiempo lo pasaba aprendiendo qué clase o id se aplicaba a algo, y luego lo encontraba en el CSS para ajustar.

Ahí es donde te equivocas. Si desea beneficiarse de Bootstrap, no debe personalizar demasiado; renuncia a la flexibilidad de tener que poder modificar todo al usar componentes preconstruidos. No debe pasar tiempo cortando o tallando tableros de madera al decorar una habitación con componentes de IKEA.

Bootstrap es bueno cuando necesita parchear rápidamente un sitio web que funcione desde componentes preconstruidos; sus componentes se destacan como dolor en el pulgar 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 confiar en la mía.

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

¿Está simplemente familiarizado con el sistema que utiliza para poder navegarlo fácilmente o todavía tiene que buscar elementos?

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

¿Podría construir un sitio sin ellos si fuera necesario?

He estado allí, hecho eso, muchas veces.

solo son buenos para:

1. diseñadores que no están familiarizados con la codificación pero desean una solución para llevar sus diseños a un sitio.
2. una forma de transmitir 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 esta ruta 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. Hubiera sido agradable ver algo así hace unos cinco años. Además, como ha dicho, le tomaría más tiempo implementar esto en sus métodos de producción actuales.

EDITAR: no estoy tratando de atacar tu hilo, pero yo también me pregunto lo mismo, pero en lo que respecta a WordPress. He usado WordPress a la ligera, pero no sé si un marco es beneficioso. He planeado seguir el camino tradicional hasta que pueda encontrar un beneficio importante.

Bootstrap es bueno como punto de partida para un diseño receptivo. Pero en lo que respecta al diseño, creo que es bastante escaso. Tiene su aspecto un poco 'bootstrappy', que debido a que es una plantilla está extremadamente sobre utilizada.

Pero debes tener en cuenta para qué se hizo Bootstrap, era para brindar coherencia a las aplicaciones internas creadas por Twitter, y si fueras a usarlo para eso, o incluso si eres un desarrollador que quiere arreglar rápidamente la web aplicación sin pensarlo mucho, tal vez como un mvp o prototipo es una herramienta realmente genial.